客戶端RTSP視頻播放實現方案

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);
        }
    }
);複製代碼