引言
在播放实时视频时，视频播放器一般会有延迟，此时，就可以使用webrtc来拉流，延迟在1s或者基本没有延迟。与zlm配套的rtc js客户端.(国标)
1.开源项目地址
ZLMRTCClient.js: 与zlm配套的rtc js客户端
ZLMRTCClient.js: 与zlm配套的rtc js客户端https://gitee.com/xiongguangjie/zlmrtcclient.js
按照 下图执行命令行，则自动生成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;" muted></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) { console.log('播放器', this.player) //关闭流 if (this.player) { this.player.pc.close() 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.pc.close() this.player = null } }, beforeDestroy () { if (this.player) { //关闭流 this.player.pc.close() 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 }, ... }
5.关闭视频流文章来源：https://www.toymoban.com/news/detail-513512.html
由于webrtc会不断拉去视频流，如何让关闭视频流可以使用如下方法，具体如上文章来源地址https://www.toymoban.com/news/detail-513512.html
if (this.player) {
//关闭流
this.player.pc.close()
this.player = null;
}
到了这里，关于webrtc视频播放器(ZLMRTCClient.js)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
