feat:对接机巢状态和直播功能以及ws

chenyao

2025-04-02 ec3c634630d4fc44c01bf4e5902c7f9fee67adab

 src/components/LiveVideo.vue

@@ -1,10 +1,105 @@
<!--视频直播-->
<template>
  <div class="live-video">直播组件</div>
  <div class="live-video" ref="JessibucaContainer">
    <video ref="liveVideoRef" controls autoplay muted playsinline>
      Your browser is too old which doesn't support HTML5 video.
    </video>
  </div>
</template>

<script setup>
let webrtcPlayer = null;

const props = defineProps({
  videoUrl: {
    type: String,
    default: '',
  },
});

let liveVideoRef = ref(null);

const play = (url) => {
  webrtcPlayer = new window.ZLMRTCClient.Endpoint({
    element: liveVideoRef.value, // video 标签
    debug: true, // 是否打印日志
    zlmsdpUrl: url, //流地址
    simulecast: false,
    useCamera: false,
    audioEnable: true,
    videoEnable: true,
    recvOnly: true,
    usedatachannel: false,
  });
  webrtcPlayer.on(
    window.ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR,
      (e) => {
        // ICE 协商出错
        console.error('ICE 协商出错')
        // this.eventcallbacK('ICE ERROR', 'ICE 协商出错')
      },
    );
    webrtcPlayer.on(
      window.ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS,
      (e) => {
        //获取到了远端流，可以播放
        console.log('播放成功', e.streams)
        // this.eventcallbacK('playing', '播放成功')
      },
    );
    webrtcPlayer.on(
      window.ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED,
      (e) => {
        // offer anwser 交换失败
        console.error('offer anwser 交换失败', e)
        // this.eventcallbacK('OFFER ANSWER ERROR ', 'offer anwser 交换失败')
        if (e.code == -400 && e.msg == '流不存在') {
          console.log('流不存在')
          this.timer = setTimeout(() => {
            this.webrtcPlayer.close()
            this.play(url)
          }, 100)
        }
      },
    );
    webrtcPlayer.on(
      window.ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM,
      (s) => {
        // 获取到了本地流

        // document.getElementById('selfVideo').srcObject=s;
        // this.eventcallbacK('LOCAL STREAM', '获取到了本地流')
      },
    )
};

const pause = () => {
  if (webrtcPlayer) {
    webrtcPlayer.close();
    webrtcPlayer = null;
  }
};

watch(() => props.videoUrl,
  (newValue) => {
    if (!newValue) return;
    nextTick(() => {
      pause();
      play(newValue);
    });
  },
  {
    immediate: true
  }
);

onMounted(() => {
  if (props.videoUrl) {
    nextTick(() => {
      play(props.videoUrl);
    });
  }
});
</script>

<style scoped>