webrtc视频播放器(ZLMRTCClient.js)

引言

在���放实时视频时，视频播放器一般会有延迟，此时，就可以使用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.封装视频播放器组件(子组件)

    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;    }  }}

 4.使用（引入播放器组件）

//HTML  //JSimport WebrtcPlayer from '@/components/webrtc/webrtcPlayer.vue'export default {  directives: { elDragDialog },  components: {    LivePlayer,    WebrtcPlayer  },...}

5.关闭视频流

由于webrtc会不断拉去视频流，如何让关闭视频流可以使用如下方法，具体如上

    if (this.player) {     //关闭流      this.player.pc.close()      this.player = null;    }