forked from drone/command-center-dashboard

罗广辉
2025-04-21 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7
src/components/LiveVideo.vue
@@ -1,7 +1,7 @@
<!--视频直播-->
<template>
  <div class="live-video" ref="JessibucaContainer">
    <video ref="liveVideoRef" class="video-player" controls autoplay muted playsinline>
    <video ref="liveVideoRef" class="video-player" :controls="props.controls" autoplay muted playsinline>
      Your browser is too old which doesn't support HTML5 video.
    </video>
  </div>
@@ -15,11 +15,16 @@
    type: String,
    default: '',
  },
   controls:{
      type:Boolean,
      default: true
   }
});
let liveVideoRef = ref(null);
const play = (url) => {
   pause();
  webrtcPlayer = new window.ZLMRTCClient.Endpoint({
    element: liveVideoRef.value, // video 标签
    debug: true, // 是否打印日志
@@ -73,6 +78,7 @@
    )
};
// 销毁
const pause = () => {
  if (webrtcPlayer) {
    webrtcPlayer.close();
@@ -84,7 +90,6 @@
  (newValue) => {
    if (!newValue) return;
    nextTick(() => {
      pause();
      play(newValue);
    });
  },
@@ -92,6 +97,10 @@
    immediate: true
  }
);
onBeforeUnmount(() => {
   pause()
})
onMounted(() => {
  if (props.videoUrl) {
@@ -113,4 +122,4 @@
    object-fit: cover;
  }
}
</style>
</style>