webRTC屏幕视频语音实时分享

[{"insert":"\n示意图\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/992bd9c058f9247dcdca18ecab02e323_37064.svg"}},{"insert":"\nSTUN server用于获取外部网络地址；TURN server用于传输媒体流，TURN server需要更多带宽\n\n"},{"attributes":{"size":"14px"},"insert":"STUN/TURN服务器搭建"},{"insert":"\n安装\nubuntu16镜像已经带有coturn的源可以直接apt-get安装\napt-get install coturn\n配置\nturnserver -o -a -f -v --mobility -m 2 --max-bps=5242880 --min-port=32355 --max-port=65535 --user=username:credential -r demo -L 公网ip\nSTUN/TURN的默认端口是3478\n打开端口\n添加\nfirewall-cmd --zone=public --add-port=3478/udp --permanent\nfirewall-cmd --zone=public --add-port=3478/tcp --permanent\n重新载入\nfirewall-cmd --reload\n重启防火墙\nsystemctl restart firewalld\n测试\nturnutils_uclient -u username -w credential 公网IP\n除此之外还可以通过https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/测试ice\n测试ice地址打不开可以先打开dns查询拿到dns——dns地址查询：https://tool.chinaz.com/dns/\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/5c0b3e68d692887a373873a9bf1af170_61072_890_631.png"}},{"insert":"\n\n修改host文件——文件路径\n\twindows C:\\Windows\\System32\\drivers\\etc\\hosts\n \tMac 在Finder中同时按“Shift”“Command”“G”三个键，输入“/etc/hosts”\n \tlinux /etc/hosts\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/824f15e964a79f64af303efc2b5ad541_13064_440_219.png"}},{"insert":"\n刷新本地dns缓存就可以访问 \n\tipconfig /flushdns\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/6d8b6020368aaa98a8c0d4a64126f03d_4284_373_111.png"}},{"insert":"\niceserver测试结果\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/78e3e571c85305f45d5ba0a52caedfc6_67111_1169_749.png"}},{"insert":"\n出现relay 和done 代表搭建成功\ncoturn turnserver 文档地址https://github.com/coturn/coturn/wiki/turnserver\n参考文档：https://www.jianshu.com/p/a86ef112dd11\n\nmax-bps是最大带宽\n配置成功后在客服端iceServer会类似是这样\nvar iceServer = {\n \"iceServers\": [{\n \"url\": \"stun:你的ip:3478\"\n }, {\n \"url\": \"turn:你的ip:3478\",\n \"username\": \"username\",\n \"credential\": \"credential\"\n }]\n};\n如果本地是测试在同一个网络里面iceServer可以为null，省去搭建服务端的步骤\nvar iceServer = null\n\n建立连接的过程\n\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/0a86a3845e0326f62c88fdd4c783457f_42754.svg"}},{"insert":"\nsingal channel 使用的是连接组件\n客服端A添加track或者替换track，发起offer，设置本地描述，通过连接组件发送sdp\n客户端B收到offer，设置远端描述，发起answer，通过连接组件发送sdp\n客服端A收到answer，设置远端描述\n事件onicecandidate触发通过连接组件交换ICE Candidate\n至此客户端A就可以推送媒体流到客户端B\n参考文档：\thttps://www.html5rocks.com/en/tutorials/webrtc/infrastructure/\n\t\t\t\t\thttps://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Connectivity\n\t\t\t\t\thttps://blog.51cto.com/ticktick/2348008\n\t\t\t\t\thttps://segmentfault.com/a/1190000022863639\n\n应用实现\ninit函数\n初始化创建RTCPeerConnection，把他添加到一个节点或者window里面\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/a6c5aadbdf2a0b53e9d24049213c7aea_51605_530_255.png"}},{"insert":{"image":"//file3.ih5.cn/v35/files/ea49b3d5c33fc9f3b2b2db6d27d2a2cb_1879_194_56.png"}},{"insert":"\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/e4d1cb64a6a1d3b2edfa14e695e5f8c5_133170_621_562.png"}},{"insert":"\n注册onicecandidate事件，异步调用回调把icecandidate通过连接组件发送交换\n注册ontrack事件，监听添加远端媒体流\n获取视频语音分享函数"},{"insert":{"image":"//file3.ih5.cn/v35/files/b95a1771f2ef2e5e4688e871987eac39_1522_209_26.png"}},{"insert":"\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/94fd450f498f886ee8370ea7f5046621_118736_636_466.png"}},{"insert":"\n获取本地摄像头和麦克风，设置本地媒体流，循环把视频轨道和音频轨道添加到发送端口RTCRtpSender\n回调开始交换信息sdp和ice"},{"insert":{"image":"//file3.ih5.cn/v35/files/c5ccfb506d36abe40105102484833c5f_1151_180_35.png"}},{"insert":"\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/aaf9b23ea93621fec8843b37728f1e59_92262_607_411.png"}},{"insert":"\n发起offer，然后设置本地描述，异步回调把sdp通过连接组件发送出去\n消息处理和转发"},{"insert":{"image":"https://file3.ih5.cn/v35/files/acac6bfd5f5120efc36571e56b8744ea_1322_168_34.png"}},{"insert":"\n"},{"insert":{"image":"https://file3.ih5.cn/v35/files/660f0e04613114c37d5857b355ea10c9_127392_609_532.png"}},{"insert":"\n收到消息设置远端描述，收到消息事件类型是_offer，设置本地描述，创建一个应答createAnswer，发送sdp\n完成交换sdp\n消息事件类型是_ice_candidate，添加ice addIceCandidate\n完成交换ice\n\n添加视频语音分享逻辑\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/309d5bc650d587d2b259a505cfae39f9_31520_878_338.png"}},{"insert":"\n动作组转发连接消息是发送个人消息\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/896f1cfba3b7e5bcc04f40f09d2528ea_49908_890_482.png"}},{"insert":"\n连接添加事件收到个人消息做消息处理和转发\n"},{"insert":{"image":"//file3.ih5.cn/v35/files/8ff5f76a926bd6a07cfc609fae8441b4_23515_869_232.png"}},{"insert":"\n\n应用预览地址：https://v4pre.h5sys.cn/play/q9bDe1HP\n"}]

示意图 STUN server用于获取外部网络地址；TURN server用于传输媒体流，TURN server需要更多带宽STUN/TURN服务器搭建安装ubuntu16镜像已经带有coturn的源可以直接apt-get安装apt-get install coturn配置turnserver -o -a -f -v --mobility -m 2 --max-bps=5242880 --min-port=32355 --max-port=65535 --user=username:credential -r demo -L 公网ipSTUN/TURN的默认端口是3478打开端口添加firewall-cmd --zone=public --add-port=3478/udp --permanentfirewall-cmd --zone=public --add-port=3478/tcp --permanent重新载入firewall-cmd --reload重启防火墙systemctl restart firewalld测试turnutils_uclient -u username -w credential 公网IP除此之外还可以通过https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/测试ice测试ice地址打不开可以先打开dns查询拿到dns——dns地址查询：https://tool.chinaz.com/dns/ 修改host文件——文件路径 windows C:\Windows\System32\drivers\etc\hosts Mac 在Finder中同时按“Shift”“Command”“G”三个键，输入“/etc/hosts” linux /etc/hosts 刷新本地dns缓存就可以访问 ipconfig /flushdns iceserver测试结果出现relay 和done 代表搭建成功coturn turnserver 文档地址https://github.com/coturn/coturn/wiki/turnserver参考文档：https://www.jianshu.com/p/a86ef112dd11max-bps是最大带宽配置成功后在客服端iceServer会类似是这样var iceServer = { "iceServers": [{ "url": "stun:你的ip:3478" }, { "url": "turn:你的ip:3478", "username": "username", "credential": "credential" }]};如果本地是测试在同一个网络里面iceServer可以为null，省去搭建服务端的步骤var iceServer = null建立连接的过程 singal channel 使用的是连接组件客服端A添加track或者替换track，发起offer，设置本地描述，通过连接组件发送sdp客户端B收到offer，设置远端描述，发起answer，通过连接组件发送sdp客服端A收到answer，设置远端描述事件onicecandidate触发通过连接组件交换ICE Candidate至此客户端A就可以推送媒体流到客户端B参考文档： https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Connectivity https://blog.51cto.com/ticktick/2348008 https://segmentfault.com/a/1190000022863639应用实现init函数初始化创建RTCPeerConnection，把他添加到一个节点或者window里面注册onicecandidate事件，异步调用回调把icecandidate通过连接组件发送交换注册ontrack事件，监听添加远端媒体流获取视频语音分享函数获取本地摄像头和麦克风，设置本地媒体流，循环把视频轨道和音频轨道添加到发送端口RTCRtpSender回调开始交换信息sdp和ice 发起offer，然后设置本地描述，异步回调把sdp通过连接组件发送出去消息处理和转发收到消息设置远端描述，收到消息事件类型是_offer，设置本地描述，创建一个应答createAnswer，发送sdp完成交换sdp消息事件类型是_ice_candidate，添加ice addIceCandidate完成交换ice添加视频语音分享逻辑动作组转发连接消息是发送个人消息连接添加事件收到个人消息做消息处理和转发应用预览地址：https://v4pre.h5sys.cn/play/q9bDe1HP

webRTC屏幕视频语音实时分享示意图 STUN server用于获取外部网络地址；TURN server用于传输媒体流，TURN server需要更多带宽STUN/TURN服务器搭建安装ubuntu16镜像已经带有coturn的源可以直接apt-get安装apt-get install coturn配置turnserver -o -a -f -v --mobility -m 2 --max-bps=5242880 --min-port=32355 --max-port=65535 --user=username:credential -r demo -L 公网ipSTUN/TURN的默认端口是3478打开端口添加firewall-cmd --zone=public --add-port=3478/udp --permanentfirewall-cmd --zone=public --add-port=3478/tcp --permanent重新载入firewall-cmd --reload重启防火墙systemctl restart firewalld测试turnutils_uclient -u username -w credential 公网IP除此之外还可以通过https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/测试ice测试ice地址打不开可以先打开dns查询拿到dns——dns地址查询：https://tool.chinaz.com/dns/ 修改host文件——文件路径 windows C:\Windows\System32\drivers\etc\hosts Mac 在Finder中同时按“Shift”“Command”“G”三个键，输入“/etc/hosts” linux /etc/hosts 刷新本地dns缓存就可以访问 ipconfig /flushdns iceserver测试结果出现relay 和done 代表搭建成功coturn turnserver 文档地址https://github.com/coturn/coturn/wiki/turnserver参考文档：https://www.jianshu.com/p/a86ef112dd11max-bps是最大带宽配置成功后在客服端iceServer会类似是这样var iceServer = { "iceServers": [{ "url": "stun:你的ip:3478" }, { "url": "turn:你的ip:3478", "username": "username", "credential": "credential" }]};如果本地是测试在同一个网络里面iceServer可以为null，省去搭建服务端的步骤var iceServer = null建立连接的过程 singal channel 使用的是连接组件客服端A添加track或者替换track，发起offer，设置本地描述，通过连接组件发送sdp客户端B收到offer，设置远端描述，发起answer，通过连接组件发送sdp客服端A收到answer，设置远端描述事件onicecandidate触发通过连接组件交换ICE Candidate至此客户端A就可以推送媒体流到客户端B参考文档： https://www.html5rocks.com/en/tutorials/webrtc/infrastructure/ https://developer.mozilla.org/zh-CN/docs/Web/API/WebRTC_API/Connectivity https://blog.51cto.com/ticktick/2348008 https://segmentfault.com/a/1190000022863639应用实现init函数初始化创建RTCPeerConnection，把他添加到一个节点或者window里面注册onicecandidate事件，异步调用回调把icecandidate通过连接组件发送交换注册ontrack事件，监听添加远端媒体流获取视频语音分享函数获取本地摄像头和麦克风，设置本地媒体流，循环把视频轨道和音频轨道添加到发送端口RTCRtpSender回调开始交换信息sdp和ice 发起offer，然后设置本地描述，异步回调把sdp通过连接组件发送出去消息处理和转发收到消息设置远端描述，收到消息事件类型是_offer，设置本地描述，创建一个应答createAnswer，发送sdp完成交换sdp消息事件类型是_ice_candidate，添加ice addIceCandidate完成交换ice添加视频语音分享逻辑动作组转发连接消息是发送个人消息连接添加事件收到个人消息做消息处理和转发应用预览地址：https://v4pre.h5sys.cn/play/q9bDe1HP