参与文档及其思路
所有参考来至于火狐开发者,其中没有讲解全面,需要结合demo https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Signaling_and_video_calling
2.思路,难点,重点
1.主叫端,被叫端。主叫端开启视频流,将sdp通过socket发送给被叫端,被叫端通过sdp初始化。被叫端通过socket发送给主叫端自己已经应答。主叫端
var desc = new RTCSessionDescription(data.sdp); myPeerConnection.setRemoteDescription(desc).catch(function(e){ console.error(e); });,
与此同时,主叫端还需要发送handleICECandidateEvent给被叫端,被叫端
var candidate = new RTCIceCandidate(dcand); myPeerConnection.addIceCandidate(candidate) .catch(function(e){ console.error(e); });
最后两端各自handleTrackEvent,设置对方的视频流。
问题处理记录
1.ios微信内置浏览器黑屏的问题 为iOS版微信浏览器刚刚支持webrtc的缘故,只有一则3月10多日的新闻说随着ios的更新,采用wkwebview的微信浏览器也已经支持webrtc,再没有其它有用的资料。 后来看了一个使用webrtc支持ios版微信浏览器的网站,发现玄机竟然是下面的代码
document.addEventListener("WeixinJSBridgeReady", function () {document.getElementById("remoteVideo").play(); }, false);
加上去以后,测试OK,可以不用加班了 值得注意的是,WeixinJSBridgeReady这个事件会在页面加载后马上触发,因此,上面的这个代码最好写在
window的load事件里面
函数体中,所以video标签也要提前写在html网页中,不要等webrtc通道建立后再去动态创建video。 顺便贴一下我的video标签使用的属性
开发任务
1.页面加入各个操作入口,两到三个的用户点击链接登录入口。
2.debug输出框页面上显示。加入清除按钮
3.页面上加入各个测试按钮,例如:获取本地摄像头列表,麦克风列表,测试推流
4.两个固定账号的视频链接
5.房间相关操作:获取房间用户列表,向房间里的所有用户发送消息,用户类型指定,有的用户可以作为房间的中转服务器
6.外围:登录、注册、授权