flv.js实现直播功能

最近开发中遇到一个网页需要连接监控查看的功能，要求播放实时播放.flv文件，我通过查找找到的两个可以使用的插件video.js和flv.js,flv.js是当前b站正在使用的插件基于JavaScript开发h5插件。

好了，我们继续开始操作吧！首先我从github下flv里clone下文件

附上链接https://github.com/bilibili/flv.js.git

然后我们进行构建代码

npm install

使用npm或cnpm都可以，构建好了我们发现多出node_modules文件，接着我们安装安装生成工具：

npm install -g gulp

生成工具完成后进行打包压缩

gulp release

在打包时我遇到了一个问题

const { Math, Object } = primordials;

它这段代码报错了。。。，它竟然报错了。。

然后在网上找到原因是因为node的版本不对。。。我用的是v12.3.1版本，而它需要v10.X.X版本，所以我使用gnvm进行下载v10.1.0版本，gnvm是node的版本管理工具可以了解一下

然后我们在执行gulp release,发现没问题，打开文件目录，就发现dist文件夹，里面有flv.js和flv.min.js文件，我取得是flv.min.js文件，当然里面有播放视频的demo可以参考下。在这里我附上我的代码,playurl是flv文件地址

<video id="videoElement" class="centeredVideo" controls autoplay>Your browser is too old which doesn't support HTML5 video.
</video>

/*新加*/
getvideoinfo(fIp){// 获取视频流let _this = thisgetvideoinfo({fIp:fIp}).then(res => {_this.getvideoheartbeat(fIp)  //心跳_this.playurl = res.data.data  //地址_this.flv_load(res.data.data) //调用_this.correctvideo()  //实时更新 ,也可以修改下放心跳里})
},
getvideoheartbeat(fIp){//video心跳let _this = thisgetvideoheartbeat({fIp:fIp})var currenttime = Math.floor(document.getElementsByClassName('centeredVideo'+_this.videoid) [0].currentTime);// 每5秒请求一次_this.closeTimeout = window.setTimeout(() => {_this.getvideoheartbeat(fIp)}, 5000);
},
/*新加*/flv_load(playurl) {var _this = thisif (flvjs.isSupported()) {_this.videoElement = document.getElementById('videoElement');_this.flvPlayer = flvjs.createPlayer({type: 'flv',url: playurl,isLive: true,cors: true,enableWorker: true,enableStashBuffer: false,stashInitialSize: 128,autoCleanupSourceBuffer:true});_this.flvPlayer.attachMediaElement(_this.videoElement);_this.flvPlayer.load();_this.flvPlayer.play();}
},
cancelplay() {var _this = this_this.flvPlayer.pause();_this.flvPlayer.unload();_this.flvPlayer.detachMediaElement();_this.flvPlayer.destroy();_this.flvPlayer = null;
},

矫正实时播放,稍微改了下,不一定对,原理是读取视频预存,当当前进度和预存最新时间相差大于0.15时,快进当前时间,每隔10秒执行一次

correctvideo(){var _this = this// 矫正实时播放速度if (_this.videoElement) {let buffered = _this.videoElement.bufferedif (buffered.length > 0) {let end = buffered.end(0)if (end - _this.videoElement.currentTime > 0.15) {_this.videoElement.currentTime = end - 1// console.log('changecurrentTime'+_this.videoElement.currentTime);}}}_this.tocorrectvideo= window.setTimeout(() => {_this.correctvideo()}, 100000);},

希望对你们有用！

flv.js实现直播功能相关推荐

如何使用 flv.js 做直播
为什么要在这个时候探索flv.js做直播呢?原因在于各大浏览器厂商已经默认禁用Flash,之前常见的Flash直播方案需要用户同意使用Flash后才可以正常使用直播功能,这样的用户体验很致命. 在介绍 ...
flv.js解决直播流延迟、断流重连以及画面卡死
视频流延迟在普通的网络环境下,flv.js播放http-flv的视频流延迟大概在3~5秒左右,对于实时性要求比较高的场景,显然是不适用的,那么怎么才能降低延迟呢? 通过对buffered(缓冲区末尾 ...
flv.js优化直播时延
在 flv.js 中,要降低时延可以通过调整以下几个参数来实现: lazyLoad :该参数决定是否使用懒加载模式,默认为 true,开启懒加载模式会延迟视频的加载时间,从而降低时延.您可以将其设为 ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
html播放flv直播源,使用flv.js与video.js实现播放视频直播(简教程)
1.准备 (￣▽￣)/ 以上软件请大家自行解压或安装 2.环境配置首先运行livego 运行livego效果安装与运行OBS 打开设置配置流服务器配置连接配置连接连接成功后livego会有 ...
html播放flv直播源,如何使用flv.js直播（pc端）？
1.如何使用flv.js做直播(PC端)?网上的例子,包括官方上传到git上的都试过了,就是不能播出来. 2.这是我的demo flv.js demo Stream URL: Switch to Me ...
Flv.js全面解析
Flv.js全面解析常见直播协议 Flv.js概览 Flv.js结构图架构图功能 API文档相关 MediaDataSource的字段列表如下, Config flvjs.getFeatureL ...
flv.js 插件完成 flv 格式的视频播放
记录--- api中文文档: flv.js 中文API文档 - 简书参考文章:全网最详细!vue中使用flv.js 播放直播监控视频流_vue使用flv.js_抄一下你代码的博客-CSDN博客问题 ...
Car-eye-http-flv-module 实现nginx-rtmp-mudule HTTP方式的FLV直播功能
nginx-rtmp-mudule RTMP 是一款优秀的Car-eye-http-flv-module 是在nginx-rtmp-mudule RTMP基础上修改的流媒体服务器,除了支持flash播 ...

flv.js实现直播功能

flv.js实现直播功能相关推荐

最新文章

热门文章