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)
  });
复制代码

 文笔不好,自己做记录用的,有需要的可以拿去用

posted @   小样459  阅读(1182)  评论(3编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· .NET10 - 预览版1新功能体验(一)
点击右上角即可分享
微信分享提示