相关推荐recommended
webrtc视频播放器(ZLMRTCClient.js)
作者:mmseoamin日期:2024-04-27

引言

在播放实时视频时,视频播放器一般会有延迟,此时,就可以使用webrtc来拉流,延迟在1s或者基本没有延迟。与zlm配套的rtc js客户端.(国标)

1.开源项目地址

ZLMRTCClient.js: 与zlm配套的rtc js客户端

ZLMRTCClient.js: 与zlm配套的rtc js客户端webrtc视频播放器(ZLMRTCClient.js),icon-default.png?t=N7T8,第1张https://gitee.com/xiongguangjie/zlmrtcclient.js

按照 下图执行命令行,则自动生成ZLMRTCClient.js文件

webrtc视频播放器(ZLMRTCClient.js),第2张

2.引入ZLMRTCClient.js

将ZLMRTCClient.js文件,存放到public文件中;

在index.html文件中引入文件;

webrtc视频播放器(ZLMRTCClient.js),第3张webrtc视频播放器(ZLMRTCClient.js),第4张

3.封装视频播放器组件(子组件)


 4.使用(引入播放器组件)

//HTML
 
 
//JS
import 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;
    }