1>.文件结构:
2>.代码
1. ./package.json
{
"name": "rtspshow",
"version": "1.0.0",
"description": "rtsp在Web页面播放",
"main": "main.js",
"scripts": {
"start": "chcp 65001 && electron main.js",
"fix": "electron-fix start",
"rebuild": "cd ./node_modules/.bin && electron-rebuild --force --module-dir=../../",
"build": "electron-packager ./ demoapp --win --arch=x64 --out ../outputs --electron-zip-dir=../electron-zip --icon=logo.ico --overwrite --extra-resource=./resources/bin/"
},
"author": "jyb",
"license": "ISC",
"devDependencies": {
"electron": "^13.1.7",
"electron-packager": "^15.3.0"
},
"dependencies": {
"child_process": "^1.0.2",
"ffi-napi": "^4.0.3",
"fluent-ffmpeg": "^2.1.2",
"http-server": "^0.12.3",
"iconv-lite": "^0.6.3",
"ref-array-di": "^1.2.2",
"ws": "^7.5.3"
},
"build": {
"appId": "demoapp",
"win": "./logo.ico",
"extraResources": [
{
"from": "./resources/bin",
"to": "./bin"
}
]
}
}
2. ./main.js
const {app,electron,BrowserWindow} = require('electron')
const path = require('path')
var websockcommand = [];
function createWindow () {
//创建新窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 740,
autoHideMenuBar:true,//可以使用户在打开软件时隐藏菜单栏,但是如果用户按下alt按键,菜单栏又会弹出来
webPreferences: {
//解决electron require未定义,以下两项
//是否注入nodeapi
nodeIntegration: true,//nodeIntegration设为false页面就不能使用nodejs和Electron APIs
contextIsolation: false,
//渲染进程是否启用remote模块
enableRemoteModule: true,//在渲染进程中使用主进程中的模块方法时,可以使用Electron Remote解决在渲染和主进程间的通讯,这么看 remote 模块可以说是非常好用啦,渲染进程就不用显式通过 ipcRenderer / ipcMain 与主进程通信。除此之外,可以通过 remote.getGlobal 获取主进程中 的全局变量, 通过 remote.process 拿到主进程的 process 对象信息
preload: path.join(__dirname, 'preload.js')
}
})
//全局数据
global.constantObject = {
winname:mainWindow
};
//启动时加载 index.html页面.
mainWindow.loadFile('./src/index.html')
//打开页面调试工具:DevTools.
//mainWindow.webContents.openDevTools()
// 永久隐藏菜单栏
mainWindow.setMenu(null);
}
//当Electron加载完成时,这个方法被执行:初始化并创建浏览器窗口,一些APIs在这之后才能被调用
app.whenReady().then(() => {
createWindow();
//NewWebsock('supersecret',8081,8082,'rtsp://admin:12345@192.168.0.6:554/PSIA/streaming/channels/101');
app.on('activate', function () {
//在macOS上,当应用程序已单击停靠图标,并且没有其他窗口打开。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
//关闭所有窗口时退出,macOS上除外,使应用程序及其菜单栏保持活动状态,直到用户退出(Cmd+Q)
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
//----------------------------------------
// http-server
//const http = require('http'); //支持On 自定义html
const http = require('http-server');//这个会返回目录下的所有,不支持on,且连接后关闭不了连接
var httpServer = null;
var sockets = {};
// ws-服务器
const WebSocketServer = require('ws').Server;
const wss = new WebSocketServer({port: 12122});
wss.on('connection', (ws) => {
console.log('client connected');
// 并且创建'message'监听
ws.on('message', (message) => {
var recmsg = message.split('|');
if (recmsg[0] === 'httpopen'&&recmsg.length==2)
{
if (httpServer === null) {
//创建Http服务
httpServer = http.createServer(/*function(req, res){
console.log('客户端请求url:' + req.url);
console.log('http版本:' + req.httpVersion);
console.log('http请求方法:' + req.method);
res.end('ok');
}*/);
httpServer.listen(parseInt(recmsg[1]))
/*
.on("connection", function (socket) {
// Add a newly connected socket
var socketId = nextSocketId++;
sockets[socketId] = socket;
console.log('socket', socketId, 'opened');
// Remove the socket when it closes
socket.on('close', function () {
console.log('socket', socketId, 'closed');
delete sockets[socketId];
});
// Extend socket lifetime for demo purposes
//socket.setTimeout(4000);
})*/;
ws.send('http 已打开,访问:http://localhost:' + recmsg[1]);
} else {
ws.send('http 已是打开状态!');
}
}
else if (recmsg[0] === 'httpclose'&&recmsg.length==2)
{
if (httpServer != null) {
//关闭Http服务
//httpServer.close();
httpServer.close(function () {console.log('http closed!'); });
// 销毁所有打开套接:sockets