Vue is packaged as a desktop application to achieve RTSP streaming video playback

1. Install dependencies

  • Package desktop application dependencies

npm install electron electron-packager --save-dev

  • Mpv. js plugin, based on the source code developed under the React framework, the development environment needs to install the React dependency
npm install mpv.js --save
npm install react react-dom --save-dev
Copy the code

Because mpv.js is error-prone to application build, it can only be run in a development environment without installation dependency

2. Write packaging code

  • Run the index.js file, which mpv.js source can be picked out
Const electron = require('electron') const path = require('path') const app = electron.app /** mpv.js 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}`; } /** 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() })Copy the code
  • Preload. Js file
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])
    }
})
Copy the code

3. Page code

  • Js call method
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); }});Copy the code

Shell client integrates MPV function

  • Demo address: github.com/hongqiang12…

reference

  • Mpv.js address: github.com/Kagami/mpv….