1.新增依赖

ffmpeg-static

electron/electron.js

@@ -1,9 +1,106 @@
 // electron/electron.js
 const path = require('path');
-const { app, BrowserWindow } = require('electron');
+const { app, BrowserWindow, ipcMain } = require('electron');
 
 const isDev = process.env.IS_DEV == "true" ? true : false;
 
+// rtsp相关,ffmpeg-static会自动下载对应平台windos，linux，mac(intle)，mac(M1版本)的ffmpeg二进制文件
+const ffmpegPath = require('ffmpeg-static')
+/**
+  stream相关配置及方法
+  name = options.name
+  streamUrl = options.streamUrl
+  width = options.width
+  height = options.height
+  wsPort = options.wsPort
+  nputStreamStarted = false
+  stream = undefined
+  ffmpegPath = options?.ffmpegPath ?? ffmpeg
+  stop()
+ */
+  const Stream = require('node-rtsp-stream')
+  /**
+   * rtsp列表
+   * interface {
+   *   rtspUrl: {
+   *     ws: websocket地址
+   *     stream: stream实例
+   *   }
+   * }
+   */
+  const rtspOpenders = {}
+  let addPort = 9000
+
+/** 
+ * 开启rtsp
+ * @param rtsp {String} rtsp流地址
+ */
+
+
+ipcMain.on('openRtsp', (event, rtsp) => {
+  /** 判断是否已开启,若已开启,直接返回ws地址, 未开启则先开启再返回 */
+  if (rtspOpenders[rtsp]) {
+    event.returnValue = {
+      code: 200,
+      msg: '开启成功',
+      ws: rtspOpenders[rtsp].ws
+    }
+  } else {
+    addPort++
+    const stream = new Stream({
+      name: `socket-${addPort}`,
+      streamUrl: rtsp,
+      wsPort: addPort,
+      ffmpegPath: app.isPackaged ? ffmpegPath.replace('app.asar', 'app.asar.unpacked') : ffmpegPath,
+      ffmpegOptions: {
+        '-stats': '',
+        '-r': 30
+      }
+    }).on('exitWithError', () => {
+      stream.stop()
+      delete rtspOpenders[rtsp]
+      event.returnValue = {
+        code: 400,
+        msg: '开启失败'
+      }
+    })
+    rtspOpenders[rtsp] = {
+      ws: `ws://localhost:${addPort}`,
+      stream: stream
+    }
+    event.returnValue = {
+      code: 200,
+      msg: '开启成功',
+      ws: rtspOpenders[rtsp].ws
+    }
+  }
+})
+
+/**
+ * 关闭rtsp
+ */
+ipcMain.on('closeRtsp', (event, rtsp) => {
+  if (rtspOpenders[rtsp]) {
+    // 停止解析
+    rtspOpenders[rtsp].stream.stop()
+    // 删除该项
+    delete rtspOpenders[rtsp]
+    // 返回结果
+    event.returnValue = {
+      code: 200,
+      msg: '关闭成功'
+    }
+  } else {
+    event.returnValue = {
+      code: 400,
+      msg: '未找到该rtsp'
+    }
+  }
+})
+
+
+///////////////////////////////////////////
+
 function createWindow() {
   // Create the browser window.
   const mainWindow = new BrowserWindow({
@@ -14,7 +111,11 @@ function createWindow() {
       javascript: true,
       plugins: true,
       allowRunningInsecureContent: true,
+      // 允许web断使用node
       nodeIntegration: true,
+      contextIsolation: false,
+      // 同源策略关闭
+      webSecurity: false,
     },
   });
 

package.json

@@ -2,10 +2,10 @@
   "name": "zgx",
   "version": "3.5.1",
   "author": {
-    "name": "zgx",
+    "name": "ZGX",
-    "email": "zgx@163.com"
+    "email": "ZGX@163.com",
+    "url": "https://github.com/jeecgboot/jeecgboot-vue3"
   },
-  "description":"边海防智能监控站",
   "main": "electron/electron.js",
   "build": {
     "appId": "com.my-website.my-app",
@@ -14,6 +14,7 @@
     "mac": {
       "category": "public.app-category.utilities"
     },
+   
     "nsis": {
       "oneClick": false,
       "allowToChangeInstallationDirectory": true
@@ -35,10 +36,11 @@
   },
   "scripts": {
     "electron:serve": "cross-env IS_DEV=true electron .",
-    "electron:start": "npm run dev & npm run electron:serve", 
+    "electron:start": "npm run dev & npm run electron:serve",
     "electron:dev": "concurrently \"npm run dev\" \"npm run electron:serve\" ",
     "electron:build.win": "npm run build &&  electron-builder --win --dir",
     "electron:builder": "electron-builder --win --dir",
+    "electron:builder.ia32": "electron-builder --win --ia32",
     "bootstrap": "pnpm install",
     "serve": "npm run dev",
     "dev": "vite",
@@ -97,8 +99,10 @@
     "electron-packager": "^17.1.2",
     "emoji-mart-vue-fast": "^11.1.1",
     "enquire.js": "^2.1.6",
+    "ffmpeg-static": "^5.2.0",
     "intro.js": "^5.1.0",
     "jquery": "^3.7.0",
+    "jsmpeg-player": "^3.0.3",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash.get": "^4.4.2",
@@ -106,6 +110,7 @@
     "mitt": "^3.0.1",
     "mockjs": "^1.1.0",
     "moment": "^2.29.4",
+    "node-rtsp-stream": "^0.0.9",
     "nprogress": "^0.2.0",
     "particles.vue3": "^2.11.0",
     "path-to-regexp": "^6.2.0",

src/views/system/loginmini/ZGXLoginRTSPTest.vue

@@ -0,0 +1,181 @@
+
+
+<template>
+  <div class="flexBox">
+    <input type="text" v-model="rtspUrl">
+    <button @click="open">打开rtsp</button>
+    <button @click="close">关闭rtsp</button>
+  </div>
+  <div class="mpegPlayer" ref="mpegPlayer"></div>
+  <div>{{msg}}</div>
+
+  <div class="flexBox">
+    <input type="text" v-model="rtspUrl2">
+    <button @click="open2">打开rtsp</button>
+    <button @click="close2">关闭rtsp</button>
+  </div>
+  <div class="mpegPlayer" ref="mpegPlayer2"></div>
+  <div>{{msg2}}</div>
+
+  <div class="flexBox">
+    <input type="text" v-model="rtspUrl3">
+    <button @click="open3">打开rtsp</button>
+    <button @click="close3">关闭rtsp</button>
+  </div>
+  <div class="mpegPlayer" ref="mpegPlayer3"></div>
+  <div>{{msg3}}</div>
+
+  <div class="flexBox">
+    <input type="text" v-model="rtspUrl4">
+    <button @click="open4">打开rtsp</button>
+    <button @click="close4">关闭rtsp</button>
+  </div>
+  <div class="mpegPlayer" ref="mpegPlayer4"></div>
+  <div>{{msg4}}</div>
+
+  <div class="flexBox">
+    <input type="text" v-model="rtspUrl5">
+    <button @click="open5">打开rtsp</button>
+    <button @click="close5">关闭rtsp</button>
+  </div>
+  <div class="mpegPlayer" ref="mpegPlayer5"></div>
+  <div>{{msg5}}</div>
+
+  <div class="flexBox">
+    <input type="text" v-model="rtspUrl6">
+    <button @click="open6">打开rtsp</button>
+    <button @click="close6">关闭rtsp</button>
+  </div>
+  <div class="mpegPlayer" ref="mpegPlayer6"></div>
+  <div>{{msg6}}</div>
+
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MpegPlayer from 'jsmpeg-player'
+const { ipcRenderer } = require('electron')
+const rtspUrl = ref('')
+const rtspUrl2 = ref('')
+const rtspUrl3 = ref('')
+const rtspUrl4 = ref('')
+const rtspUrl5 = ref('')
+const rtspUrl6 = ref('')
+const mpegPlayer = ref()
+const mpegPlayer2= ref()
+const mpegPlayer3= ref()
+const mpegPlayer4= ref()
+const mpegPlayer5= ref()
+const mpegPlayer6= ref()
+const msg = ref('')
+const msg2 = ref('')
+const msg3 = ref('')
+const msg4 = ref('')
+const msg5 = ref('')
+const msg6 = ref('')
+let player: any = null
+let player2: any = null
+let player3: any = null
+let player4: any = null
+let player5: any = null
+let player6: any = null
+////////////////////////////////////////////
+const open = () => {
+  const res = ipcRenderer.sendSync('openRtsp', rtspUrl.value)
+  if (res.code === 200) {
+    player = new MpegPlayer.VideoElement(mpegPlayer.value, res.ws)
+  }
+  msg.value = res.msg
+}
+const close = () => {
+  const res = ipcRenderer.sendSync('closeRtsp', rtspUrl.value)
+  msg.value = res.msg
+}
+////////////////////////////////////////////
+const open2 = () => {
+  const res = ipcRenderer.sendSync('openRtsp', rtspUrl2.value)
+  if (res.code === 200) {
+    player2 = new MpegPlayer.VideoElement(mpegPlayer2.value, res.ws)
+  }
+  msg2.value = res.msg
+}
+const close2 = () => {
+  const res = ipcRenderer.sendSync('closeRtsp', rtspUrl2.value)
+  msg2.value = res.msg
+}
+////////////////////////////////////////////
+const open3 = () => {
+  const res = ipcRenderer.sendSync('openRtsp', rtspUrl3.value)
+  if (res.code === 200) {
+    player3 = new MpegPlayer.VideoElement(mpegPlayer3.value, res.ws)
+  }
+  msg3.value = res.msg
+}
+const close3 = () => {
+  const res = ipcRenderer.sendSync('closeRtsp', rtspUrl3.value)
+  msg3.value = res.msg
+}
+////////////////////////////
+const open4 = () => {
+  const res = ipcRenderer.sendSync('openRtsp', rtspUrl4.value)
+  if (res.code === 200) {
+    player4 = new MpegPlayer.VideoElement(mpegPlayer4.value, res.ws)
+  }
+  msg4.value = res.msg
+}
+const close4 = () => {
+  const res = ipcRenderer.sendSync('closeRtsp', rtspUrl4.value)
+  msg4.value = res.msg
+}
+////////////////////////////
+const open5 = () => {
+  const res = ipcRenderer.sendSync('openRtsp', rtspUrl5.value)
+  if (res.code === 200) {
+    player5 = new MpegPlayer.VideoElement(mpegPlayer5.value, res.ws)
+  }
+  msg5.value = res.msg
+}
+const close5 = () => {
+  const res = ipcRenderer.sendSync('closeRtsp', rtspUrl5.value)
+  msg5.value = res.msg
+}
+////////////////////////////
+const open6 = () => {
+  const res = ipcRenderer.sendSync('openRtsp', rtspUrl6.value)
+  if (res.code === 200) {
+    player6 = new MpegPlayer.VideoElement(mpegPlayer6.value, res.ws)
+  }
+  msg6.value = res.msg
+}
+const close6 = () => {
+  const res = ipcRenderer.sendSync('closeRtsp', rtspUrl6.value)
+  msg6.value = res.msg
+}
+</script>
+<style>
+* {
+  padding: 0;
+  margin: 0;
+}
+.flexBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 50px;
+}
+.flexBox input  {
+  height: 30px;
+  width: 500px;
+  box-sizing: border-box;
+  padding-left: 8px;
+}
+.flexBox button {
+  height: 30px;
+  padding: 0 12px;
+}
+.mpegPlayer {
+  width: 800px;
+  height: 450px;
+  background: #ccc;
+}
+</style>
+