1、概述webrtc是“网络实时通信”（web real time communication）的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据。
webrtc共分三个api。
mediastream（又称getusermedia）
rtcpeerconnection
rtcdatachannel
getusermedia主要用于获取视频和音频信息，后两个api用于浏览器之间的数据交换。
2、getusermedia2.1 简介首先，检查浏览器是否支持getusermedia方法。
navigator.getusermedia ||
(navigator.getusermedia = navigator.mozgetusermedia || navigator.webkitgetusermedia || navigator.msgetusermedia);
if (navigator.getusermedia) {
//do something
} else {
console.log('your browser not support getusermedia');
}
chrome21、opera 18和firefox 17支持该方法，目前ie还不支持，上面代码中的msgetusermedia只是为了确保将来的兼容。
getusermedia方法接受三个参数。
getusermedia(streams, success, error);
含义如下：
streams：表示包括哪些多媒体设备的对象
success：回调函数，获取多媒体设备成功时调用
error：回调函数，获取多媒体设备失败时调用
用法如下：
navigator.getusermedia({
video: true,
audio: true}, onsuccess, onerror);
上面的代码用来获取摄像头和麦克风的实时信息。
如果网页使用了getusermedia，浏览器就会询问用户，是否许可提供信息。如果用户拒绝，就调用回调函数onerror。
发生错误时，回调函数的参数是一个error对象，它有一个code参数，取值如下：
permission_denied：用户拒绝提供信息。
not_supported_error：浏览器不支持指定的媒体类型。
mandatory_unsatishied_error：指定的媒体类型未收到媒体流。
2.2 展示摄像头图像将用户的摄像头拍摄的图像展示在网页上，需要先在网页上放置一个video元素。图像就展示在这个元素中。
<video id="webcam"></video>
然后，用代码获取这个元素。
function onsuccess(stream) {
var video = document.getelementbyid('webcam');
//more code}
最后，将这个元素的src属性绑定数据流，摄像头拍摄的图像就可以显示了。
function onsuccess(stream) {
var video = document.getelementbyid('webcam');
if (window.url) {
video.src = window.url.createobjecturl(stream);
} else {
video.src = stream;
}
video.autoplay = true; //or video.play();}
它的主要用途是让用户使用摄像头为自己拍照。
2.3 捕获麦克风声音通过浏览器捕获声音，相对复杂，需要借助web audio api。
function onsuccess(stream) {
//创建一个音频环境对像
audiocontext = window.audiocontext || window.webkitaudiocontext;
context = new audiocontext();
//将声音输入这个对像
audioinput = context.createmediastreamsources(stream);
//设置音量节点
volume = context.creategain();
audioinput.connect(volume);
//创建缓存，用来缓存声音
var buffersize = 2048;
// 创建声音的缓存节点，createjavascriptnode方法的
// 第二个和第三个参数指的是输入和输出都是双声道。
recorder = context.createjavascriptnode(buffersize, 2, 2);
// 录音过程的回调函数，基本上是将左右两声道的声音
// 分别放入缓存。
recorder.onaudioprocess = function(e){
console.log('recording');
var left = e.inputbuffer.getchanneldata(0);
var right = e.inputbuffer.getchanneldata(1);
// we clone the samples
leftchannel.push(new float32array(left));
rightchannel.push(new float32array(right));
recordinglength += buffersize;
} // 将音量节点连上缓存节点，换言之，音量节点是输入
// 和输出的中间环节。
volume.connect(recorder);
// 将缓存节点连上输出的目的地，可以是扩音器，也可以
// 是音频文件。
recorder.connect(context.destination);
}
3、实时数据交换webrtc的另外两个api，rtcpeerconnection用于浏览器之间点对点的连接，rtcdatachannel用于点对点的数据通信。
rtcpeerconnection带有浏览器前缀，chrome浏览器中为webkitrtcpeerconnection，firefox浏览器中为mozrtcpeerconnection。google维护一个函数库adapter.js，用来抽像掉浏览器之间的差异。
var datachanneloptions = {
ordered: false, // do not guarantee order
maxretransmittime: 3000, // in milliseconds};
var peerconnection = new rtcpeerconnection();
// establish your peer connection using your signaling channel herevar datachannel =
peerconnection.createdatachannel("mylabel", datachanneloptions);
datachannel.onerror = function (error) {
console.log("data channel error:", error);
};
datachannel.onmessage = function (event) {
console.log("got data channel message:", event.data);
};
datachannel.onopen = function () {
datachannel.send("hello world!");
};
datachannel.onclose = function () {
console.log("the data channel is closed");
};
4、参考链接[1] andi smith, get started with webrtc
[2] thibault imbert, from microphone to .wav with: getusermedia and web audio
[3] ian devlin, using the getusermedia api with the html5 video and canvas elements
[4] eric bidelman, capturing audio & video in html5
[5] sam dutton, getting started with webrtc
[6] dan ristic, webrtc data channels
[7] ruanyf, webrtc
以上就是html5新特性之webrtc详解的详细内容。