Detaillierte Erläuterung der neuen WebRTC-Funktionen von HTML5

1. Übersicht

WebRTC ist die Abkürzung für „Web Real Time Communication“. Es wird hauptsächlich verwendet, um Browsern das Abrufen und Austauschen von Videos, Audio und Daten.

WebRTC ist in drei APIs unterteilt.

• MediaStream (auch bekannt als getUserMedia)

• RTCPeerConnection

• RTCDataChannel

getUserMedia wird hauptsächlich zum Abrufen von Video- und Audioinformationen verwendet, und die beiden letztgenannten APIs werden für den Datenaustausch zwischen Browsern verwendet.

2. getUserMedia

2.1

Einführung

Überprüfen Sie zunächst, ob der Browser die getUserMedia-Methode unterstützt.

navigator.getUserMedia || 
    (navigator.getUserMedia = navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia);

if (navigator.getUserMedia) {
    //do something
} else {
    console.log('your browser not support getUserMedia');
}

Chrome 21, Opera 18 und Firefox 17 unterstützen diese Methode derzeit nicht. msGetUserMedia dient nur dazu, die zukünftige Kompatibilität sicherzustellen.

Die getUserMedia-Methode akzeptiert drei Parameter.

getUserMedia(streams, success, error);

bedeutet wie folgt:

• Streams: Gibt an, welche

  Multimedia--Geräte Objekte <🎜 enthalten >

Erfolg:
• Rückruffunktion

  , wird aufgerufen, wenn das Multimediagerät erfolgreich abgerufen wird

Fehler: Rückruffunktion, wird aufgerufen, wenn das Multimediagerät fehlschlägt erhalten werden
Die Verwendung ist wie folgt:

Der obige Code wird verwendet, um Echtzeitinformationen von der Kamera und dem Mikrofon zu erhalten.

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

Wenn die Webseite getUserMedia verwendet, fragt der Browser den Benutzer, ob er Informationen bereitstellen möchte. Lehnt der Benutzer ab, wird die Callback-Funktion onError aufgerufen.

Wenn ein Fehler auftritt, ist der Parameter

der Callback-Funktion

ein Fehlerobjekt, das einen Codeparameter mit den folgenden Werten hat:

PERMISSION_DENIED: Benutzer weigert sich, Informationen bereitzustellen.
NOT_SUPPORTED_ERROR: Der Browser unterstützt den angegebenen Medientyp nicht.
MANDATORY_UNSATISHIED_ERROR: Der angegebene Medientyp hat keinen Medienstream empfangen.
2.2 Anzeigen von Kamerabildern

Um von der Kamera des Benutzers aufgenommene Bilder auf einer Webseite anzuzeigen, müssen Sie zunächst ein Videoelement auf der Webseite platzieren. Das Bild wird in diesem Element angezeigt.

Verwenden Sie dann Code, um dieses Element abzurufen.

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

Zuletzt binden Sie das src

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

Attribut

dieses Elements an den Datenstrom, und das von der Kamera aufgenommene Bild kann angezeigt werden.

Der Hauptzweck besteht darin, Benutzern das Aufnehmen von Fotos von sich selbst mit der Kamera zu ermöglichen.

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 Aufnehmen von Mikrofonton

Das Aufnehmen von Ton über den Browser ist relativ kompliziert und erfordert die Verwendung der Web-Audio-API.

3. Echtzeit-Datenaustausch

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); 

}

Die anderen beiden APIs von WebRTC, RTCPeerConnection, werden für Punkt-zu-Punkt-Verbindungen zwischen Browsern und RTCDataChannel für Punkt-zu-Verbindungen verwendet -Punkt-Datenkommunikation.

RTCPeerConnection hat das Browser-Präfix, das im Chrome-Browser webkitRTCPeerConnection und im Firefox-Browser mozRTCPeerConnection lautet. Google unterhält eine Funktionsbibliothek adapter.js, um die Unterschiede zwischen Browsern zu abstrahieren.

4. Referenzlinks

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");
};

[1] Andi Smith, Erste Schritte mit WebRTC

[2] Thibault Imbert, Vom Mikrofon zu .WAV mit: getUserMedia und Web-Audio

[3] Ian Devlin, Verwendung der getUserMedia-API mit den

HTML5

-Video- und Canvas-Elementen[4] Eric Bidelman, Capturing Audio & Video in HTML5

[5] Sam Dutton, Erste Schritte mit WebRTC

[6] Dan Ristic, WebRTC-Datenkanäle

[7] Ruanyf, WebRTC

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der neuen WebRTC-Funktionen von HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!