公司有项目需要用到视频通信,本人自告奋勇(脑子一热)接下了这个重任。。经过几天的资料搜索,最终选定了使用WebRTC来做视频通信,关于这方面的资料现在国内还不是很多。。看英文看的头都大了,故记录一下学习过程,希望以后可以帮到别人。
首先了解一下什么是webRTC:
http://segmentfault.com/blog/skyinlayer/1190000000436544 这篇文章讲的比较详细。
简单来说就是能够让浏览器拥有和其他浏览器建立点对点(peer-to-peer)的连接进行视频或语音通信的能力,属于浏览器本身集成的功能,而不需要通过插件,flash之类的帮助,目前实现了webRTC的浏览器有谷歌浏览器,opera,以及火狐浏览器。
浏览器提供相应的javascript API 让开发者能够简单的使用到webRTC的功能,主要的API主要包括以下三个方面
1、MediaStream:通过MediaStream的API可以打开摄像头和麦克风,获取视频音频的媒体流(包括编解码之类的)。
2、RTCPeerConnection:核心组件,与其他浏览器之间建立稳定高效的点对点连接,进行音频和视频数据流的交换。
3、RTCDataChannel:RTCPeerConnection类似,可以进行任意数据的传输(例如文件,文本之类的)
从以上来看,使用WebRTC完全可以实现一个WebQQ。。。怎能让人不激动。
下面讲讲如何使用webRTC实现浏览器之间的视频通信。
虽然上面说到WebRTC是基于点对点的通信,但不是说它可以完全抛弃服务器,至少它需要服务器来为它和另一个浏览器进行信令的交换,信令大致包括以下东西:
1. 用来控制通信开启或者关闭的连接控制消息
2. 发生错误时用来彼此告知的消息
3. 媒体流元数据,比如像解码器、解码器的配置、带宽、媒体类型等等
4. 用来建立安全连接的关键数据
5. 外界所看到的的网络上的数据,比如IP地址、端口等
简单来说就是在建立点对点连接之前,浏览器并不知道对方“是谁”、“在哪”,所以需要服务器中转一些信息,等完成信令的交换后,服务器就算宕机了也没事。。
除此之外,有时候(应该说大多时候)用户所处的网络环境是经过NAT之后的,也就是说只有内网IP,此时浏览器之间因为没有公网IP无法直接建立连接,所以需要服务器来帮助其做网络穿透或者就直接转发了。
下面是一个简单的例子。
页面:index.html (主要是两个video标签,用于呈现视频)
<!DOCTYPE html>
<!--
* Copyright (c) 2014 The WebRTC project authors. All Rights Reserved.
*
* Use of this source code is governed by a BSD-style license
* that can be found in the LICENSE file in the root of the source
* tree.
-->
<html>
<head>
<meta name="keywords" content="WebRTC, HTML5, JavaScript">
<meta name="description" content="Client-side WebRTC code samples.">
<meta http-equiv="Content-Type" con