Electron笔记七:完整代码

这篇博客详细介绍了Electron应用的文件结构和关键代码,包括`package.json`、`main.js`、`index.html`、`renderer.js`以及使用jsmpeg的`demo.html`。还提及了Dll代码的相关内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值