vue打包成桌面应用实现rtsp流视频播放的方式过程
1.安装相关依赖打包桌面程序的依赖
npm install electron electron-packager --save-devmpv.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
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 .
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);
}
}
);复制代码