1、概述

WebRTC是“网络实时通信”（Web Real Time Communication）的缩写，它主要用来让浏览器实时获取和交换视频、音频和数据。

WebRTC共分三个API。

MediaStream（又称getUserMedia）
RTCPeerConnection
RTCDataChannel

getUserMedia主要用于获取视频和音频信息，后两个API用于浏览器之间的数据交换。

2、getUserMedia

2.1 简介

首先，检查浏览器是否支持getUserMedia方法。

1navigator.getUserMedia || 
2    (navigator.getUserMedia = navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia);
3
4if (navigator.getUserMedia) {
5    //do something
6} else {
7    console.log('your browser not support getUserMedia');
8}

Chrome21、Opera 18和Firefox 17支持该方法，目前IE还不支持，上面代码中的msGetUserMedia只是为了确保将来的兼容。

getUserMedia方法接受三个参数。

getUserMedia(streams, success, error);

含义如下：

streams：表示包括哪些多媒体设备的对象
success：回调函数，获取多媒体设备成功时调用
error：回调函数，获取多媒体设备失败时调用

用法如下：

1navigator.getUserMedia({
2    video: true,
3    audio: true
4}, onSuccess, onError);

上面的代码用来获取摄像头和麦克风的实时信息。

如果网页使用了getUserMedia，浏览器就会询问用户，是否许可提供信息。如果用户拒绝，就调用回调函数onError。

发生错误时，回调函数的参数是一个Error对象，它有一个code参数，取值如下：

PERMISSION_DENIED：用户拒绝提供信息。
NOT_SUPPORTED_ERROR：浏览器不支持指定的媒体类型。
MANDATORY_UNSATISHIED_ERROR：指定的媒体类型未收到媒体流。

2.2 展示摄像头图像

将用户的摄像头拍摄的图像展示在网页上，需要先在网页上放置一个video元素。图像就展示在这个元素中。

<video id="webcam"></video>

然后，用代码获取这个元素。

1function onSuccess(stream) {
2
3    var video = document.getElementById('webcam');
4
5    //more code
6}

最后，将这个元素的src属性绑定数据流，摄像头拍摄的图像就可以显示了。

1function onSuccess(stream) {
2
3    var video = document.getElementById('webcam');
4
5    if (window.URL) {
6        video.src = window.URL.createObjectURL(stream);
7    } else {
8        video.src = stream;
9    }
10
11    video.autoplay = true;
12    //or video.play();
13}

它的主要用途是让用户使用摄像头为自己拍照。

2.3 捕获麦克风声音

通过浏览器捕获声音，相对复杂，需要借助Web Audio API。

1function onSuccess(stream) {
2
3    //创建一个音频环境对像
4    audioContext = window.AudioContext || window.webkitAudioContext;
5    context = new audioContext();
6
7    //将声音输入这个对像
8    audioInput = context.createMediaStreamSources(stream);
9
10    //设置音量节点
11    volume = context.createGain();
12    audioInput.connect(volume);
13
14    //创建缓存，用来缓存声音
15    var bufferSize = 2048;
16
17    // 创建声音的缓存节点，createJavaScriptNode方法的
18    // 第二个和第三个参数指的是输入和输出都是双声道。
19    recorder = context.createJavaScriptNode(bufferSize, 2, 2);
20
21    // 录音过程的回调函数，基本上是将左右两声道的声音
22    // 分别放入缓存。
23    recorder.onaudioprocess = function(e){
24        console.log('recording');
25        var left = e.inputBuffer.getChannelData(0);
26        var right = e.inputBuffer.getChannelData(1);
27        // we clone the samples
28        leftchannel.push(new Float32Array(left));
29        rightchannel.push(new Float32Array(right));
30        recordingLength += bufferSize;
31    }
32
33    // 将音量节点连上缓存节点，换言之，音量节点是输入
34    // 和输出的中间环节。
35    volume.connect(recorder);
36
37    // 将缓存节点连上输出的目的地，可以是扩音器，也可以
38    // 是音频文件。
39    recorder.connect(context.destination); 
40
41}

3、实时数据交换

WebRTC的另外两个API，RTCPeerConnection用于浏览器之间点对点的连接，RTCDataChannel用于点对点的数据通信。

RTCPeerConnection带有浏览器前缀，Chrome浏览器中为webkitRTCPeerConnection，Firefox浏览器中为mozRTCPeerConnection。Google维护一个函数库adapter.js，用来抽像掉浏览器之间的差异。

1var dataChannelOptions = {
2  ordered: false, // do not guarantee order
3  maxRetransmitTime: 3000, // in milliseconds
4};
5
6var peerConnection = new RTCPeerConnection();
7
8// Establish your peer connection using your signaling channel here
9var dataChannel =
10  peerConnection.createDataChannel("myLabel", dataChannelOptions);
11
12dataChannel.onerror = function (error) {
13  console.log("Data Channel Error:", error);
14};
15
16dataChannel.onmessage = function (event) {
17  console.log("Got Data Channel Message:", event.data);
18};
19
20dataChannel.onopen = function () {
21  dataChannel.send("Hello World!");
22};
23
24dataChannel.onclose = function () {
25  console.log("The Data Channel is Closed");
26};

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

转自http://www.4u4v.net/html5-xin-te-xing-zhi-webrtc-yin-shi-pin-shu-ju-jiao-hu.html

HTML5新特性之WebRTC(音视频数据交互)