From 2800fa4f32f3900509cb4d6eefaf2bfaf54efdd7 Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Mon, 21 Apr 2025 18:29:09 +0800
Subject: [PATCH] fix: 天气显示
---
src/components/LiveVideo.vue | 115 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 112 insertions(+), 3 deletions(-)
diff --git a/src/components/LiveVideo.vue b/src/components/LiveVideo.vue
index 871cf17..9a2a256 100644
--- a/src/components/LiveVideo.vue
+++ b/src/components/LiveVideo.vue
@@ -1,16 +1,125 @@
<!--视频直播-->
<template>
- <div class="live-video">直播组件</div>
+ <div class="live-video" ref="JessibucaContainer">
+ <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>
</template>
<script setup>
+let webrtcPlayer = null;
+const props = defineProps({
+ videoUrl: {
+ 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, // 是否打印日志
+ 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(() => {
+ play(newValue);
+ });
+ },
+ {
+ immediate: true
+ }
+);
+
+onBeforeUnmount(() => {
+ pause()
+})
+
+onMounted(() => {
+ if (props.videoUrl) {
+ nextTick(() => {
+ play(props.videoUrl);
+ });
+ }
+});
</script>
-<style scoped>
+<style lang="scss" scoped>
.live-video{
width: 100%;
height: 100%;
color: #fff;
+ .video-player {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3