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文件地址

flv_load(playurl) {
    var _this = this
    if (flvjs.isSupported()) {
      var 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(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;
},

 

希望对你们有用!

 

 

 

 

 

 

你可能感兴趣的:(vue,js)