过年这一个月 研究了视频直播 点对点视频的功能。
握手流程:
先要创建一个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);
~~~