vue打包成桌面应用实现rtsp流视频播放的方式过程

1.安装相关依赖

• 打包桌面程序的依赖

npm install electron electron-packager --save-dev

• mpv.js插件, 基于react框架下开发的源码，开发环境需要安装react依赖

npm install mpv.js --save
npm install react react-dom --save-dev

由于mpv.js对应用程序构建会出错不采用安装依赖去使用, 只能运行在开发环境

2.编写打包程序代码

• 运行的index.js文件, 其中mpv.js源码可以摘出来

const electron = require('electron')
const path = require('path')
const app = electron.app

/** mpv.js源码开始 */
const PLUGIN_MIME_TYPE = "application/x-mpvjs";

function containsNonASCII(str) {
    for (let i = 0; i < str.length; i++) {
      if (str.charCodeAt(i) > 255) {
        return true;
      }
    }
    return false;
}

function getPluginEntry(pluginDir, pluginName = "mpvjs.node") {
    const fullPluginPath = path.join(pluginDir, pluginName);
    let pluginPath = path.relative(process.cwd(), fullPluginPath);
    if (path.dirname(pluginPath) === ".") {
      if (process.platform === "linux") {
        pluginPath = `.${path.sep}${pluginPath}`;
      }
    } else {
      if (process.platform === "win32") {
        pluginPath = fullPluginPath;
      }
    }
    if (containsNonASCII(pluginPath)) {
      if (containsNonASCII(fullPluginPath)) {
        throw new Error("Non-ASCII plugin path is not supported");
      } else {
        pluginPath = fullPluginPath;
      }
    }
    return `${pluginPath};${PLUGIN_MIME_TYPE}`;
}
/** mpv.js源码结束 */

const pluginDir = path.join(__dirname, "Release");
if (process.platform !== "linux") {process.chdir(pluginDir);}
app.commandLine.appendSwitch("no-sandbox");
app.commandLine.appendSwitch("ignore-gpu-blacklist");
app.commandLine.appendSwitch("register-pepper-plugins", getPluginEntry(pluginDir));


const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷键
let mainWindow
const Menu = electron.Menu

function createWindow () {
    Menu.setApplicationMenu(null)

    mainWindow = new BrowserWindow({
        width: 1280,
        height: 720,
        webPreferences: {
            plugins: true,
            preload: path.join(__dirname, 'preload.js')
        }
    })

    mainWindow.loadFile('./example/index.html')

    mainWindow.on('closed', function () {
        mainWindow = null
    })

    globalShortcut.register('CommandOrControl+Shift+L', () => {
        let focusWin = BrowserWindow.getFocusedWindow()
        focusWin && focusWin.toggleDevTools()
    })
}

app.on('ready', createWindow)

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})

app.on('activate', function () {
    if (mainWindow === null) createWindow()
})

• preload.js文件

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }

    for (const type of ['chrome', 'node', 'electron']) {
      replaceText(`${type}-version`, process.versions[type])
    }
})

3.页面代码

• js调用方式

var video1 = "demo1.mp4";
var video2 = "demo2.mp4";

var embed = document.createElement("embed");
embed.setAttribute("style", "");
embed.style.width = "100%";
embed.style.height = "100%";
embed.style.position = "absolute";
embed.style.top = 0;
embed.style.left = 0;
document.body.append(embed);

var mpv = new MPV(
    embed,
    {
        hwdec: true,
        src: "",
        loop: false, // if set 'true'. !!! no events <pause，ended>.
        volume: 100, // 0 ~ 100
        autoplay: true,
    },
    function (e) {
        if (e.name == "ready") {
            console.info("mpv ready.");
            // ...
            mpv.loadfile(video1, true);
        } else if (e.name == "play") {
            console.info("play.");
        } else if (e.name == "duration") {
            console.info("duration is ", e.value);
        } else if (e.name == "progress") {
            // console.info("progress >>> ", e.value);
        } else if (e.name == "pause") {
            console.info("pause.");
        } else if (e.name == "ended") {
            console.info("ended.");
            mpv.loadfile(video2, true);
        }
    }
);

空壳客户端集成mpv功能

• demo地址：https://github.com/hongqiang12/rtsp-electron-shell

参考文献

• mpv.js地址：https://github.com/Kagami/mpv.js