rtsp客户端c语言,客户端RTSP视频播放实现方案

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);

}

}

);复制代码