Maison >interface Web >Tutoriel H5 >Explication détaillée des nouvelles fonctionnalités WebRTC de HTML5
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'); }Chrome 21, Opera 18 et Firefox 17 prennent en charge cette méthode. Actuellement, IE ne la prend pas en charge dans le code ci-dessus uniquement pour garantir une compatibilité future. La méthode getUserMedia accepte trois paramètres.
getUserMedia(streams, success, error);signifie comme suit :
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);Le code ci-dessus est utilisé pour obtenir des informations en temps réel de la caméra et du microphone. Si la page Web utilise getUserMedia, le navigateur demandera à l'utilisateur s'il doit fournir des informations. Si l'utilisateur refuse, la fonction de rappel onError est appelée. Lorsqu'une erreur se produit, le paramètre
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>Ensuite, utilisez le code pour obtenir cet élément.
function onSuccess(stream) { var video = document.getElementById('webcam'); //more code}Enfin, liez l'attribut src
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();}Son objectif principal est de permettre aux utilisateurs de prendre des photos d'eux-mêmes à l'aide de l'appareil photo. 2.3 Capturer le son du microphone Capturer le son via le navigateur est relativement compliqué et nécessite l'utilisation de l'API Web Audio.
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. Échange de données en temps réel Les deux autres API de WebRTC, RTCPeerConnection est utilisée pour les connexions point à point entre les navigateurs et RTCDataChannel est utilisée pour les connexions point à point. -communication de données ponctuelles. RTCPeerConnection a le préfixe du navigateur, qui est webkitRTCPeerConnection dans le navigateur Chrome et mozRTCPeerConnection dans le navigateur Firefox. Google gère une bibliothèque de fonctions adapter.js pour résumer les différences entre les navigateurs.
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. Liens de référence[1] Andi Smith, Démarrer avec WebRTC[2] Thibault Imbert, Du micro au .WAV avec : getUserMedia et Web Audio[3] Ian Devlin, Utilisation de l'API getUserMedia avec la vidéo
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!