From ec3c634630d4fc44c01bf4e5902c7f9fee67adab Mon Sep 17 00:00:00 2001
From: chenyao <1219716595@qq.com>
Date: Wed, 02 Apr 2025 18:11:13 +0800
Subject: [PATCH] feat:对接机巢状态和直播功能以及ws
---
src/components/LiveVideo.vue | 97 ++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 96 insertions(+), 1 deletions(-)
diff --git a/src/components/LiveVideo.vue b/src/components/LiveVideo.vue
index 871cf17..69031ef 100644
--- a/src/components/LiveVideo.vue
+++ b/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>
--
Gitblit v1.9.3