Electron播放rtmp直播流

方法一 直接转flv吧

方法二 使用flash

示例代码

如果直接前端放rtmp直播流, 则需要有flash, 而Chrome已经不再支持flash了, 所以得借助flash插件

1659969197107.png

从Electron最新文档可以看到, 最新版Electron不再支持flash插件了, 所以得从修改日志里, 看看最后支持的是那个版本的Electron

image.png

可以看到是Electron12, 所以直接安Electron11即可

步骤

1. 搭环境

使用 vue-cli5 + vue-cli-plugin-electron-builder搭建, 具体看插件文档

播放器使用vue-video-player组件和videojs-flash插件

注意:vue-video-player组件和videojs-flash插件都用到了video.js库, 但是直接安装会导致两个版本冲突(报错ERROR: The "flash" tech is undefined. Skipped browser support check for that tech.), 所以需要对两个库的video.js的依赖进行版本统一
package.json 文件里的resolutions 字段用于解析选择性版本，可以通过此功能自定义依赖版本

 "resolutions": {
    "video.js": "^7.10.0"
  },

参考资料: https://github.com/surmon-china/vue-video-player/issues/221

2. 引入flash插件

方法也可以在网上找老版本的Electron文档

① 先是搞到flash插件文件, 我的示例里有, 或者去flash网站下PPAPI版的, 然后在安装的目录下找到对应的dll文件即可

image.png

② 然后在主进程引入插件
要注意开发环境和打包环境的路径是不一样的, 所以需要在vue.config.js中配置把插件文件打包到安装目录

 extraResources: {
  from: 'libs/',
  to: './',
},

然后再引用的时候要进行判断, 如果有64和32位的dll, 也可以判断下

const path = require('path')
  let dllName = 'pepflashplayer64_29_0_0_238.dll'
  if (process.arch === 'ia32') {
    dllName = 'pepflashplayer32_29_0_0_238.dll'
  }

  let libPath = path.resolve(`libs/flash/${dllName}`)
  if (process.env.NODE_ENV !== 'development') {
    libPath = path.resolve(`resources/flash/${dllName}`)
  }
  app.commandLine.appendSwitch('ppapi-flash-path', libPath)

3. 配置播放器

可以通过navigator.plugins来看flash插件有没有引入成功

image.png

然后引入组件, 配置直播流即可

4. 缺点

① 可能今天用正常, 明天就提示版本过低

53e080061ff004ec558e43f80abd24d.jpg

② 使用最新版本还会提示异常

image.png

③ 打包后 页面必须得通过服务开启, 不能用file:方式