Electron播放 RTMP流实现

在基于vuecli3 与electron的框架内部，实现rtmp流的播放，为什么要写这篇文章，因为的确实现起来踩了很多坑，并没有像web那样导入videoJS 就能完成的，闲话不说，上代码：

第一个坑：
需要用到的库
vue-video-player
videojs-flash
注意：上面这个两个库一定要用npm安装。我试过，其他方式安装完成之后会这个错误：the flash tech is undefined ，如果你遇到这个错误，一定先npm uninstall vue-video-player ,再重新安装一次即可。

第二个坑
播放rtmp需要flash的支持，Electron的实现需要代码加载flash的dll文件来获得支持，Electron的app类中有个getPath 方法，执行以下代码能获取本机的flash文件路径：
app.getPath(‘pepperFlashSystemPlugin’)
我的跑起来获取的地址是：C:WINDOWSsystem32MacromedFlashpepflashplayer64_32_0_0_414.dll
所以让electron支持flash代码：

app.commandLine.appendSwitch('ppapi-flash-path', app.getPath('pepperFlashSystemPlugin'));

当然最好的方案是能够把dll文件直接打包到项目里面跟着项目一起走，通过在vue.config.js中添加以下代码实现

 pluginOptions: {electronBuilder: {builderOptions: {...win: {target: 'nsis',icon: './public/app.ico',extraResources: [{"from": "resources/","to": "./",}]}}}}

把dll文件copy到resources文件夹下（根目录与vue.config.js同级）然后修改文件加载路径：

let plugins = ‘’
if( process.arch == ‘x64’ ){
plugins =process.env.WEBPACK_DEV_SERVER_URL? path.join(__dirname,../resources/pepflashplayer64_32_0_0_238.dll) :path.join(__dirname,../pepflashplayer64_32_0_0_238.dll)
}else{
plugins =process.env.WEBPACK_DEV_SERVER_URL? path.join(__dirname,../resources/pepflashplayer32_29_0_0_238.dll) :path.join(__dirname,../pepflashplayer32_29_0_0_238.dll)
}
app.commandLine.appendSwitch(‘ppapi-flash-path’, plugins)
第三个坑
以上的东西搞完基本可以实现播放了，但是打包之后发现不可以，看现象像是加载不出flash，解决方案就是在启动 Electron 主进程的时候，启动一个本地 express 服务器，配置一下静态文件地址，然后渲染进程通过这个服务器拿到页面，在然后就可以启动 flash 了。
上代码：

'use strict'import { app, BrowserWindow,ipcMain } from 'electron'import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let winimport express from 'express'const net = require('net');function portInUse(port){return new Promise((resolve, reject)=>{let server = net.createServer().listen(port);server.on('listening',function(){server.close();resolve(port);});server.on('error',function(err){if(err.code == 'EADDRINUSE'){port++;reject(err);}});        });
}const tryUsePort = function(port,_portAvailableCallback){portInUse(port).then((port)=>{_portAvailableCallback(port);}).catch((err)=>{port++;tryUsePort(port,_portAvailableCallback);})
}tryUsePort(9080,function(port){console.log(port+" ====端口："+port+"可用====\n");//解决flash本地file不安全问题if (process.env.NODE_ENV === "production") {let server = express();server.use(express.static(__dirname));server.listen(port);}const winURL =`http://localhost:${port}/index.html`console.log(winURL)const path = require('path')let plugins = ''if( process.arch == 'x64' ){plugins =process.env.WEBPACK_DEV_SERVER_URL? path.join(__dirname,`../resources/pepflashplayer64_32_0_0_238.dll`) :path.join(__dirname,`../pepflashplayer64_32_0_0_238.dll`)}else{// plugins =process.env.WEBPACK_DEV_SERVER_URL? path.join(__dirname,`../resources/pepflashplayer32_29_0_0_238.dll`) :path.join(__dirname,`../pepflashplayer32_29_0_0_238.dll`)plugins =app.getPath('pepperFlashSystemPlugin') }app.commandLine.appendSwitch('ppapi-flash-path', plugins)function createWindow() {// Create the browser window.win = new BrowserWindow({width: 1000,height: 580,webPreferences: {nodeIntegration: true,plugins: true,webSecurity: false //取消跨域},autoHideMenuBar:true,maximizable: false,resizable: false,frame: false,})if (process.env.WEBPACK_DEV_SERVER_URL) {win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
win.webContents.openDevTools()} else {createProtocol('app')win.loadURL(winURL)}win.webContents.openDevTools({ mode: 'detach' })win.on('closed', () => {win = null})}// Quit when all windows are closed.app.on('window-all-closed', () => {// On macOS it is common for applications and their menu bar// to stay active until the user quits explicitly with Cmd + Qif (process.platform !== 'darwin') {app.quit()}})app.on('activate', () => {// On macOS it's common to re-create a window in the app when the// dock icon is clicked and there are no other windows open.if (win === null) {createWindow()}})// This method will be called when Electron has finished// initialization and is ready to create browser windows.// Some APIs can only be used after this event occurs.app.on('ready', async () => {// if (isDevelopment && !process.env.IS_TEST) {//   // Install Vue Devtools//   try {//     await installExtension(VUEJS_DEVTOOLS)//   } catch (e) {//     console.error('Vue Devtools failed to install:', e.toString())//   }// }createWindow()})

以上就是部分代码能看清楚处理逻辑，

第四个坑
port占用，通过net对象写一个递归加一点判断获取当前可用端口，代码如上

第五个坑
到现在你觉得完事大吉了，但是只能开心一会会，在某些情况下还是会出现flash加载崩溃问题，这个时候你就要核对下你的flash 版本问题，我试过 30以上都不行29可以，推荐这个版本：pepflashplayer64_29_0_0_140.dll
pepflashplayer32_29_0_0_140.dll

备注：我的上述代码只是兼容了64位的电脑，如果需要兼容32位电脑自行加点判断即可
这里分享一下pepflashplayer64_29_0_0_140.dll下载链接
链接：https://pan.baidu.com/s/115mvGdpkxGro0yxp5eOhuw
提取码：1234

Electron播放 RTMP流实现相关推荐

直播视频流 html,html 播放rtmp流视频
最近项目上需要将视频在web上能够预览. 起初用到了VLC插件.但是该插件有个弊端让人很蛋疼.因为谷歌37版以后及其火狐等主流浏览器很多不支持.除此之外即使支持,也要另外下载一个vlc客户端安装好了. ...
videojs集成--播放rtmp流
要是播不了的话,可以看下这篇文章.http://blog.csdn.net/cmqwan/article/details/76059703 之前说到已经把流推送过来了,这时候就可以使用videojs来 ...
PC端播放RTMP流(手机端无法播放)
这是之前从网上搜到的资料保存下来,已经忘记是哪位大神的了望见谅! 当前手机端不支持RTMP和RTSP 需要自己做播放器才可以进行支持有效的RTMP直播源:(亲测可用!) rtmp://live.h ...
使用video.js播放rtmp流时报错FLASH: NetStream.Play.Failed
1.选用X5版本video.js,因为X6及以上版本不支持rtmp的播放 2.指定video-js.swf文件路径 videojs.options.flash.swf = "lib/vide ...
直播视频流+html,前端页面播放 rtmp 流与 flv 格式视频文件
技术 :angular/cli , html5 , typescript , scss ,es 6 ... 项目类型:直播视频与视频回放使用到插件 : videojs + ckplayer 遇到的 ...
如何在IE浏览器播放RTSP或RTMP流
好多开发者一直苦恼于如何在IE浏览器环境下,构建低延迟的RTSP或RTMP播放,对于RTSP流来说,好多公司通常的做法是把RTSP转RTMP,然后分发到RTMP服务器,然后服务器转http-flv出来 ...
h5 rtmp推荐控件_H5播放Rtmp之videojs播放
一.简介我们看到了HLS播放视频实时性非常差,好的在6-7s,差点的就要10-12s了,也就是人走了,估计视频上还能看到,这对观感效果造成了很大的影响!但是好处就是它是基于http协议文件下载的,所 ...
Android 直播RTMP流
原文链接 : How To Stream RTMP live in Android 原文作者 : Mohit Gupt 译文出自 : 开发技术前线 www.devtf.cn 译者 : ayyb1988 ...
Vue项目中播放直播流
直播流播放协议视频直播服务支出输出RTMP.FLV.HLS三种协议阿里云视频直播 RTMP(Real Time Message Protocol:实时消息传输协议)延时低(1s~3s),TCP长连 ...
windows下live555+rtsp+ffmpeg媒体源，nginx+rtmp转发服务器，vlc播放rtmp媒体流
1.下载live555+ffmpeg视频文件作为媒体源将视频文件me-like-yuh.ts和ffmpeg推流脚本ffmpeg-rtsp2rtmp.bat放在mediaserver目录下 ffmpe ...

Electron播放 RTMP流实现

Electron播放 RTMP流实现相关推荐

最新文章

热门文章

Electron播放 RTMP流 实现

Electron播放 RTMP流 实现相关推荐

最新文章

热门文章

Electron播放 RTMP流实现

Electron播放 RTMP流实现相关推荐