视频播放同时支持h265和h264播放

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

@@ -2,7 +2,7 @@
   <Page class="h-full w-full">
     <!--  设备分组区域  -->
     <div class="flex h-full gap-[8px]">
-      <ChannelTree class="h-[83vh] w-[300px]" @check="onNodeChecked" />
+      <ChannelTree class="h-full w-[300px]" @check="onNodeChecked" />
 
       <!--  设备分组区域  -->
       <div class="bg-background flex-1">
@@ -47,13 +47,15 @@ import { Page } from '@vben/common-ui';
 import ChannelTree from './channel-tree.vue';
 import mpegts from 'mpegts.js';
 import { message } from 'ant-design-vue';
-import { addStreamProxy } from '#/api/sis/stream';
+import { addFFmpegStreamProxy, addStreamProxy } from '#/api/sis/stream';
 import {
   Svg16FrameIcon,
   Svg1FrameIcon,
   Svg4FrameIcon,
   Svg9FrameIcon,
 } from '@vben/icons';
+import { checkHEVCSupport } from '#/utils/video';
+import type { AddStreamProxyResult } from '#/api/sis/stream/model';
 
 const selected = 'selected';
 
@@ -265,6 +267,35 @@ function changeElPlayer(playerInfo: any, index: number) {
   }
 }
 
+function streamProxy(nodeData: any, cb: Function) {
+  let params = {};
+  if (nodeData.nvrIp) {
+    params = {
+      videoIp: nodeData.nvrIp,
+      videoPort: nodeData.nvrPort,
+      factoryNo: nodeData.nvrFactoryNo,
+      account: nodeData.nvrAccount,
+      pwd: nodeData.nvrPwd,
+      channelId: nodeData.nvrChannelNo,
+    };
+  } else {
+    params = {
+      videoIp: nodeData.deviceIp,
+      videoPort: nodeData.devicePort,
+      factoryNo: nodeData.factoryNo,
+      account: nodeData.deviceAccount,
+      pwd: nodeData.devicePwd,
+      channelId: nodeData.channelNo,
+    };
+
+    if (isSupportH265) {
+      addStreamProxy(params).then((res) => cb(res));
+    } else {
+      addFFmpegStreamProxy(params).then((res) => cb(res));
+    }
+  }
+}
+
 /**
  * 开始播放视频流
  * @param nodeData 播放的节点数据
@@ -273,27 +304,7 @@ function changeElPlayer(playerInfo: any, index: number) {
 function doPlayer(nodeData: any, index: number = 0) {
   console.log('index=', index);
   if (mpegts.isSupported()) {
-    let params = {};
-    // if (nodeData.nvrIp) {
-    //   params = {
-    //     videoIp: nodeData.nvrIp,
-    //     videoPort: nodeData.nvrPort,
-    //     factoryNo: nodeData.nvrFactoryNo,
-    //     account: nodeData.nvrAccount,
-    //     pwd: nodeData.nvrPwd,
-    //     channelId: nodeData.nvrChannelNo,
-    //   };
-    // } else {
-      params = {
-        videoIp: nodeData.deviceIp,
-        videoPort: nodeData.devicePort,
-        factoryNo: nodeData.factoryNo,
-        account: nodeData.deviceAccount,
-        pwd: nodeData.devicePwd,
-        channelId: nodeData.channelNo,
-      };
-    // }
-    addStreamProxy(params).then((res) => {
+    streamProxy(nodeData, (res: AddStreamProxyResult) => {
       const url = res.wsFlv;
       // 将url 绑定到 nodeData
       nodeData.url = url;
@@ -360,8 +371,10 @@ function closePlayer(index: number) {
   }
 }
 
+let isSupportH265 = false;
 onMounted(() => {
-  // 初始化不加载任何视频
+  // 检测浏览器是否支持h265
+  isSupportH265 = checkHEVCSupport();
 });
 
 onUnmounted(() => {