js做webrtc直播的心得总结

正文开始

过年这一个月 研究了视频直播 点对点视频的功能。

握手流程:

先要创建一个RTCPeerConnection对象 在这个conn连接里添加音频 视频轨道。
conn里还要监听 icecandidate 发给对方。
 _connection.addEventListener('icecandidate', handleConnection);
 conn监听接收到的轨道信息 
_connection.addEventListener('track', gotRemoteMediaStream);


然后由一方a创建 offer: createOffer ,保存,setLocalDescription
发送给对方b。对方b接受到后 conn.setRemoteDescription ,然后 conn.createAnswer() ,conn.setLocalDescription,然后把 answer 发给a, a收到answer 后 conn.setRemoteDescription
~~~~

#####案例1: a发起视频通话 b接受 
> 网络环境 a在wifi网络  b是4G网络 

a发起offer
 发现b在加入连接后, 无法正常显示接受到的track流。
 反过来 b在 发起视频 发起offer,则双方都可以显示视频流


> 网络环境  wifi网络 内网或外网

不管谁发起视频 都可以正常显示。


#####案例2: a发起视频直播,播放本地的电影视频给别人看, b,c,d用户加入 看直播

网络环境的问题也是同上,必须让移动端接收方(b,c,d用户)主动发起offer请求 同时需要提供自己本地的媒体流。虽然只是看直播,但苹果系统就是这么奇葩,必须共享媒体流。

共享媒体流不容易实现:

方法1: 想利用本地的空白视频作为mediastream对象提交到conn
但发现ios系统的safari和谷歌浏览器都不支持video.captureStream()方法。此方案失败。

方法2:

var audioCtx = new (window.webkitAudioContext || window.AudioContext)(); let dest = audioCtx.createMediaStreamDestination(); let aStream = dest.stream;

或这样创建:

var stream_media = new MediaStream(); stream_media .addTrack(audioTrack_media); stream_media .addTrack(videoTrack_media);

可以创建一个没有任何轨道的 mediaStream对象
但因为没有轨道,移动网络也是显示黑屏的。
所以这个方法也卡在:没有轨道数据。

方法3:【最终方案】 
 只能让观众bcd也授权浏览器查看自己的浏览器设备(摄像头或麦克风)。
navigator.mediaDevices.getUserMedia
结果正常可以看直播。
就是每次看别人的视频,浏览器会提示授权访问麦克风。上方都会显示自己视频中的奇怪图标。
于是加个倒计时 1秒 关闭本地麦克风流。

setTimeout (function () { // console.log('观众要立即关闭本地麦克风流,不用一直开着.'); if(localVideoStream) { localVideoStream.getTracks().forEach((track) => { track.stop() }) } }, 100); ~~~

正文结束

js 正则替换返回值做回调函数 webrt双方握手初始化的描述原理