Merge branch 'feat/device-new-protocol' of http://git.yunteng.com/yunteng/things…

…kit-front into feat/device-new-protocol

@@ -135,7 +135,7 @@
         jessibuca?.on('play', () => {
           console.log('播放');
         });
-        jessibuca.on('pause', () => {
+        jessibuca?.on('pause', () => {
           console.log('暂停');
         });
 

 <script lang="ts" setup>
   import { isNumber } from 'lodash';
-  import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
+  // import videoJs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
   import 'video.js/dist/video-js.css';
-  import { computed, CSSProperties, onMounted, onUnmounted, ref, unref } from 'vue';
+  import { onMounted, onUnmounted, ref, unref } from 'vue';
   import { useDesign } from '/@/hooks/web/useDesign';
-  import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
-  import { isShareMode } from '/@/views/sys/share/hook';
+  // import { getJwtToken, getShareJwtToken } from '/@/utils/auth';
+  // import { isShareMode } from '/@/views/sys/share/hook';
   import 'videojs-flvjs-es6';
   import {
     CaretUpOutlined,
@@ -18,73 +18,42 @@
   } from '@ant-design/icons-vue';
   import { Button } from 'ant-design-vue';
   import { nextTick } from 'vue';
-  import Jessibuca from '../types/jessibuca';
+  import { useMessage } from '/@/hooks/web/useMessage';
+  import Jessibuca from './types/jessibuca';
   // import JessibucaDemo from './components/JessibucaDemo.vue';
 
   const { prefixCls } = useDesign('basic-video-play');
 
-  const props = defineProps<{
-    options?: VideoJsPlayerOptions;
-    withToken?: boolean;
-  }>();
+  // const props = defineProps<{
+  //   options?: VideoJsPlayerOptions;
+  //   withToken?: boolean;
+  // }>();
 
-  const emit = defineEmits<{
-    (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
-    (event: 'onUnmounted'): void;
-  }>();
-
-  const videoPlayEl = ref<HTMLVideoElement>();
+  // const emit = defineEmits<{
+  //   (event: 'ready', instance?: Nullable<VideoJsPlayer>): void;
+  //   (event: 'onUnmounted'): void;
+  // }>();
 
   const JessibucaRef = ref();
 
-  const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
-
-  const getOptions = computed(() => {
-    const { options, withToken } = props;
-
-    const defaultOptions: VideoJsPlayerOptions & Recordable = {
-      language: 'zh',
-      muted: true,
-      liveui: true,
-      controls: true,
-      techOrder: ['html5', 'flvjs'],
-      flvjs: {
-        mediaDataSource: {
-          isLive: true,
-          cors: true,
-          hasAudio: false,
-          withCredentials: false,
-        },
-        config: {
-          headers: {
-            ...(withToken
-              ? {
-                  'X-Authorization': `Bearer ${isShareMode() ? getShareJwtToken() : getJwtToken()}`,
-                }
-              : {}),
-          },
-          autoCleanupSourceBuffer: true,
-        },
-      },
-    };
-    return videoJs.mergeOptions(defaultOptions, options);
-  });
+  // const videoPlayInstance = ref<Nullable<VideoJsPlayer>>();
 
   const playUrl = ref('http://flv.bdplay.nodemedia.cn/live/bbb.flv');
 
+  const { createMessage } = useMessage();
+
   let jessibuca: Jessibuca | null = null;
   const container = ref(null);
   const createJessibuca = () => {
     jessibuca = new (window as any).Jessibuca({
-      container: container.value,
+      decoder: '/jessibuca/decoder.js',
+      container: container.value, //播放器容器
       videoBuffer: 0.2, // 缓存时长
       isResize: true,
       isFullResize: true,
       text: '',
-      debug: false,
-      // background: "bg.jpg",
       loadingText: '加载中',
-      // hasAudio:false,
+      hasAudio: false,
       debug: true,
       showBandwidth: true, // 显示网速
       operateBtns: {
@@ -93,32 +62,25 @@
         play: true,
         audio: true,
       },
-      controlAutoHide: true,
+      controlAutoHide: true, // 底部控制台是否自动隐藏
       ifFlv: false,
-      forceNoOffscreen: true,
-      isNotMute: false,
-      decoder: '/jessibuca/decoder.js',
+      forceNoOffscreen: true, //是否不使用离屏模式（提升渲染能力）
+      isNotMute: false, // 是否开启声音，默认是关闭声音播放的。
     }) as Jessibuca;
   };
 
-  const getWidthHeight = computed(() => {
-    let { width = 640, height = 360 } = unref(getOptions);
-    width = isNumber(width) ? (`${width}px` as unknown as number) : width;
-    height = isNumber(height) ? (`${height}px` as unknown as number) : height;
-    return { width, height } as CSSProperties;
+  const videoInfo = ref<{ width: string | number; height: string | number }>({
+    width: 640,
+    height: 360,
   });
-
-  const init = () => {
-    if (unref(videoPlayInstance)) unref(videoPlayInstance)?.dispose();
-    videoPlayInstance.value = videoJs(unref(videoPlayEl)!, unref(getOptions), () => {
-      emit('ready', unref(videoPlayInstance));
-    });
-  };
-  //播放/暂停s
+  //播放/暂停
   const handleClick = () => {
-    console.log('播放/暂停');
-    unref(isPlay) && unref(videoPlayInstance)?.pause();
-    !unref(isPlay) && unref(videoPlayInstance)?.play();
+    console.log('播放/暂停', unref(isPlay));
+    if (unref(isPlay)) {
+      jessibuca?.pause();
+    } else {
+      jessibuca?.play();
+    }
   };
 
   const handleTopClick = async () => {
@@ -153,89 +115,63 @@
 
   const isPlay = ref<Boolean | null | undefined>(true);
 
-  // 播放
-  // const play = () => {
-  //   if (playUrl.value) {
-  //     jessibuca?.play(playUrl.value);
-  //   }
-  // };
-
-  // // 暂停
-  // const pause = () => {
-  //   jessibuca?.pause();
-  //   playing.value = false;
-  // };
-
   // // 关闭视频
-  // const destroy = () => {
-  //   if (jessibuca) {
-  //     jessibuca.destroy();
-  //   }
-  //   createJessibuca();
-  //   playing.value = false;
-  //   loaded.value = false;
-  // };
+  const destroy = () => {
+    if (jessibuca) {
+      jessibuca.destroy();
+    }
+    createJessibuca();
+    isPlay.value = false;
+  };
 
   onMounted(async () => {
-    // init();
-    // await nextTick();
-    // // isPlay.value = unref(videoPlayInstance)?.paused();
-    // videoPlayInstance.value?.on('loadedmetadata', () => {
-    //   console.log('视频长度');
-    // });
-    // videoPlayInstance.value?.on('waiting', () => {
-    //   isPlay.value = false;
-    //   console.log('视频加载中');
-    // });
-    // videoPlayInstance.value?.on('play', () => {
-    //   isPlay.value = true;
-    //   console.log('视频开始播放');
-    // });
-    // videoPlayInstance.value?.on('playing', () => {
-    //   isPlay.value = true;
-    //   console.log('正在播放');
-    // });
-    // videoPlayInstance.value?.on('pause', () => {
-    //   isPlay.value = false;
-    //   console.log('暂停播放');
-    // });
-    // videoPlayInstance.value?.on('ended', () => {
-    //   isPlay.value = false;
-    //   console.log('结束播放');
-    // });
-
     createJessibuca();
     await nextTick();
     jessibuca?.play(playUrl.value);
+    isPlay.value = jessibuca?.isPlaying();
 
-    jessibuca?.on('play', () => {
-      console.log('播放');
+    // 是否播放
+    jessibuca?.on('play', function () {
+      isPlay.value = true;
     });
-    jessibuca.on('pause', () => {
-      console.log('暂停');
+
+    // 是否暂停
+    jessibuca?.on('pause', () => {
+      isPlay.value = false;
     });
 
     jessibuca?.on('videoInfo', (data) => {
-      console.log(data, 'data');
+      let { width, height } = data || {};
+      width = isNumber(width) ? (`${width}px` as unknown as number) : width;
+      height = isNumber(height) ? (`${height}px` as unknown as number) : height;
+      videoInfo.value = {
+        width,
+        height,
+      };
+    });
+
+    // 播放报错事件
+    jessibuca?.on('error', (error) => {
+      error == 'playError' && createMessage.warning('播放错误');
+      error == 'fetchError' && createMessage.warning('http请求失败');
+      error == 'websocketError' && createMessage.warning('websocket 请求失败');
+      error == 'webcodecsH265NotSupport' && createMessage.warning('webcodecs 解码失败');
+      error == 'mediaSourceH265NotSupport' && createMessage.warning('mediaSource 解码失败');
+      error == 'wasmDecodeError' && createMessage.warning('wasm 解码失败');
     });
   });
 
   onUnmounted(() => {
-    // unref(videoPlayInstance)?.dispose();
-    // videoPlayInstance.value = null;
-    // emit('onUnmounted');
-
     jessibuca && jessibuca.destroy();
   });
 
   defineExpose({
-    reloadPlayer: init,
-    getInstance: () => unref(videoPlayInstance),
+    handleDestroy: destroy,
   });
 </script>
 
 <template>
-  <div :class="prefixCls" class="!w-full h-full flex" :style="getWidthHeight">
+  <div :class="prefixCls" class="!w-full h-full flex" :style="videoInfo">
     <!-- <video
       ref="videoPlayEl"
       class="video-js vjs-big-play-centered vjs-show-big-play-button-on-pause !w-8/10 !h-full"

@@ -13,6 +13,7 @@
       <div class="flex items-center justify-center w-full h-full min-h-96 video-container">
         <Video
           v-if="showVideo"
+          ref="jessibucaREF"
           :options="(options as any)"
           :withToken="withToken"
           @on-unmounted="handleCloseFlvPlayUrl"
@@ -41,6 +42,8 @@
 
   const withToken = ref(false);
 
+  const jessibucaREF = ref();
+
   const fingerprintResult = ref<Nullable<GetResult>>(null);
 
   const options = reactive<VideoJsPlayerOptions>({
@@ -92,6 +95,7 @@
   };
 
   const handleCancel = () => {
+    unref(jessibucaREF)?.handleDestroy();
     showVideo.value = false;
     withToken.value = false;
   };