Electron播放rtmp直播流

治电小白菜

发布于 2022-09-21 08:24:58

4.9K0

发布于 2022-09-21 08:24:58

文章被收录于专栏：技术综合技术综合

方法一直接转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

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

<template>
  <div class="container">
    <video-player
      class="video-player"
      ref="videoPlayer"
      :options="options"
      :playsinline="true"
    ></video-player>
  </div>
</template>
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
import 'videojs-flash'
export default {
  name: 'App',
  components: {
    videoPlayer,
  },
  data() {
    return {
      options: {
        autoplay: true,
        controls: false,
        preload: 'none',
        muted: false,
        // aspectRatio: '16:9',
        language: 'zh-CN',
        sources: [{
          type: 'rtmp/mp4',
          src: 'rtmp://127.0.0.1/live/test',
        }],
        techOrder: ['flash', 'html5'],
        poster: '',
        notSupportedMessage: '服务错误', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      isMini: false,
    }
  },
}
</script>
<style>
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
body {
  -webkit-app-region: drag;
}
.container {
  background: transparent;
}
.container,
.video-player,
.video-js {
  width: 100%;
  height:100%;
}
</style>