:rabbit: WebRTC 朵朵实验室
WebRTC支持的功能探索 by duoduo, 该项目由原 mykoa 项目独立出来
目前所有功能都是基于最新chrome测试,后期会兼容其他浏览器
需安装谷歌插件
请点击下载https://${ip}:8081/webrtc
即可目前只支持2个client的p2p链接,即每个房间只支持2个人
- 角色A: 第一个进入房间的人,处于等待状态,是p2p链接发起方
- 角色B: 第二个进入房间的人,是配p2p链接接收方
- 链接步骤:
- 角色成功加入房间(失败的时候另寻房间)
- 初始化本地媒体流
- 检测是否有摄像头,是否支持
- 获取本地视频流, navigator.getUserMedia
- 初始化本地视频流信息, 以video标签进行渲染
- 初始化本地p2p链接信息: new RTCPeerConnection(第三方STUN服务器配置信息);
- 本地peer链接信息加入本地视频流进行渲染
- 初始化本地peer的一系列事件
- onicecandidate: 本地设置sdp时会触发, 生成保存自己的候选人信息
- 通过服务器发送 candidate 给对方
- onaddstream: 当有流过来时触发, 接收流并渲染
- 如果房间内人数为2,服务器通知房间里的A发起p2p连接请求
- A创建自己的链接邀请信息, 设置本地链接信息sdp, 通过服务器发送给B
- createOffer: 创建本地链接信息
- setLocalDescription: 将offer设置为本地链接信息sdp, 并且触发本地peer的onicecandidate事件
- server转发offer链接邀请信息给B, 触发B的onOffer方法进行处理
- setRemoteDescription: 接收A的链接邀请,并设置A的描述信息, XXX.setRemoteDescription(new RTCSessionDescription(offer))
- createAnswer: 创建回应,并存储本地的回应信息, 并将回应发送给server
- setLocalDescription, 将自己的创建的answer设置为本地连接信息sdp, 触发自己的本地onicecandidate事件
- server转发候选人信息candidate, 触发B的onNewPeer(自定义的方法)
- addIceCandidate: 将A的候选人信息加入自己本地, XXX.addIceCandidate(new RTCIceCandidate(candidate));
- A通过server接收B发出的answer, 触发自己的onAnswer
- 设置B的描述信息, XXX.setRemoteDescription(new RTCSessionDescription(answer));
- AB链接建立完成, 开始传输实时数据