Heim >Web-Frontend >H5-Tutorial >Detaillierte Erläuterung der neuen WebRTC-Funktionen von HTML5
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.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:
Multimedia--Geräte Objekte
, wird aufgerufen, wenn das Multimediagerät erfolgreich abgerufen wird
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-Funktionein Fehlerobjekt, das einen Codeparameter mit den folgenden Werten hat:
<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
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); }
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. Referenzlinksvar 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"); };
[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!