通过WebRTC技术实现点对点通信
WebRTC是一个实验性技术。
因为该技术的规格还没有稳定下来,在各浏览器中必须通过检查属性表的前缀来正确使用,例如:在Chrome中使用 webkitRTCPeerConnection,在Firefox中使用mozRTCPeerConnection,前缀不一样。另外请注意,实验性技术的语法和行为有可能在浏览器未来的版本中改变。
概述
WebRTC API被设计为允许JS应用程序通过浏览器在用户之间创建实时的音频,视频和/或数据信道连接,或与支持WebRTC协议的服务器通信。它还利用navigator.mozGetUserMedia()函数方法来访问麦克风和摄像头数据(getUserMedia()函数已经在标准化媒体捕获小组日程上)。
标准化进程
不断变化的WebRTC规范主要来源是W3的 和 规范,以及在IETF的各种草案,主要是,,和其他几个组。在Chrome和Firefox实现的WebRTC功能,大部分代码是基于谷歌在上的开源。
提示:如果在浏览器安装了FlashBlock,当前版本的FlashBlock插件可能默认会拦截HTML5的video标签组件;如果要在页面上使用WebRTC的视频功能,需要设置FlashBlock允许该video组件,或者在该页面禁用FlashBlock工具。
教程及实例
在 上有一个非常不错的介绍WebRTC基本功能的教程。在 上有一个基本的测试页面的集合,用以支持发展webrtc的发展。
你可以使用Chrome在上做一个很简单的P2P的通信实验,体验WebRTC的点到点通信技术。
有一篇 更形象的描述了建立RTCPeerConnection过程中发生了什么(在阅读所有关于WebRTC的骇客文章):
![演示WebRTC过程](https://hacks.mozilla.org/wp-content/uploads/2013/05/webRTC-BasicsOfHowItWorks2.png)
规范列表
<table> <tbody> <tr> <th>规范</th> <th>状态</th> <th>说明</th> </tr> <tr> <td>WebRTC API</td> <td>在定义中</td> <td> </td> </tr> <tr> <td>getUserMedia API</td> <td>在定义中</td> <td><a href="http://dev.w3.org/2011/webrtc/editor/getusermedia.html" title="http://dev.w3.org/2011/webrtc/editor/getusermedia.html">http://dev.w3.org/2011/webrtc/editor/getusermedia.html</a></td> </tr> </tbody> </table>
浏览器兼容
<table> <caption>PC桌面浏览器</caption> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>Yes<span class="inlineIndicator prefixBox prefixBoxInline" title="prefix">webkit</span></td> <td>Firefox 22</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> </tr> <tr> <td>DataChannels</td> <td>Will be in Chrome 29</td> <td>Firefox 22</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> </tr> </tbody> </table> </table>
<table> <caption>移动端浏览器</caption> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Preliminary support</td> <td>Via Chrome (behind flag)</td> <td>Activated on Nightly and Aurora</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> </tr> <tr> <td>DataChannels</td> <td>Compatibility unknown; please update this.</td> <td>Activated on Nightly and Aurora</td> <td>Not supported</td> <td>Not supported</td> <td>Not supported</td> </tr> </tbody> </table>
原文