rtmp的拉流方式之ZLMRTCClient

关于直播流rtmp的拉流因为延迟少比较好用（因为手机不支持flash，所以不支持手机浏览器）

zlmrtcclient是老式插件，在vue项目中使用的话需要在index.html里面进行引入,然后在项目中使用

标签代码

 <video  id='video1' class="jswebrtc" autoplay muted="true" width="100%" height="100%"></video>

拉流js代码如下

let player = new ZLMRTCClient.Endpoint({
    element: document.getElementById(video1),// video1 标签
    debug: false,// 是否打印日志
    zlmsdpUrl: url,//流地址
    simulcast: true,
    useCamera: true,
    audioEnable: true,
    videoEnable: true,
    recvOnly: true,
    resolution: {
      w: 0,
      h: 0
    }
  });
  player.on(ZLMRTCClient.Events.WEBRTC_ICE_CANDIDATE_ERROR, function (e) {// ICE 协商出错
    console.log('ICE 协商出错')
  });

  player.on(ZLMRTCClient.Events.WEBRTC_ON_REMOTE_STREAMS, function (e) {//获取到了远端流，可以播放
    console.log('播放成功', e.streams)
  });

  player.on(ZLMRTCClient.Events.WEBRTC_OFFER_ANWSER_EXCHANGE_FAILED, function (e) {// offer anwser 交换失败
    console.log('offer anwser 交换失败', e)
    stop();
  });
  player.on(ZLMRTCClient.Events.WEBRTC_ON_LOCAL_STREAM, function (s) {// 获取到了本地流
    console.log('offer anwser 交换失败',e)
  });

  player.on(ZLMRTCClient.Events.CAPTURE_STREAM_FAILED, function (s) {// 获取本地流失败
    console.log('获取本地流失败')
  });
  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, name)
  });