HTML5新特性之WebRTC詳解

1、概述

WebRTC是「網路即時通訊」（Web Real Time Communication）的縮寫，它主要用來讓瀏覽器即時取得和交換視訊、音訊和資料。

WebRTC共分三個API。

• MediaStream（又稱getUserMedia）

• #RTCPeerConnection

• RTCDataChannel

#getUserMedia主要用於獲取視訊和音訊訊息，後兩個API用於瀏覽器之間的資料交換。

2、getUserMedia

2.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詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！