引言
在播放实时视频时,视频播放器一般会有延迟,此时,就可以使用webrtc来拉流,延迟在1s或者基本没有延迟。与zlm配套的rtc js客户端.(国标)
1.开源项目地址
ZLMRTCClient.js: 与zlm配套的rtc js客户端
ZLMRTCClient.js: 与zlm配套的rtc js客户端https://gitee.com/xiongguangjie/zlmrtcclient.js
2.引入ZLMRTCClient.js
将ZLMRTCClient.js文件,存放到public文件中;
在index.html文件中引入文件;
3.封装视频播放器组件(子组件)
<template>
<!-- webrtc播放器 -->
<video :id="videoId"
ref="jswebrtc"
:controls="controls"
style="width: 100%; height: 100%; object-fit: fill;"></video>
</template>
<script>
export default {
name: 'webrtcPlayer',
props: {
videoId: {
type: String,
default: 'jswebrtc'
},
videoSrc: {
type: String,
default: ''
},
controls: {
type: Boolean,
default: true
}
},
data () {
return {
player: null
}
},
mounted () {
this.$watch('videoSrc', () => {
console.log('videoSrc', this.videoSrc)
if (this.videoSrc) {
this.initVideo(this.videoSrc);
} else {
this.stop()
}
}, { immediate: true, deep: true })
},
methods: {
initVideo (url) {
if (this.player) {
// this.player.destroy();
this.player = null;
}
let videoDom = document.getElementById(this.videoId);
this.player = new ZLMRTCClient.Endpoint({
element: videoDom, // video 标签
debug: true, // 是否打印日志
zlmsdpUrl: url, //流地址
simulcast: true,
useCamera: true,
audioEnable: true,
videoEnable: true,
recvOnly: true,
resolution: {
w: 600,
h: 340
},
usedatachannel: true,
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) { // ICE 协商出错
console.log('ICE 协商出错')
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) { //获取到了远端流,可以播放
console.log('播放成功', e.streams)
videoDom.addEventListener('canplay', function (e) {
videoDom.play();
})
});
this.player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) { // offer anwser 交换失败
console.log('offer anwser 交换失败', e)
// this.player.destroy();
// this.player = null;
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function (s) { // 获取到了本地流
console.log('offer anwser 交换失败', e)
});
this.player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) { // 获取本地流失败
console.log('获取本地流失败')
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_CONNECTION_STATE_CHANGE, function (
state
) { // RTC 状态变化 ,详情参考 https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/connectionState
console.log('当前状态==>', state)
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_OPEN, function (event) {
console.log('rtc datachannel 打开 :', event)
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_MSG, function (event) {
console.log('rtc datachannel 消息 :', event.data)
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_ERR, function (event) {
console.log('rtc datachannel 错误 :', event)
});
this.player.on(ZLMRTCClient.Events.WEBRTC_ON_DATA_CHANNEL_CLOSE, function (event) {
console.log('rtc datachannel 关闭 :', event)
});
},
stop () {
let videoDom = document.getElementById(this.videoId);
videoDom.pause()
this.player = null
}
},
beforeDestroy () {
if (this.player) {
this.player = null;
}
}
}
</script>
<style>
</style>
4.使用(引入播放器组件)
//HTML
<WebrtcPlayer v-if="videoUrl[indexL]"
class="video-window"
:videoSrc="videoUrl[indexL]"
:videoId="'videoId'+indexL"
ref="videoWindow"
:key="indexL">
</WebrtcPlayer>
//JS
import WebrtcPlayer from '@/components/webrtc/webrtcPlayer.vue'
export default {
directives: { elDragDialog },
components: {
LivePlayer,
WebrtcPlayer
},
...
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)