rtcPlayer.vue
3.86 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<template>
<div id="rtcPlayer">
<video id='webRtcPlayerBox' controls autoplay style="text-align:left;">
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
</template>
<script>
import watermark from '../../../utils/waterMark.js';
import userService from '../service/UserService';
let webrtcPlayer = null;
export default {
name: 'rtcPlayer',
data() {
return {
timer: null,
watermarkTimer: null,
config: {
userName: userService.getUser().username,
nowTime: "2024-03-01 12:00:00"
}
};
},
props: ['videoUrl', 'error', 'hasaudio'],
mounted() {
let paramUrl = decodeURIComponent(this.$route.params.url)
this.$nextTick(() => {
if (typeof (this.videoUrl) == "undefined") {
this.videoUrl = paramUrl;
}
console.log("初始化时的地址为: " + this.videoUrl)
this.play(this.videoUrl)
})
},
watch: {
videoUrl(newData, oldData) {
this.pause();
this.play(newData);
},
immediate: true
},
created() {
this.$nextTick(() => {
this.rtcPlayer = document.getElementById("rtcPlayer");
this.watermarkTimer = watermark(this.rtcPlayer, this.config);
})
},
methods: {
play: function (url) {
webrtcPlayer = new ZLMRTCClient.Endpoint({
element: document.getElementById('webRtcPlayerBox'),// video 标签
debug: true,// 是否打印日志
zlmsdpUrl: url,//流地址
simulecast: false,
useCamera: false,
audioEnable: true,
videoEnable: true,
recvOnly: true,
})
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, (e) => {// ICE 协商出错
console.error('ICE 协商出错')
this.eventcallbacK("ICE ERROR", "ICE 协商出错")
});
webrtcPlayer.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, (e) => {//获取到了远端流，可以播放
console.log('播放成功', e.streams)
this.eventcallbacK("playing", "播放成功")
});
webrtcPlayer.on(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(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, (s) => {// 获取到了本地流
// document.getElementById('selfVideo').srcObject=s;
this.eventcallbacK("LOCAL STREAM", "获取到了本地流")
});
},
pause: function () {
if (webrtcPlayer != null) {
webrtcPlayer.close();
webrtcPlayer = null;
}
},
eventcallbacK: function (type, message) {
console.log("player 事件回调")
console.log(type)
console.log(message)
}
},
destroyed() {
clearTimeout(this.timer);
clearInterval(this.watermarkTimer);
},
}
</script>
<style>
.LodingTitle {
min-width: 70px;
}
#rtcPlayer {
width: 100%;
}
#webRtcPlayerBox {
width: 100%;
max-height: 56vh;
background-color: #000;
}
/* 隐藏logo */
/* .iconqingxiLOGO {
display: none !important;
} */
</style>