Maison > interface Web > Tutoriel H5 > Explication détaillée des nouvelles fonctionnalités WebRTC de HTML5

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

黄舟
Libérer: 2017-03-30 11:27:15
original
5359 Les gens l'ont consulté

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');
}
Copier après la connexion
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);
Copier après la connexion
signifie comme suit :

L'utilisation est la suivante :

navigator.getUserMedia({
    video: true,
    audio: true}, onSuccess, onError);
Copier après la connexion
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>
Copier après la connexion
Ensuite, utilisez le code pour obtenir cet élément.

function onSuccess(stream) {    
var video = document.getElementById(&#39;webcam&#39;);    
//more code}
Copier après la connexion
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(&#39;webcam&#39;);    
if (window.URL) {
        video.src = window.URL.createObjectURL(stream);
    } else {
        video.src = stream;
    }

    video.autoplay = true;    //or video.play();}
Copier après la connexion
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(&#39;recording&#39;);        
        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); 

}
Copier après la connexion
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");
};
Copier après la connexion
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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal