WebRTC est l'abréviation de « Web Real Time Communication ». Il est principalement utilisé pour permettre aux navigateurs d'obtenir et d'échanger des vidéo, audio et données.
WebRTC est divisé en trois API.navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia); if (navigator.getUserMedia) { //do something } else { console.log('your browser not support getUserMedia'); }
getUserMedia(streams, success, error);
multimédia incluent des objets
Fonction de rappel, appelée lorsque le périphérique multimédia est obtenu avec succès
navigator.getUserMedia({ video: true, audio: true}, onSuccess, onError);
de la fonction de rappel est un objet Error, qui possède un paramètre de code avec les valeurs suivantes :
<video id="webcam"></video>
function onSuccess(stream) { var video = document.getElementById('webcam'); //more code}
de cet élément au flux de données, et l'image capturée par la caméra peut être affichée.
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();}
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); }
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"); };
HTML5 et les éléments canvas
[4] Eric Bidelman, Capture Audio et vidéo en HTML5[5] Sam Dutton, Premiers pas avec WebRTC[6] Dan Ristic, Canaux de données WebRTC[7] Ruanyf, WebRTCCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!