Explication détaillée des nouvelles fonctionnalités WebRTC de HTML5

1. Présentation

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.

• MediaStream (alias getUserMedia)

• RTCPeerConnection

• RTCDataChannel

getUserMedia est principalement utilisé pour obtenir des informations vidéo et audio, et ces deux dernières API sont utilisées pour l'échange de données entre navigateurs.

2. getUserMedia

2.1

Introduction

Tout d'abord, vérifiez si le navigateur prend en charge la méthode getUserMedia.

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 :

• flux : indique quels appareils

  multimédia incluent des objets

• succès :

  Fonction de rappel, appelée lorsque le périphérique multimédia est obtenu avec succès

• erreur : fonction de rappel, appelée lorsque le périphérique multimédia ne parvient pas à être obtenu

L'utilisation est la suivante :

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 :

• PERMISSION_DENIED : refus de l'utilisateur de fournir des informations.

• NOT_SUPPORTED_ERROR : Le navigateur ne prend pas en charge le type de média spécifié.

• MANDATORY_UNSATISHIED_ERROR : Le type de média spécifié n'a pas reçu de flux multimédia.

2.2 Affichage des images de la caméra

Pour afficher les images capturées par la caméra de l'utilisateur sur une page Web, vous devez d'abord placer un élément vidéo sur la page Web. L'image est affichée dans cet élément.

<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, WebRTC

Ce 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!