WebRTC支持的功能探索 by duoduo, 该项目由原 mykoa 项目独立出来
目前所有功能都是基于最新chrome测试，后期会兼容其他浏览器
- 实时音视频 video online demo
- 实时桌面共享 desktop share online demo
需安装谷歌插件请点击下载 - 文件实时并发传输 RTCDataChannel online demo
- Blob / ArrayBuffer 实时传输
- 白板交互
- stats数据分析
- koa(不多说)
- webpack打包，由原项目 my-wp2 改进过来使用
- websockt server端搭建(不再依赖socket.io)
- git clone
- npm i -d
- 自己创建秘钥key，在当前目录新建keys文件夹，将秘钥key放进去
- npm run dev 开启webpack监听编译
- npm start 开启服务器
- 启动后访问
https://${ip}:8081/webrtc即可- 注: 非https模式下由于浏览器安全限制，将无法捕捉摄像头和麦克风
- 线上打包: npm run build
- 捕捉本地摄像头麦克风: navigator.mediaDevices.getUserMedia
- 兼容性: navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia
- 建立rtc传输连接: RTCPeerConnection
- 兼容性: RTCPeerConnection || webkitRTCPeerConnection || mozRTCPeerConnection
- 建立任意数据实时传输通道(目前只支持JSON和ArrayBuffer): RTCDataChannel
- 具体功能点文档请前往 wp 目录app下的源码查看readme.me
- 自己封装的rtcSDK脚本
目前只支持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链接建立完成, 开始传输实时数据
- 更新了老的代码，使用新的api
- 新增桌面共享功能，将会单独抽出来
- dataChannel默认值开启一个长连接，特殊数据传输(ArrayBuffer|Blob)只有需要数据传输的时候开启，数据传输完毕关闭，并且数据通道由发起方发送给接收方
- 支持多文件同时传输，开启多个通道，通道传输完毕自动关闭销毁
- 支持blob格式数据切块传输，demo里面是canvas导出blob进行传输，对端接收还原
- 更改服务端全局console.log日志，输出到日志文件
- 使用webaudio对音频进行各种音效处理
- 控制摄像头和麦克风
- 视频处理
- 本地录屏功能
- ui完善
- 多人尝试
- 兼容safari
- promise
- video.srcObject