feat:

2025-06-27 14:17:46 +08:00
parent 8ef45fb81e
commit 3363f06191
14 changed files with 9686 additions and 72 deletions
--- a/.env.development
+++ b/.env.development
@@ -1 +1 @@
-VITE_API_BASE_URL = "http://localhost:4444"
+VITE_API_BASE_URL = "/"
--- a/index.html
+++ b/index.html
@@ -2,6 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
+    <script src="./lib/ZLMRTCClient.js"></script>
    <link rel="icon" type="image/svg+xml" href="/icon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>超市监控系统</title>
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
  },
  "devDependencies": {
    "@types/node": "^24.0.3",
+    "@vitejs/plugin-basic-ssl": "^2.0.0",
    "@vitejs/plugin-vue": "^5.2.3",
    "@vue/tsconfig": "^0.7.0",
    "sass-loader": "^16.0.5",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -39,6 +39,9 @@ importers:
      '@types/node':
        specifier: ^24.0.3
        version: 24.0.3
+      '@vitejs/plugin-basic-ssl':
+        specifier: ^2.0.0
+        version: 2.0.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2))
      '@vitejs/plugin-vue':
        specifier: ^5.2.3
        version: 5.2.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2))(vue@3.5.17(typescript@5.8.3))
@@ -333,67 +336,56 @@ packages:
    resolution: {integrity: sha512-x+e/Z9H0RAWckn4V2OZZl6EmV0L2diuX3QB0uM1r6BvhUIv6xBPL5mrAX2E3e8N8rEHVPwFfz/ETUbV4oW9+lQ==}
    cpu: [arm]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm-musleabihf@4.44.0':
    resolution: {integrity: sha512-1exwiBFf4PU/8HvI8s80icyCcnAIB86MCBdst51fwFmH5dyeoWVPVgmQPcKrMtBQ0W5pAs7jBCWuRXgEpRzSCg==}
    cpu: [arm]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-arm64-gnu@4.44.0':
    resolution: {integrity: sha512-ZTR2mxBHb4tK4wGf9b8SYg0Y6KQPjGpR4UWwTFdnmjB4qRtoATZ5dWn3KsDwGa5Z2ZBOE7K52L36J9LueKBdOQ==}
    cpu: [arm64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-arm64-musl@4.44.0':
    resolution: {integrity: sha512-GFWfAhVhWGd4r6UxmnKRTBwP1qmModHtd5gkraeW2G490BpFOZkFtem8yuX2NyafIP/mGpRJgTJ2PwohQkUY/Q==}
    cpu: [arm64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-loongarch64-gnu@4.44.0':
    resolution: {integrity: sha512-xw+FTGcov/ejdusVOqKgMGW3c4+AgqrfvzWEVXcNP6zq2ue+lsYUgJ+5Rtn/OTJf7e2CbgTFvzLW2j0YAtj0Gg==}
    cpu: [loong64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-powerpc64le-gnu@4.44.0':
    resolution: {integrity: sha512-bKGibTr9IdF0zr21kMvkZT4K6NV+jjRnBoVMt2uNMG0BYWm3qOVmYnXKzx7UhwrviKnmK46IKMByMgvpdQlyJQ==}
    cpu: [ppc64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-gnu@4.44.0':
    resolution: {integrity: sha512-vV3cL48U5kDaKZtXrti12YRa7TyxgKAIDoYdqSIOMOFBXqFj2XbChHAtXquEn2+n78ciFgr4KIqEbydEGPxXgA==}
    cpu: [riscv64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-riscv64-musl@4.44.0':
    resolution: {integrity: sha512-TDKO8KlHJuvTEdfw5YYFBjhFts2TR0VpZsnLLSYmB7AaohJhM8ctDSdDnUGq77hUh4m/djRafw+9zQpkOanE2Q==}
    cpu: [riscv64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-linux-s390x-gnu@4.44.0':
    resolution: {integrity: sha512-8541GEyktXaw4lvnGp9m84KENcxInhAt6vPWJ9RodsB/iGjHoMB2Pp5MVBCiKIRxrxzJhGCxmNzdu+oDQ7kwRA==}
    cpu: [s390x]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-gnu@4.44.0':
    resolution: {integrity: sha512-iUVJc3c0o8l9Sa/qlDL2Z9UP92UZZW1+EmQ4xfjTc1akr0iUFZNfxrXJ/R1T90h/ILm9iXEY6+iPrmYB3pXKjw==}
    cpu: [x64]
    os: [linux]
-    libc: [glibc]

  '@rollup/rollup-linux-x64-musl@4.44.0':
    resolution: {integrity: sha512-PQUobbhLTQT5yz/SPg116VJBgz+XOtXt8D1ck+sfJJhuEsMj2jSej5yTdp8CvWBSceu+WW+ibVL6dm0ptG5fcA==}
    cpu: [x64]
    os: [linux]
-    libc: [musl]

  '@rollup/rollup-win32-arm64-msvc@4.44.0':
    resolution: {integrity: sha512-M0CpcHf8TWn+4oTxJfh7LQuTuaYeXGbk0eageVjQCKzYLsajWS/lFC94qlRqOlyC2KvRT90ZrfXULYmukeIy7w==}
@@ -505,6 +497,12 @@ packages:
    peerDependencies:
      vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0 || ^6.0.0-0

+  '@vitejs/plugin-basic-ssl@2.0.0':
+    resolution: {integrity: sha512-gc9Tjg8bUxBVSTzeWT3Njc0Cl3PakHFKdNfABnZWiUgbxqmHDEn7uECv3fHVylxoYgNzAcmU7ZrILz+BwSo3sA==}
+    engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
+    peerDependencies:
+      vite: ^6.0.0
+
  '@vitejs/plugin-vue@5.2.4':
    resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
    engines: {node: ^18.0.0 || >=20.0.0}
@@ -1500,6 +1498,10 @@ snapshots:
    transitivePeerDependencies:
      - vue

+  '@vitejs/plugin-basic-ssl@2.0.0(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2))':
+    dependencies:
+      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)
+
  '@vitejs/plugin-vue@5.2.4(vite@6.3.5(@types/node@24.0.3)(jiti@2.4.2))(vue@3.5.17(typescript@5.8.3))':
    dependencies:
      vite: 6.3.5(@types/node@24.0.3)(jiti@2.4.2)
--- a/public/lib/ZLMRTCClient.js
+++ b/public/lib/ZLMRTCClient.js
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,54 +1,159 @@
 <script setup lang="ts">
 import Button from "primevue/button";
 import Input from "primevue/inputtext";
+import { onMounted } from "vue";
+import { WebSocketClient } from "./utils/websocket";
+import { getStreamAnswer } from "./api/api";
+import { logger } from "./utils/logger/Logger";
+const ws = new WebSocketClient(
+  "wss://socket.test.7games.store/wss?token=superadmin"
+);
+const connectionRtc = async () => {
+  try {
+    const res = await getStreamAnswer("test002", "");
+    console.log(res);
+  } catch {}
+};
+// {
+//     element: document.getElementById('video'),// video 标签
+//     debug: true,// 是否打印日志
+//     zlmsdpUrl:document.getElementById('streamUrl').value,//流地址
+//     simulcast:document.getElementById('simulcast').checked,
+//     useCamera:document.getElementById('useCamera').checked,
+//     audioEnable:document.getElementById('audioEnable').checked,
+//     videoEnable:document.getElementById('videoEnable').checked,
+//     recvOnly:recvOnly,
+//     resolution:{w,h},
+//     usedatachannel:document.getElementById('datachannel').checked,
+//     videoId:vdevid, // 不填选择默认的
+//     audioId:adevid, // 不填选择默认的
+// }
+const startPlay = async () => {
+  const player = new ZLMRTCClient.Endpoint({
+    recvOnly:'play'
+  });
+  logger.info(player)
+  player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) {
+    // ICE 协商出错
+    console.log("ICE 协商出错");
+  });
+
+  player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (s) {
+    //获取到了远端流，可以播放,如果element 为null 或者不传,可以在这里播放(如下注释代码)
+    /*
+                document.getElementById('video').srcObject=s;
+              */
+    console.log("播放成功", s);
+  });
+};
+onMounted(async () => {
+  await connectionRtc();
+  // ws.send({ instruction: "NEW_CLIENT", secrity: "bk3yddsl" });
+});
 </script>

 <template>
-  <div class="bg-[rgba(33,60,137,1)] py-4 px-1 flex gap-1">
-    <div class="flex">
-      <Button
-        pt:root="cursor-pointer py-1 px-2 rounded-full border-0 flex gap-2 mx-2"
-        pt:icon="text-white text-2xl"
-        icon="fa-solid fa-house"
-        pt:label="text-white font-bold text-2xl"
-        label="幸福小超市"
-      />
-
-      <Button
-        label="收银"
-        icon="fa-solid fa-house"
-        pt:label="text-white font-bold text-md flex items-center"
-        pt:icon="text-white text-md flex items-center"
-        pt:root="bg-[rgba(36,87,232,1)] hover:bg-[rgba(36,87,232,0.8)] active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-1 px-2 rounded-full border-0 flex justify-center gap-2"
-      />
-      <Button
-        label="收银"
-        icon="fa-solid fa-house"
-        pt:label="text-white font-bold text-md flex items-center"
-        pt:icon="text-white text-md flex items-center"
-        pt:root=" hover:bg-[rgba(36,87,232,0.8)] active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-1 px-2 rounded-full border-0 flex justify-center gap-2"
-      />
-      <Button
-        label="收银"
-        icon="fa-solid fa-house"
-        pt:label="text-white font-bold text-md flex items-center"
-        pt:icon="text-white text-md flex items-center"
-        pt:root=" hover:bg-[rgba(36,87,232,0.8)] active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-1 px-2 rounded-full border-0 flex justify-center gap-2"
-      />
-      <Button
-        label="收银"
-        icon="fa-solid fa-house"
-        pt:label="text-white font-bold text-md flex items-center"
-        pt:icon="text-white text-md flex items-center"
-        pt:root=" hover:bg-[rgba(36,87,232,0.8)] active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-1 px-2 rounded-full border-0 flex justify-center gap-2"
-      />
+  <div class="flex-col w-screen">
+    <div class="w-full bg-[rgba(33,60,137,1)] py-4 px-1 flex gap-1">
+      <div class="flex gap-2">
+        <Button
+          pt:root="cursor-pointer py-1 px-2 rounded-full border-0 flex gap-2 mx-2"
+        >
+          <div class="flex gap-2">
+            <div class="h-36px w-36px">
+              <img src="@/assets/images/icon_cs@2x.png" alt="" />
+            </div>
+            <div class="text-white font-bold text-2xl flex items-center">
+              <span>幸福小超市</span>
+            </div>
+          </div>
+        </Button>
+        <Button
+          pt:root="active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-2 px-4 rounded-full border-0 flex justify-center"
+        >
+          <div class="flex gap-1 items-center">
+            <div class="h-24px w-24px">
+              <img src="@/assets/images/icon_sy@2x.png" alt="" />
+            </div>
+            <div class="text-white font-bold text-md flex items-center">
+              <span>收银</span>
+            </div>
+          </div>
+        </Button>
+        <Button
+          pt:root="active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-2 px-4 rounded-full border-0 flex justify-center"
+        >
+          <div class="flex gap-1 items-center">
+            <div class="h-24px w-24px">
+              <img src="@/assets/images/icon_dj@2x.png" alt="" />
+            </div>
+            <div class="text-white font-bold text-md flex items-center">
+              <span>对讲</span>
+            </div>
+          </div>
+        </Button>
+        <Button
+          pt:root="active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-2 px-4 rounded-full border-0 flex justify-center"
+        >
+          <div class="flex gap-1 items-center">
+            <div class="h-24px w-24px">
+              <img src="@/assets/images/icon_sy@2x.png" alt="" />
+            </div>
+            <div class="text-white font-bold text-md flex items-center">
+              <span>语音</span>
+            </div>
+          </div>
+        </Button>
+        <Button
+          pt:root="active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-2 px-4 rounded-full border-0 flex justify-center"
+        >
+          <div class="flex gap-1 items-center">
+            <div class="h-24px w-24px">
+              <img src="@/assets/images/icon_sy@2x.png" alt="" />
+            </div>
+            <div class="text-white font-bold text-md flex items-center">
+              <span>开一门</span>
+            </div>
+          </div>
+        </Button>
+        <Button
+          pt:root="active:bg-[rgba(36,87,232,0.6)] cursor-pointer py-2 px-4 rounded-full border-0 flex justify-center"
+        >
+          <div class="flex gap-1 items-center">
+            <div class="h-24px w-24px">
+              <img src="@/assets/images/icon_sy@2x.png" alt="" />
+            </div>
+            <div class="text-white font-bold text-md flex items-center">
+              <span>开二门</span>
+            </div>
+          </div>
+        </Button>
+      </div>
+      <div class="flex flex-1 justify-end">
+        <Input
+          readonly
+          pt:root="outline-none text-center text-white bg-[rgba(255,255,255,0.1)] rounded-full max-w-500px px-2 min-w-200px placeholder-[rgba(255,255,255,0.8)]"
+          value="1111111/xxxxxxx"
+        />
+      </div>
    </div>
-    <div class="flex flex-1 justify-end">
-      <Input
-        readonly
-        pt:root="outline-none text-center text-white bg-[rgba(255,255,255,0.1)] rounded-full max-w-500px px-2 min-w-200px placeholder-[rgba(255,255,255,0.8)]"
-        value="1111111/xxxxxxx"
-      />
+    <div class="w-full">
+      <video class="bg-gray w-full aspect-ratio-video" src=""></video>
+      <div class="w-full flex">
+        <video class="bg-gray w-100%"></video>
+        <video class="bg-gray w-100%"></video>
+        <video class="bg-gray w-100%"></video>
+      </div>
+      <div class="w-full flex">
+        <video class="bg-gray w-100%"></video>
+        <video class="bg-gray w-100%"></video>
+        <video class="bg-gray w-100%"></video>
+      </div>
+      <div class="w-full flex">
+        <video class="bg-gray w-100%"></video>
+        <video class="bg-gray w-100%"></video>
+        <video class="bg-gray w-100%"></video>
+      </div>
    </div>
  </div>
 </template>
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -0,0 +1,12 @@
+import request from "@/http/request";
+export const getStreamAnswer = async (streamName: string, data: string) => {
+  return request.post(
+    `/index/api/webrtc?app=live&stream=${streamName}&type=play`,
+    data,
+    {
+      headers: {
+        "Content-Type": "text/plain;charset=UTF-8",
+      },
+    }
+  );
+};
--- a/src/assets/images/icon_cs@2x.png
+++ b/src/assets/images/icon_cs@2x.png
--- a/src/assets/images/icon_dj@2x.png
+++ b/src/assets/images/icon_dj@2x.png
--- a/src/assets/images/icon_sy@2x.png
+++ b/src/assets/images/icon_sy@2x.png
--- a/src/env/env.config.ts
+++ b/src/env/env.config.ts
@@ -16,7 +16,7 @@ export const envDefinitions = {
        type: 'string' as const,
        required: true,
        defaultValue: '/',
-        validator: (value: string) => value.startsWith('http'),
+        validator: (value: string) => value,
        description: 'API 基础地址'
    },

--- a/src/globa.d.ts
+++ b/src/globa.d.ts
@@ -0,0 +1 @@
+const ZLMRTCClient:any
--- a/src/style.css
+++ b/src/style.css
@@ -18,9 +18,10 @@
 /* 移除默认边距和内边距 */
 body, h1, h2, h3, h4, h5, h6,
 p, blockquote, pre, dl, dd, ol, ul,
-figure, hr, fieldset, legend {
+figure, hr, fieldset, legend,div {
  margin: 0;
  padding: 0;
+  box-sizing: border-box;
 }

 /* 设置核心元素基线 */
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,20 +1,39 @@
-import { defineConfig, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import UnoCSS from 'unocss/vite'
-import { resolve } from "path"
-
+import { defineConfig, loadEnv } from "vite";
+import vue from "@vitejs/plugin-vue";
+import UnoCSS from "unocss/vite";
+import basicSsl from "@vitejs/plugin-basic-ssl";
+import { resolve } from "path";
 // https://vite.dev/config/
 export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd())
+  const env = loadEnv(mode, process.cwd());
  console.log(env);
  return {
-    plugins: [vue(), UnoCSS()], server: {
+    plugins: [vue(), UnoCSS(), basicSsl()],
+    server: {
      port: 4444,
-      host:'0.0.0.0'
-    }, resolve: {
+      host: "0.0.0.0",
+      https: true as unknown as any,
+      proxy: {
+        "/index/api/webrtc": {
+          target: "https://webrtc.test.7games.store",
+          secure: false,
+          changeOrigin: true,
+          rewrite: (path) => {
+            console.log(path);
+            return path;
+          },
+          "^/test": {
+            // 改用新前缀测试
+            target: "https://www.baidu.com",
+            changeOrigin: true,
+          },
+        },
+      },
+    },
+    resolve: {
      alias: {
-        '@': resolve(__dirname, 'src')
-      }
-    }
-  }
-})
+        "@": resolve(__dirname, "src"),
+      },
+    },
+  };
+});