前端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。
....
.....
然后,创建视频播放组件 LiveVideoPlay.vue:
.video-player-outer {
width: 100%;
height: 100%;
}
最后,父组件中直接引用:
// 父组件中直接使用该组件
播放视频1
停止视频1
播放视频2
停止视频2
如上,可以试一试自己的播放地址是否可以成功播放视频.如果你的需求不那么高,不考虑延迟,到这里基本就够了,不需要卷下去.
但是,如果你的要求比较高,又不想买jecibuca的收费版本,那么请继续往下看, 有更好的解决方案.
优中选优:
现在这个功能是做出来了,但是视频延迟的问题比较突出.比如,我控制摄像头旋转一下位置,在上述解决方案中,会明显发现摄像头触发旋转进而回传视频明显延迟.那怎么办? 如果你要求不高,那么上边的解决方案足够使用,但是如果要求低延迟,那么就不得不祭出另个大杀器了 – LiveQing.
官网地址: LivePlayer H5播放器 | 青柿视频流媒体服务解决方案
如何使用? vue2中大概分为这几步骤(vue3+vite的可以参考官网):
1. 安装 Liveplayer:
npm install @liveqing/liveplayer
2. 安装 webpack 插件 copy-webpack-plugin
npm install copy-webpack-plugin@4.6.0
注意: 如果你的版本是vuecli4.0+, 那么以上这个版本就够用了.但是 如果你的vuecli5.0+, 你需要升级这个copywebpack-plugins的版本,比如 copy-webpack-plugin@11.0.0 .亲测有效,一定要注意!!!
3. 配置vue.config.js
/** vue.config.js */
// ***** 注意 还是vuecli版本的问题
// ***** 如果你的vuelci4.0+ 就用下边这个配置
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
...
configureWebpack: (config) => {
config.devtool = "source-map";
config.output.libraryExport =
"default"; /* 解决import UMD打包文件时, 组件install方法执行报错的问题!! */
// 增加配置如下 主要是 plugins
const plugins = [
new CopyWebpackPlugin([
{
from: "node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml",
},
{
from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf",
},
{
from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js",
to: "livePlayer/",
},
]),
];
config.plugins.push(...plugins);
}
},
...
}
// ***** 如果你的vuelci5.0+ 就用下边这个配置
const CopyWebpackPlugin = require("copy-webpack-plugin");
module.exports = {
.....
chainWebpack(config) {
// 增加插件
config.plugin('copy').use(CopyWebpackPlugin, [
{
patterns: [
{
from: "node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml",
},
{
from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf",
},
{
from: "node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js",
to: "livePlayer/",
},
]
}
])
}
}
4. public中的index.html中引入js文件
5. 封装播放视频组件
.component-wrapper.video-panel {
position: relative;
width: 100%;
height: 100%;
.video-wrapper .video-js {
background-color: rgba(32, 46, 71, 0.6);
.video-title {
top: 4px;
right: unset;
left: 4px;
padding: 4px 6px;
max-width: 80%;
font-size: 16px;
}
.video-control {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -140%);
margin-top: 0;
}
}
&.fullscreen .video-wrapper .video-js {
.video-title {
top: 60px;
right: unset;
left: 20px;
padding: 5px 8px 6px;
background: rgba(4, 16, 37, 0.6);
border-radius: 4px;
}
}
}
6. 父组件中引用播放组件
播放视频1
停止视频1
播放视频2
停止视频2
#app {
height: 100%;
}
#app ::v-deep .box {
font-size: 30px;
}
.video-box {
width: 100%;
height: 600px;
overflow: hidden;
&-item {
width: 300px;
height: 400px;
float: left;
overflow: hidden;
background-color: #f1f2f3;
margin-left: 50px;
position: relative;
}
}
测试一下,nice.
累了,就这样吧.