1、概述

WebRTC是“網(wǎng)絡(luò)實(shí)時(shí)通信”（Web Real Time Communication）的縮寫(xiě)，它主要用來(lái)讓瀏覽器實(shí)時(shí)獲取和交換視頻、音頻和數(shù)據(jù)。

WebRTC共分三個(gè)API。

• MediaStream（又稱getUserMedia）

• RTCPeerConnection

• RTCDataChannel

getUserMedia主要用于獲取視頻和音頻信息，后兩個(gè)API用于瀏覽器之間的數(shù)據(jù)交換。

2、getUserMedia

2.1 簡(jiǎn)介

首先，檢查瀏覽器是否支持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只是為了確保將來(lái)的兼容。

getUserMedia方法接受三個(gè)參數(shù)。

getUserMedia(streams, success, error);

含義如下：

• streams：表示包括哪些多媒體設(shè)備的對(duì)象

• success：回調(diào)函數(shù)，獲取多媒體設(shè)備成功時(shí)調(diào)用

• error：回調(diào)函數(shù)，獲取多媒體設(shè)備失敗時(shí)調(diào)用

用法如下：

navigator.getUserMedia({      video: true,      audio: true}, onSuccess, onError);

上面的代碼用來(lái)獲取攝像頭和麥克風(fēng)的實(shí)時(shí)信息。

如果網(wǎng)頁(yè)使用了getUserMedia，瀏覽器就會(huì)詢問(wèn)用戶，是否許可提供信息。如果用戶拒絕，就調(diào)用回調(diào)函數(shù)onError。

發(fā)生錯(cuò)誤時(shí)，回調(diào)函數(shù)的參數(shù)是一個(gè)Error對(duì)象，它有一個(gè)code參數(shù)，取值如下：

• PERMISSION_DENIED：用戶拒絕提供信息。

• NOT_SUPPORTED_ERROR：瀏覽器不支持指定的媒體類型。

• MANDATORY_UNSATISHIED_ERROR：指定的媒體類型未收到媒體流。

2.2 展示攝像頭圖像

將用戶的攝像頭拍攝的圖像展示在網(wǎng)頁(yè)上，需要先在網(wǎng)頁(yè)上放置一個(gè)video元素。圖像就展示在這個(gè)元素中。

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

然后，用代碼獲取這個(gè)元素。

function onSuccess(stream) {      var video = document.getElementById('webcam');      //more code}

最后，將這個(gè)元素的src屬性綁定數(shù)據(jù)流，攝像頭拍攝的圖像就可以顯示了。

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 捕獲麥克風(fēng)聲音

通過(guò)瀏覽器捕獲聲音，相對(duì)復(fù)雜，需要借助Web Audio API。

function onSuccess(stream) {      //創(chuàng)建一個(gè)音頻環(huán)境對(duì)像      audioContext = window.AudioContext || window.webkitAudioContext;      context = new audioContext();          //將聲音輸入這個(gè)對(duì)像      audioInput = context.createMediaStreamSources(stream);          //設(shè)置音量節(jié)點(diǎn)      volume = context.createGain();      audioInput.connect(volume);          //創(chuàng)建緩存，用來(lái)緩存聲音      var bufferSize = 2048;          // 創(chuàng)建聲音的緩存節(jié)點(diǎn)，createJavaScriptNode方法的      // 第二個(gè)和第三個(gè)參數(shù)指的是輸入和輸出都是雙聲道。      recorder = context.createJavaScriptNode(bufferSize, 2, 2);          // 錄音過(guò)程的回調(diào)函數(shù)，基本上是將左右兩聲道的聲音      // 分別放入緩存。      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;      }    // 將音量節(jié)點(diǎn)連上緩存節(jié)點(diǎn)，換言之，音量節(jié)點(diǎn)是輸入      // 和輸出的中間環(huán)節(jié)。          volume.connect(recorder);          // 將緩存節(jié)點(diǎn)連上輸出的目的地，可以是擴(kuò)音器，也可以      // 是音頻文件。          recorder.connect(context.destination);     }

3、實(shí)時(shí)數(shù)據(jù)交換

WebRTC的另外兩個(gè)API，RTCPeerConnection用于瀏覽器之間點(diǎn)對(duì)點(diǎn)的連接，RTCDataChannel用于點(diǎn)對(duì)點(diǎn)的數(shù)據(jù)通信。

RTCPeerConnection帶有瀏覽器前綴，Chrome瀏覽器中為webkitRTCPeerConnection，F(xiàn)irefox瀏覽器中為mozRTCPeerConnection。Google維護(hù)一個(gè)函數(shù)庫(kù)adapter.js，用來(lái)抽像掉瀏覽器之間的差異。

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