inl-ui 0.1.138 → 0.1.139

package/dist/components/index.cjs

@@ -6379,7 +6379,7 @@ console.log("version:", VERSION$1);
 const Events = Events$1;
 const Endpoint = RTCEndpoint;
 
-class WebRtcMt$1 {
+class WebRtcMt$2 {
   constructor(opt) {
     this.opt = opt;
     this.p_player = vue.ref();
@@ -8962,7 +8962,7 @@ const VideoPlayerV2 = vue.defineComponent({
         ..._prop.cameraConfig
       };
       let url = camera.webrtcTemplateMerged;
-      play = vue.reactive(new WebRtcMt$1({
+      play = vue.reactive(new WebRtcMt$2({
         plays: {
           videoElm: `videoPlayer_${uuid}`,
           mediaServerAddr: camera.mediaServerPo.url,
@@ -10676,7 +10676,7 @@ const CloudVideo = vue.defineComponent({
 var cloudVideo = installComponent(CloudVideo, "cloud-video");
 
 const appName = "live";
-class WebRtcMt {
+class WebRtcMt$1 {
   constructor(opt) {
     this.init(opt);
   }
@@ -10876,7 +10876,7 @@ const VideoPlayerV1 = vue.defineComponent({
     const init = () => {
       play = null;
       let camera = videoInfo2.value;
-      play = new WebRtcMt({
+      play = new WebRtcMt$1({
         plays: {
           videoElm: `videoPlayer_${uuid}`,
           mediaServerAddr: camera.mtVideoServerAddress,
@@ -10948,6 +10948,413 @@ const VideoPlayerV1 = vue.defineComponent({
 });
 var videoPlayerV1 = installComponent(VideoPlayerV1, "video-player-v1");
 
+class WebRtcMt {
+  constructor(opt) {
+    this.opt = opt;
+    this.init(opt);
+  }
+  opt;
+  p_player;
+  // 返回播放视频数据
+  instance = axios__default["default"].create({
+    timeout: 6e4
+  });
+  playerMap = /* @__PURE__ */new Map();
+  streamMap = /* @__PURE__ */new Map();
+  mediaServerAddrMap = /* @__PURE__ */new Map();
+  config = {
+    w: 100,
+    h: 100,
+    endpointConfig: {}
+  };
+  playback = false;
+  // 根据参数配置组装相关url
+  createRtspUrl(plays) {
+    const {
+      cameraIp,
+      cameraRtspPort,
+      cameraChannel,
+      cameraStream,
+      mediaServerAddr,
+      addRtspProxyUrl
+    } = plays;
+    const stream = !this.playback ? `v${cameraIp}-${cameraRtspPort}-${cameraChannel}-${cameraStream}` : cameraStream;
+    return {
+      stream,
+      addRtspProxyUrl,
+      sdpUrl: mediaServerAddr
+    };
+  }
+  // 初始化
+  init(opt) {
+    if (opt.endpointConfig) {
+      this.config.endpointConfig = opt.endpointConfig;
+    }
+    if (opt.h) this.config.h = opt.h;
+    if (opt.w) this.config.w = opt.w;
+    if (opt.playback) this.playback = opt.playback;
+    if (Object.prototype.toString.call(opt.plays) === "[object Object]") {
+      this.p_player = this.createVideo(opt.plays);
+    } else {
+      for (const i of opt.plays) {
+        this.createVideo(i);
+      }
+    }
+  }
+  // 拉流创建播放器
+  createVideo(plays) {
+    this.mediaServerAddrMap.set(plays.videoElm, plays);
+    const {
+      addRtspProxyUrl
+    } = this.createRtspUrl(plays);
+    return new Promise((resolve, reject) => {
+      this.instance.get(addRtspProxyUrl).then(res => {
+        if (res.data.code === 0) {
+          plays.key = res.data.data?.key;
+          this.startPlay(plays).then(() => {
+            resolve(res.data);
+          });
+        } else {
+          this.mediaServerAddrMap.delete(plays.videoElm);
+          reject();
+          this.log("err", "\u4ECE\u670D\u52A1\u7AEF\u62C9\u6D41\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
+        }
+      });
+    });
+  }
+  log(type, text) {
+    switch (type) {
+      case "err":
+        throw new Error(text);
+      case "warn":
+        console.warn(text);
+        break;
+      default:
+        console.info(text);
+    }
+  }
+  // 停止播放0
+  stopPlay(id) {
+    if (id) {
+      let player = this.playerMap.get(id);
+      if (player) {
+        player.close();
+        this.playerMap.delete(id);
+        this.mediaServerAddrMap.delete(id);
+        player = null;
+      }
+    } else {
+      this.playerMap.forEach(item => {
+        item.close();
+        item = null;
+      });
+      this.playerMap.clear();
+      this.mediaServerAddrMap.clear();
+    }
+  }
+  // 注册事件监听
+  playEvent(player, videoElm, sdpUrl) {
+    player.on(Events.WEBRTC_ICE_CANDIDATE_ERROR, e => {
+      this.log("err", "ICE \u534F\u5546\u51FA\u9519");
+      this.rePlay(videoElm);
+    });
+    player.on(Events.WEBRTC_ON_REMOTE_STREAMS, e => {});
+    player.on(Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, e => {
+      this.log("warn", `offer anwser \u4EA4\u6362\u5931\u8D25\uFF0C\u83B7\u53D6\u89C6\u9891\u6D41\u5931\u8D25, ${e}`);
+      this.rePlay(videoElm);
+    });
+    player.on(Events.DISCONNECTED, e => {
+      this.log("warn", `\u4E8B\u4EF6\u68C0\u6D4B\u5230\u8FDE\u63A5\u65AD\u5F00${videoElm}`);
+      this.rePlay(videoElm);
+    });
+    player.on(Events.LOST_SERVER, e => {
+      this.log("warn", `\u4E8B\u4EF6\u68C0\u6D4B\u5230\u89C6\u9891\u670D\u52A1\u5668\u4E22\u5931${videoElm}`);
+      this.rePlay(videoElm);
+    });
+    player.on(Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, state => {
+      if (state === "disconnected" || state === "failed") {
+        this.rePlay(videoElm);
+      }
+    });
+  }
+  // 重播
+  rePlay(videoElm) {
+    this.stopPlay();
+    setTimeout(() => {
+      this.init(this.opt);
+    }, 3e3);
+  }
+  // 播放
+  play(videoElm) {
+    const plays = this.mediaServerAddrMap.get(videoElm);
+    const {
+      sdpUrl
+    } = this.createRtspUrl(plays);
+    const {
+      w,
+      h
+    } = this.config;
+    const EndpointConfig = {
+      element: document.getElementById(videoElm),
+      debug: false,
+      zlmsdpUrl: sdpUrl,
+      simulcast: false,
+      useCamera: false,
+      audioEnable: false,
+      videoEnable: true,
+      recvOnly: true,
+      resolution: {
+        w,
+        h
+      }
+    };
+    const player = new Endpoint({
+      ...Object.assign(EndpointConfig, this.config.endpointConfig)
+    });
+    this.playEvent(player, videoElm, sdpUrl);
+    this.playerMap.set(videoElm, player);
+  }
+  delStream(videoElm) {
+    const plays = this.mediaServerAddrMap.get(videoElm);
+    if (!plays) return;
+    const {
+      secret,
+      key,
+      mediaServerUrl
+    } = plays;
+    const url = `${mediaServerUrl}/index/api/delStreamProxy?secret=${secret}&key=${key}`;
+    this.instance.get(url);
+  }
+  // 开始播放
+  startPlay(plays) {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        this.play(plays.videoElm);
+        resolve(true);
+      }, 100);
+    });
+  }
+}
+
+function formatTime(s) {
+  const minute = `${Math.floor(s / 1e3 / 60)}`.padStart(2, "0");
+  const second = `${Math.floor(s / 1e3 % 60)}`.padStart(2, "0");
+  return `${minute}:${second}`;
+}
+
+const VideoPlayBack = vue.defineComponent({
+  props: {
+    start: {
+      type: Number,
+      required: true
+    },
+    stop: {
+      type: Number,
+      required: true
+    },
+    // 暂时没用
+    showControl: {
+      type: Boolean,
+      default: false
+    },
+    cameraId: {
+      type: String,
+      required: true
+    },
+    cameraCode: {
+      type: String,
+      required: true
+    },
+    autoPlay: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, {
+    expose
+  }) {
+    let timer;
+    const videoRef = vue.ref();
+    const cpnRef = vue.ref();
+    const dom = vue.computed(() => `${props.cameraId + props.cameraCode}`);
+    const isLoading = vue.ref(false);
+    const isError = vue.ref(false);
+    const player = vue.ref();
+    const fullDuration = vue.computed(() => props.stop - props.start);
+    core.useMouseInElement(videoRef);
+    const {
+      isFullscreen,
+      toggle: toggleFullscreen
+    } = core.useFullscreen(cpnRef);
+    const isPlaying = vue.ref(false);
+    const currentPlayTime = vue.ref(0);
+    const currentPlayPercent = vue.ref(0);
+    const startTime = vue.ref(props.start);
+    const init = async () => {
+      isLoading.value = true;
+      isError.value = false;
+      stopStream();
+      const params = {
+        buzKey: "playback_" + props.cameraId,
+        cUuid: props.cameraId,
+        startDt: startTime.value,
+        drSec: parseInt(`${(props.stop - startTime.value) / 1e3}`, 0)
+      };
+      axios__default["default"].get(`/api/vms/v1/recorder/generatePlaybackWebrtcUrl`, {
+        params,
+        headers: {
+          token: sessionStorage.getItem("token") || ""
+        }
+      }).then(async ({
+        data
+      }) => {
+        const {
+          addStreamUrl,
+          stream,
+          mediaServerUrl,
+          secret
+        } = data;
+        const playUrl = mediaServerUrl + "/index/api/webrtc?app=live&stream=" + stream + "&type=play";
+        const plays = {
+          videoElm: dom.value,
+          mediaServerAddr: playUrl,
+          mediaServerUrl,
+          cameraIp: "",
+          cameraRtspPort: "",
+          cameraChannel: "",
+          cameraStream: stream,
+          addRtspProxyUrl: addStreamUrl,
+          secret
+        };
+        if (!player.value) {
+          player.value = new WebRtcMt({
+            plays,
+            playback: true
+          });
+        } else {
+          player.value.p_player = player.value.createVideo(plays);
+        }
+        player.value.p_player.then(async () => {
+          const playerEvent = player.value.playerMap.get(dom.value);
+          playerEvent.on(Events.WEBRTC_ON_REMOTE_STREAMS, e => {
+            timer && clearInterval(timer);
+            isLoading.value = false;
+            isPlaying.value = true;
+            timer = setInterval(() => {
+              if (!isPlaying.value) return;
+              const isOver = fullDuration.value - currentPlayTime.value <= 1e3;
+              if (isOver && isPlaying.value) {
+                currentPlayTime.value = 0;
+                currentPlayPercent.value = 0;
+                togglePlay();
+              } else {
+                currentPlayTime.value += 1e3;
+                currentPlayPercent.value = Math.floor(currentPlayTime.value / fullDuration.value * 100);
+              }
+            }, 1e3);
+          });
+        }).catch(() => {
+          isLoading.value = false;
+          isError.value = true;
+          setTimeout(() => {
+            init();
+          }, 5e3);
+        });
+      }).catch(() => {
+        isLoading.value = false;
+        isError.value = true;
+      });
+    };
+    const togglePlay = () => {
+      if (isPlaying.value) {
+        stopStream();
+        startTime.value = props.start + currentPlayTime.value;
+        isPlaying.value = !isPlaying.value;
+      } else {
+        init();
+      }
+    };
+    const handleSetTime = () => {
+      stopStream();
+      const percent = currentPlayPercent.value;
+      const passedTime = Math.round(fullDuration.value * (percent / 100));
+      currentPlayTime.value = passedTime;
+      startTime.value = props.start + passedTime;
+      init();
+    };
+    const stopStream = (video = dom.value) => {
+      timer && clearInterval(timer);
+      player.value?.delStream(video);
+      player.value?.stopPlay(video);
+    };
+    const timeChange = () => {
+      currentPlayPercent.value = 0;
+      handleSetTime();
+    };
+    vue.watch(() => props.cameraId, (n, o) => {
+      if (o) {
+        currentPlayPercent.value = 0;
+        currentPlayTime.value = 0;
+        startTime.value = props.start;
+        stopStream(`${o + props.cameraCode}`);
+        init();
+      }
+    });
+    expose({
+      timeChange
+    });
+    vue.onMounted(() => {
+      if (props.autoPlay) {
+        init();
+      }
+    });
+    vue.onBeforeUnmount(stopStream);
+    return () => vue.createVNode("div", {
+      "ref": cpnRef,
+      "class": "video-play-back-cpn"
+    }, [isError.value ? vue.createVNode("div", {
+      "style": {
+        width: "100%",
+        textAlign: "center"
+      }
+    }, [vue.createVNode("img", {
+      "style": {
+        width: "50%"
+      },
+      "src": "/micro-assets/platform_web/networkAnomaly.png",
+      "alt": ""
+    }, null)]) : vue.createVNode(vue.Fragment, null, [vue.createVNode(vue.resolveComponent("a-spin"), {
+      "spinning": isLoading.value
+    }, {
+      default: () => [vue.createVNode("video", {
+        "ref": videoRef,
+        "id": dom.value,
+        "muted": true,
+        "autoplay": true
+      }, null)]
+    }), vue.createVNode("div", {
+      "class": "operation"
+    }, [vue.createVNode("span", {
+      "class": "btn-play",
+      "onClick": togglePlay
+    }, [isPlaying.value ? vue.createVNode(iconsVue.PauseCircleOutlined, null, null) : vue.createVNode(iconsVue.PlayCircleFilled, null, null)]), vue.createVNode("div", {
+      "class": "progress"
+    }, [vue.createVNode("span", {
+      "class": "duration"
+    }, [formatTime(currentPlayTime.value)]), vue.createVNode(vue.resolveComponent("a-slider"), {
+      "tooltipVisible": false,
+      "value": currentPlayPercent.value,
+      "onUpdate:value": $event => currentPlayPercent.value = $event,
+      "onAfterChange": handleSetTime
+    }, null), vue.createVNode("span", {
+      "class": "duration"
+    }, [formatTime(fullDuration.value)])]), vue.createVNode("span", {
+      "class": "btn-fullscreen",
+      "onClick": toggleFullscreen
+    }, [isFullscreen.value ? vue.createVNode(iconsVue.FullscreenExitOutlined, null, null) : vue.createVNode(iconsVue.FullscreenOutlined, null, null)])])])]);
+  }
+});
+
 const props$2 = {
   active: {
     type: String || Number,
@@ -14019,6 +14426,7 @@ exports.QueryFormContainer = index$4;
 exports.SszComment = index;
 exports.VideoBox = videoBox;
 exports.VideoBoxV2 = VideoBoxV2$1;
+exports.VideoPlayback = VideoPlayBack;
 exports.VideoPlayerV1 = videoPlayerV1;
 exports.VideoPlayerV2 = videoPlayerV2;
 exports.getDetailContainer = getDetailContainer;

package/dist/components/index.d.ts

@@ -705,6 +705,64 @@ declare const _default$7: vue.DefineComponent<{
     showInfo: boolean;
 }, {}>;
 
+/**
+ * 视频回放
+ */
+declare const VideoPlayBack: vue.DefineComponent<{
+    start: {
+        type: NumberConstructor;
+        required: true;
+    };
+    stop: {
+        type: NumberConstructor;
+        required: true;
+    };
+    showControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cameraId: {
+        type: StringConstructor;
+        required: true;
+    };
+    cameraCode: {
+        type: StringConstructor;
+        required: true;
+    };
+    autoPlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, () => vue_jsx_runtime.JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    start: {
+        type: NumberConstructor;
+        required: true;
+    };
+    stop: {
+        type: NumberConstructor;
+        required: true;
+    };
+    showControl: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    cameraId: {
+        type: StringConstructor;
+        required: true;
+    };
+    cameraCode: {
+        type: StringConstructor;
+        required: true;
+    };
+    autoPlay: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    showControl: boolean;
+    autoPlay: boolean;
+}, {}>;
+
 declare const _default$6: vue.DefineComponent<{
     active: {
         type: PropType<string>;
@@ -1201,4 +1259,4 @@ declare const LlmChatBox: vue.DefineComponent<{
     withSpeech: boolean;
 }, {}>;
 
-export { _default$c as AlarmVideo, _default$e as ChangeThemeSelect, _default$f as ChildLayout, _default$b as CloudVideo, _default$k as Demo, _default$1 as FontSelect, _default$6 as HeaderMenu, _default$j as IconFont, _default$5 as IconSelect, ImportModal, _default$i as Layout, _default$g as LayoutTable, LlmChatBox, _default$h as Login, _default$2 as ParamManager, ParamManagerV2, _default$3 as PeopleSelect, _default$d as PollingPlay, _default$4 as QueryFormContainer, _default as SszComment, _default$8 as VideoBox, _default$7 as VideoBoxV2, _default$9 as VideoPlayerV1, _default$a as VideoPlayerV2, getDetailContainer, getMenuDetail };
+export { _default$c as AlarmVideo, _default$e as ChangeThemeSelect, _default$f as ChildLayout, _default$b as CloudVideo, _default$k as Demo, _default$1 as FontSelect, _default$6 as HeaderMenu, _default$j as IconFont, _default$5 as IconSelect, ImportModal, _default$i as Layout, _default$g as LayoutTable, LlmChatBox, _default$h as Login, _default$2 as ParamManager, ParamManagerV2, _default$3 as PeopleSelect, _default$d as PollingPlay, _default$4 as QueryFormContainer, _default as SszComment, _default$8 as VideoBox, _default$7 as VideoBoxV2, VideoPlayBack as VideoPlayback, _default$9 as VideoPlayerV1, _default$a as VideoPlayerV2, getDetailContainer, getMenuDetail };