前端FLV视频直播解决方案

项目背景：

1. 背景给出一个地点，持续不停的推送flv视频流。
2.前端需要接收视频流，并探求合适的播放插件。
一开始：

着实用的是xgplayer（西瓜视频）。
官网地点：西瓜播放器
使用的是直播，flv的插件：西瓜播放器 | xgplayer-flv。
但是无法播放，现象就是一直loading；
厥后，查了很多多少资料，发现一个issue：
流数据正常下载，xgplayer-flv无法播放 · Issue #604 · bytedance/xgplayer · GitHub。

和我环境一模一样，但是暂时没有什么解决方案。说明，此路不通。
柳暗花明：

找了很久，找到一个全能播放插件 —— Jessibuca。
官网地点：Jessibuca

如何使用：

前端如何使用？建议直接下载相关资源，静态引入。
需要下载三个资源，如下图：

怎么找到这三个资源？去官网的network里找找吧，不在多说。

vue中使用详情：

起首，上边的三个文件引入public。在index.html文件中只需要引入jessibuca.js。

1. <!--
3. public下的index.html 直接引入js文件
5. -->
9. ....
12. <script src="<%= BASE_URL %>jessibuca.js"></script>
18. .....

复制代码

然后,创建视频播放组件 LiveVideoPlay.vue:

1. <script>
2. export default {
3.   name: "LiveVideoPlay",
4.   props: {
5.     // 播放地址
6.     playUrl: {
7.       type: String,
8.       required: true,
9.     },
10.     // 目标domid
11.     id: {
12.       type: String,
13.       required: true,
14.     },
15.   },
16.   data() {
17.     return {
18.       player: null,
19.     };
20.   },
21.   methods: {
22.     // 初始化视频组件
23.     initPlayer() {
24.       if (Jessibuca) {
25.         this.player = new Jessibuca({
26.           container: document.getElementById(this.id), //jessibuca需要容器
27.           videoBuffer: 0.2, // 缓存时长
28.           isResize: false,
29.           loadingText: "疯狂加载中...",
30.           useMSE: true,
31.           useWCS: true,
32.           debug: true,
33.           background: "@/assets/icons/svg/no-video.svg",
34.           supportDblclickFullscreen: true,
35.           showBandwidth: true, // 显示网速
36.           operateBtns: {
37.             fullscreen: true,
38.             screenshot: true,
39.             play: true,
40.             audio: true,
41.           },
42.           forceNoOffscreen: true,
43.           isNotMute: false,
44.           timeout: 10,
45.         });
46.         //console.log("this.player ----- ", this.player, this.playUrl);
47.         this.player.play(this.playUrl);
48.       }
49.     },
50.   },
51.   beforeDestroy() {
52.     // 销毁视频
53.     if (this.player) {
54.       this.player.destroy();
55.       this.player = null;
56.     }
57.   },
58.   mounted() {
59.     this.initPlayer();
60.   },
61. };
62. </script>
63. <template>
64.   <div class="video-player-outer" :id="id"></div>
65. </template>
66. <style>
67. .video-player-outer {
68.   width: 100%;
69.   height: 100%;
70. }
71. </style>

复制代码

最后,父组件中直接引用:

1. // 父组件中直接使用该组件
3. <script>
4. import LiveVideoPlay from "./LiveVideoPlay.vue";
5. export default {
6.     name: '',
7.     components: {
8.         LiveVideoPlay
9.     },
10.     data () {
11.         return {
12.             playUrl1: null,
13.             playUrl2: null,
14.             showV1: false,
15.             showV2: false,
16.         }
17.     },
18.     methods: {
19.         handlePlayVideo(v) {
20.       if (v == 1) {
21.         this.playUrl1 =
22.           "https://xxxxxx/live/02.live.flv";
23.         this.showV1 = true;
24.       } else if (v == 2) {
25.         this.playUrl2 =
26.           "https://xxxxxx/live/02.live.flv";
27.         this.showV2 = true;
28.       }
29.     },
30.     StopPlayVideo(v) {
31.       if (v == 1) {
32.         this.showV1 = false;
33.       } else if (v == 2) {
34.         this.showV2 = false;
35.       }
36.     },
37.     },
38. }
40. </script>
42. <template>
44.     <div class="box">
45.           <div class="video-box-item">
46.             <el-button @click="handlePlayVideo(1)">播放视频1</el-button>
47.             <el-button @click="StopPlayVideo(1)">停止视频1</el-button>
48.             <LiveVideoPlay v-if="showV1" :playUrl="playUrl1" id="v1" />
49.           </div>
51.           <div class="video-box-item">
52.             <el-button @click="handlePlayVideo(2)">播放视频2</el-button>
53.             <el-button @click="StopPlayVideo(2)">停止视频2</el-button>
54.             <LiveVideoPlay v-if="showV2" :playUrl="playUrl2" id="v2" />
55.           </div>
56.     </div>
58. </template>

复制代码

如上,可以试一试本身的播放地点是否可以成功播放视频.如果你的需求不那么高,不考虑延迟,到这里基本就够了,不需要卷下去.
但是,如果你的要求比较高,又不想买jecibuca的收费版本,那么请继续往下看, 有更好的解决方案.

优中选优:

现在这个功能是做出来了,但是视频延迟的问题比较突出.比如,我控制摄像头旋转一下位置,在上述解决方案中,会明显发现摄像头触发旋转进而回传视频明显延迟.那怎么办? 如果你要求不高,那么上边的解决方案足够使用,但是如果要求低延迟,那么就不得不祭出另个大杀器了 - LiveQing.
官网地点: LivePlayer H5播放器 | 青柿视频流媒体服务解决方案
如何使用? vue2中大概分为这几步调(vue3+vite的可以参考官网):
1. 安装 Liveplayer:

1. npm install @liveqing/liveplayer

复制代码

2. 安装 webpack 插件 copy-webpack-plugin

1. npm install copy-webpack-plugin@4.6.0

复制代码

注意: 如果你的版本是vuecli4.0+, 那么以上这个版本就够用了.但是 如果你的vuecli5.0+, 你需要升级这个copywebpack-plugins的版本,比如 copy-webpack-plugin@11.0.0 .亲测有效,一定要注意!!!
3. 配置vue.config.js

1. /**  vue.config.js   */
3. // *****  注意 还是vuecli版本的问题
4. // *****  如果你的vuelci4.0+  就用下边这个配置
6. const CopyWebpackPlugin = require("copy-webpack-plugin");
8. module.exports = {
10.     ...
13.     configureWebpack: (config) => {
14.         config.devtool = "source-map";
15.         config.output.libraryExport =
16.                       "default"; /* 解决import UMD打包文件时, 组件install方法执行报错的问题！！ */
20.         // 增加配置如下  主要是 plugins
22.         const plugins = [
23.           new CopyWebpackPlugin([
24.             {
25.               from: "node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml",
26.             },
27.             {
28.               from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf",
29.             },
30.             {
31.               from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js",
32.               to: "livePlayer/",
33.             },
34.       ]),
35.     ];
36.         config.plugins.push(...plugins);
38.       
39.     }
40.   },
43.     ...
45. }
48. // *****  如果你的vuelci5.0+  就用下边这个配置
50. const CopyWebpackPlugin = require("copy-webpack-plugin");
53. module.exports = {
56.     .....
59.     chainWebpack(config) {
60.         
61.         // 增加插件
62.         
63.         config.plugin('copy').use(CopyWebpackPlugin, [
65.            {
66.                  patterns: [
67.             {
68.               from: "node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml",
69.             },
70.             {
71.               from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf",
72.             },
73.             {
74.               from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js",
75.               to: "livePlayer/",
76.             },
77.       ]
78.             }
79.         ])
81.         
82.     }
83.    
86. }

复制代码

4. public中的index.html中引入js文件

5. 封装播放视频组件

1. <template>
2.   <LivePlayer
3.     class="component-wrapper video-panel"
4.     :class="{ fullscreen: flag }"
5.     :videoUrl="options.url"
6.     :videoTitle="options.title"
7.     :poster="options.poster"
8.     :controls="options.controls"
9.     :autoplay="options.autoplay"
10.     :live="options.live"
11.     :hide-snapshot-button="options.hideSnapshot"
12.     :muted="options.muted"
13.     :fluent="options.fluent"
14.     :stretch="options.stretch"
15.     :aspect="options.aspect"
16.     :loading="options.loading"
17.     :hide-big-play-button="options.hideBigPlay"
18.     @fullscreen="onFullscreen"
19.   >
20.     <slot></slot>
21.   </LivePlayer>
22. </template>
24. <script>
25. import LivePlayer from "@liveqing/liveplayer";
27. export default {
28.   name: "LiveVideoRtcPlayer",
29.   components: {
30.     LivePlayer,
31.   },
32.   props: {
33.     params: {
34.       type: String,
35.     },
36.   },
37.   data() {
38.     return {
39.       flag: false,
40.     };
41.   },
42.   computed: {
43.     options() {
44.       return {
45.         // 播放地址
46.         url: this.params,
47.         // 视频标题
48.         title: "",
49.         // 视频封面图片
50.         poster: "",
51.         // 播放器控制栏
52.         controls: true,
53.         // 隐藏截图
54.         hideSnapshot: true,
55.         // 是否直播
56.         live: true,
57.         // 是否自动播放
58.         autoplay: true,
59.         // 是否静音
60.         muted: true,
61.         // 流畅模式
62.         fluent: true,
63.         // 是否拉伸
64.         stretch: true,
65.         // 全屏 - 适应div
66.         aspect: "fullscreen",
67.         // 指示加载状态
68.         loading: true,
69.         // 隐藏起播状态下的大播放按钮
70.         hideBigPlay: true,
71.       };
72.     },
73.   },
74.   created() {
75.     console.log("配置 ----- ", this.options);
76.   },
77.   beforeDestroy() {
78.     if (this.options) {
79.       this.options.url = "";
80.     }
81.     this.onExitFullscreen();
82.   },
83.   methods: {
84.     onExitFullscreen() {
85.       this.flag = false;
86.     },
87.     onFullscreen(status) {
88.       this.flag = status;
89.       if (!status) {
90.         this.onExitFullscreen();
91.         return;
92.       }
93.     },
94.   },
95. };
96. </script>
98. <style lang="scss" scoped>
99. .component-wrapper.video-panel {
100.   position: relative;
101.   width: 100%;
102.   height: 100%;
104.   .video-wrapper .video-js {
105.     background-color: rgba(32, 46, 71, 0.6);
107.     .video-title {
108.       top: 4px;
109.       right: unset;
110.       left: 4px;
111.       padding: 4px 6px;
112.       max-width: 80%;
113.       font-size: 16px;
114.     }
116.     .video-control {
117.       position: absolute;
118.       top: 100%;
119.       left: 50%;
120.       transform: translate(-50%, -140%);
121.       margin-top: 0;
122.     }
123.   }
125.   &.fullscreen .video-wrapper .video-js {
126.     .video-title {
127.       top: 60px;
128.       right: unset;
129.       left: 20px;
130.       padding: 5px 8px 6px;
131.       background: rgba(4, 16, 37, 0.6);
132.       border-radius: 4px;
133.     }
134.   }
135. }
136. </style>

复制代码

6. 父组件中引用播放组件

1. <template>
2.   <div id="app">
3.     <!-- 视频 -->
4.     <div class="video-box">
5.       <el-button @click="handlePlayVideo(1)">播放视频1</el-button>
6.       <el-button @click="StopPlayVideo(1)">停止视频1</el-button>
7.       <div class="video-box-item">
8.         <LiveVideoRtcPlayer v-if="showV1" :params="playUrl1" id="v1" />
9.       </div>
10.       <el-button @click="handlePlayVideo(2)">播放视频2</el-button>
11.       <el-button @click="StopPlayVideo(2)">停止视频2</el-button>
12.       <div class="video-box-item">
13.         <LiveVideoRtcPlayer v-if="showV2" :params="playUrl2" id="v2" />
14.       </div>
15.     </div>
16.   </div>
17. </template>
19. <script>
20. //import Child from "./Child.vue";
21. //import LiveVideoPlay from "./LiveVideoPlay.vue";
22. import LiveVideoRtcPlayer from "./LiveVideoRtcPlayer.vue";
23. export default {
24.   name: "App",
25.   components: {
26.     //LiveVideoPlay,
27.     LiveVideoRtcPlayer,
28.   },
29.   data() {
30.     return {
31.       playUrl1: null,
32.       playUrl2: null,
33.       showV1: false,
34.       showV2: false,
35.     };
36.   },
37.   methods: {
38.     handlePlayVideo(v) {
39.       if (v == 1) {
40.         // this.playUrl1 =
41.         //   "https://xxxxxxxxxxxx/live/02.live.flv";
42.         this.playUrl1 =
43.           "webrtcs://xxxxxxxxxxxxx/live/index/api";
44.         this.showV1 = true;
45.       } else if (v == 2) {
46.         this.playUrl2 = 'xxxxx 播放地址';
47.         this.showV2 = true;
48.       }
49.     },
50.     StopPlayVideo(v) {
51.       if (v == 1) {
52.         this.showV1 = false;
53.       } else if (v == 2) {
54.         this.showV2 = false;
55.       }
56.     },
57.   },
58. };
59. </script>
61. <style lang="scss" scoped>
62. #app {
63.   height: 100%;
64. }
66. #app ::v-deep .box {
67.   font-size: 30px;
68. }
70. .video-box {
71.   width: 100%;
72.   height: 600px;
73.   overflow: hidden;
75.   &-item {
76.     width: 300px;
77.     height: 400px;
78.     float: left;
79.     overflow: hidden;
80.     background-color: #f1f2f3;
81.     margin-left: 50px;
82.     position: relative;
83.   }
84. }
85. </style>
86. <style lang="scss"></style>

复制代码

测试一下,nice.
累了,就这样吧.

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。