视频流适配内外网

apps/web-antd/src/api/sis/stream/model.d.ts

@@ -1,5 +1,7 @@
 export interface AddStreamProxyResult {
   key:string;
+  app:string;
+  streamId:string;
   rtsp:string;
   rtmp:string;
   flv:string;

apps/web-antd/src/views/sis/video/index.vue

@@ -2,11 +2,8 @@
   <Page class="h-full w-full">
     <!--  设备分组区域  -->
     <div class="flex h-full gap-[8px]">
-      <div class="h-full pb-[5px] c-tree bg-background">
+      <div class="c-tree bg-background h-full pb-[5px]">
-        <ChannelTree
+        <ChannelTree class="w-[300px]" @check="onNodeChecked" />
-          class="w-[300px]"
-          @check="onNodeChecked"
-        />
       </div>
 
       <!--  设备分组区域  -->
@@ -52,7 +49,7 @@ import { Page } from '@vben/common-ui';
 import ChannelTree from './channel-tree.vue';
 import mpegts from 'mpegts.js';
 import { message } from 'ant-design-vue';
-import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
+import { addStreamProxy } from '#/api/sis/stream';
 import {
   Svg16FrameIcon,
   Svg1FrameIcon,
@@ -296,8 +293,8 @@ function streamProxy(nodeData: any, cb: Function) {
   if (isSupportH265) {
     addStreamProxy(params).then((res) => cb(res));
   } else {
-    addFFmpegStreamProxy(params).then((res) => cb(res));
+    // addFFmpegStreamProxy(params).then((res) => cb(res));
-    // addStreamProxy(params).then((res) => cb(res));
+    addStreamProxy(params).then((res) => cb(res));
   }
 }
 
@@ -310,7 +307,8 @@ function doPlayer(nodeData: any, index: number = 0) {
   console.log('index=', index);
   if (mpegts.isSupported()) {
     streamProxy(nodeData, (res: AddStreamProxyResult) => {
-      const url = res.wsFlv;
+      const host = window.location.host;
+      const url = `http://${host}/${res.app}/${res.streamId}.live.flv`;
       // 将url 绑定到 nodeData
       nodeData.url = url;
       closePlayer(index);
@@ -337,7 +335,9 @@ function doPlayer(nodeData: any, index: number = 0) {
         player.play();
         playerList[index] = {
           player,
+          key: nodeData.id,
           data: nodeData,
+          el: videoElement,
         };
       } else {
         console.log('视频播放元素获取异常');
@@ -381,10 +381,13 @@ function catchUp() {
     if (playerData) {
       const { player, el } = playerData;
       const end = player.buffered.end(player.buffered.length - 1);
-      const diff = end - el.currentTime;
+      const { currentTime } = el;
-      if (diff > 2) {
+      if (end && currentTime) {
-        // 如果延迟超过2秒
+        const diff = end - el.currentTime;
-        el.currentTime = end - 0.5; // 跳转到接近直播点
+        if (diff > 2) {
+          // 如果延迟超过2秒
+          el.currentTime = end - 0.5; // 跳转到接近直播点
+        }
       }
     }
   });