Web直播之RTMP协议：vue-video-player + videojs-flash

视频直播服务目前支持3种直播协议：RTMP、HLS、HTTP-FLV。
本文主要讲解在 Vue 项目中如何使用 vue-video-player 播放器播放 rtmp 流。

1.准备工作

cnpm install --save vue-video-player
cnpm install --save videojs-flash
cnpm install --save videojs-swf

2.代码实战

3.解决问题

Q1: 控制台报错 The "flash" tech is undefined. Skipped browser support check for that tech.

方案1(无效)：删除 node_modules，再用 npm 安装；
方案2(有效)：查看 vue-video-player 和 videojs-flash 的 package.json，发现这2个插件最新版引入的 video.js 版本没有严格统一，怀疑和插件版本有关，故进行版本降级，如下：

"dependencies": {
  "vue-video-player": "5.0.1", 
  "videojs-flash": "2.1.0"
}

方案3(未验证)：以下解决方案来自 vue-video-player issues#221

根本原因是 videojs 和 videojs-flash 里的各有一个 video.js，如果两个版本不一样可能就会报错了，终极解决方案就是配置第三方模块的查找顺序，优先查找本身安装的videojs 就可以了。

// webpack.config.js
resolve: {
   modules: [path.resolve('node_modules'), 'node_modules'],
    ...
}

Q2: 控制台报错 Cross-origin plugin content from https://vjs.zencdn.net/swf/5.4.1/video-js.swf must have a visible size larger than 400 x 300 pixels, or it will be blocked. Invisible content is always blocked.

当直播视频设置了 autoplay: true，并且宽高小于400x300，例如直播墙的需求，这时便出现如上报错。
2个关键点：1.跨源插件 2.大于400x300，解决其一便能自动播放。视频窗口大小取决于需求，不可控制。针对跨源插件，需要安装上述版本的videojs-swf插件，import即可。
注：引入 [email protected] 的插件，需要在 vue.config.js 中加入 chainwebpack 配置，否则项目运行会报错：无法找到相关 loader

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('swf')
      .test(/\.swf$/)
      .use('url-loader')
      .loader('url-loader')
      .options({
        limit: 10000
      })
  }
}

参考文档

• vue-video-player
• videojs-flash
• WEB直播技术入门及在 Vue 中应用 video.js
• vue-video-player 实现实时视频播放（监控设备-rtmp流）