Présentation et exemples de capture d'informations audio et vidéo à l'aide des astuces du didacticiel HTML5_html5

Présentation de cet article
La capture d'informations audio et vidéo a longtemps été une difficulté dans le développement Web. Depuis de nombreuses années, nous nous appuyons sur les plug-ins de navigateur pour répondre à ce besoin.
Dans HTML 5, il existe de nombreuses API qui peuvent accéder aux périphériques matériels, telles que l'API de géolocalisation pour accéder aux appareils GPS, l'API d'orientation pour accéder aux appareils accéléromètres, l'API WebGL pour accéder aux appareils GPU, l'API Web Audio pour accéder aux appareils de lecture audio, etc. . Ces API sont très puissantes car les développeurs peuvent accéder directement aux périphériques matériels sous-jacents en écrivant du code de script JavaScript.
Cet article présente une nouvelle API qui permet aux applications Web d'accéder aux appareils photo et microphone de l'utilisateur à l'aide de la méthode navigatior.getUserMedia().

Historique du développement technologique pour la capture de données multimédias
Au cours des dernières années, le besoin d'accéder aux appareils locaux des clients dans les applications Web a commencé à émerger, alors l'organisation W3C a décidé d'organiser Un groupe de travail DAP (Device APIS POLICY) pour développer une norme unifiée pour la réalisation de cette exigence.
Jetons un coup d'œil à ce qui s'est passé en 2011 :

Capture des données multimédias dans les fichiers de pages HTML
La première norme développée par le groupe de travail DAP est la manière de capturer les données multimédias dans les pages HTML du Web. candidatures. Ils ont décidé de surcharger l'élément d'entrée de type file () et d'ajouter une nouvelle valeur d'attribut à l'attribut accept.
Si le développeur souhaite implémenter la fonction permettant aux utilisateurs de prendre des photos via l'appareil photo, il peut écrire le code comme indiqué ci-dessous.

Copier le code

Le code est le suivant :

Le code pour l'enregistrement des données vidéo et des données audio est similaire :

Copier le code

Le code est le suivant :

< input type="file" accept="audio/*;capture=microphone">

Dans ces codes, utilisez simplement le contrôle de fichier (élément d'entrée de type file) pour terminer la prise de photo ou la possibilité d'enregistrer des données multimédias. Cependant, comme ces codes n'ont toujours pas la capacité de mettre en œuvre certaines exigences associées (telles que le rendu des données vidéo capturées dans des éléments de canevas ou l'application de filtres WEBGL aux données vidéo capturées), ils n'ont pas été largement utilisés par les développeurs d'applications.
Navigateurs pris en charge :
Navigateur Android 3.0
Chrome pour Android (0.16)
Firefox Mobile 10.0
Élément de périphérique
Si vous utilisez le contrôle de fichiers, capturez les données multimédias et traitez-les. Traitement les capacités sont très limitées, c'est pourquoi une nouvelle norme est apparue qui pourrait prendre en charge n'importe quel appareil. Cette norme utilise l'élément périphérique.
Le navigateur Opera est le premier navigateur à capturer des données vidéo via l'élément appareil. Presque le même jour, l'organisation WhatWG a décidé d'utiliser la méthode navigator.getUserMedia() pour capturer des données multimédias. Une semaine plus tard, Opera a lancé un nouveau navigateur prenant en charge la méthode navigator.getUserMedia(). Plus tard, Microsoft Tools a lancé le navigateur IE 9 prenant en charge cette méthode. L'utilisation de l'élément
device est la suivante.

Copier le code

Le code est le suivant :

<script> <br>function update(stream) { <br>document.querySelector('video').src = stream.url; <br>} <br></script>
Navigateurs pris en charge :
Malheureusement, aucune version officielle du navigateur ne prend en charge l'élément périphérique jusqu'à présent.
WEBRTC
Récemment, en raison de l'émergence de l'API WebRTC (Web Real Time Communication : communication Web en temps réel), la technologie de capture de données multimédias a fait de grands progrès. Google, Opera, Mozilla et d'autres sociétés travaillent dur pour l'implémenter dans leurs navigateurs.
L'API WebRTC est une API étroitement liée à la méthode getUserMedia, qui offre la possibilité d'accéder à la caméra ou au microphone local du client.
Navigateurs pris en charge :
Jusqu'à présent, dans la version Chrome 18 du navigateur, WebRTC peut être utilisé après l'avoir défini dans la page chrome://flags. Dans la version Chrome 21 du navigateur, cette API est utilisée. par défaut, aucun paramètre supplémentaire n'est requis. L'API WebRTC est prise en charge par défaut dans les navigateurs supérieurs à Opera 12 et Firefox 17.
Utilisation de la méthode getUserMedia
En utilisant la méthode getUserMedia, nous pouvons accéder directement à la caméra et au microphone locaux du client sans recourir à des plug-ins.
Détection de la prise en charge du navigateur
Vous pouvez utiliser la méthode indiquée ci-dessous pour détecter si le navigateur prend en charge la méthode getUserMedia.

Copier le code

Le code est le suivant :

function hasGetUserMedia() {
/ /Veuillez noter : le préfixe
return n'est pas utilisé dans le navigateur Opera !!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia
}
if (hasGetUserMedia()) {
alert('Votre navigateur prend en charge la méthode getUserMedia');
}
else {
alert('Votre navigateur ne prend pas en charge la méthode getUserMedia');
}

Obtenir l'autorisation d'accéder à l'appareil
Afin d'accéder à l'appareil photo client et au microphone, nous devons d'abord obtenir l'autorisation. Le premier paramètre de la méthode getUserMedia est un objet spécifiant le type de média. Par exemple, lorsque vous souhaitez accéder à la caméra, le premier paramètre doit être {video:true}. Afin d'accéder à la caméra et au microphone en même temps, vous devez utiliser le {video:true,audio:. true} paramètres. Le code est le suivant :

Copier le code

Le code est le suivant :

Si vous souhaitez que plusieurs navigateurs prennent en charge la méthode getUserMedia en même temps, veuillez utiliser le code comme indiqué ci-dessous :





Copiez le code

Le code est le suivant : window.URL = window.URL || window.webkitURL;

navigator.getUserMedia = navigator.getUserMedia || |

navigator. mozGetUserMedia || navigator.msGetUserMedia;

var video = document.getElementById('video');
if (navigator.getUserMedia) {
navigator.getUserMedia({audio : true, video : true}, function (stream) {
video.src = window.URL.createObjectURL(stream);
}, onFailSoHard
else {
alert('Votre); le navigateur ne prend pas en charge la méthode getUserMedia');
}


安全性
在有些瀏覽器中,當調用getUserMedia方法時,顯示一個提示視窗,詢問用戶是否允許或拒絕訪問他們的攝像頭或麥克風。
拍照
在Canvas API中,可以使用ctx.drawImage(video,0,0)方法將video元素中的某一幀畫面輸出到canvas元素中。當然,既然我們已經將捕捉到的用戶攝像頭中的圖像信息輸出到video元素中,當然也可以將圖像信息通過video元素輸出到canvas元素中,即實現實時拍照功能,代碼如下所示。

複製程式碼

程式碼如下:

var video = document.getElementById ('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
function snaps( ) {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
document.getElementById('img').src = canvas.toDataURL('image/png'); 🎜>}
}
video.addEventListener('click', snapshot, false);
//不使用供應商前綴
navigator.getUserMedia({video: true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard);

應用濾鏡 目前為止,可以在Chrome 18以上版本的瀏覽器中使用CSS濾鏡。 透過CSS濾鏡的使用,我們可以對video元素中捕捉的影片添加各種影像濾鏡效果。

複製程式碼程式碼如下:

<script> <br />var idx = 0; <br />var filters = ['grayscale', 'sepia', 'blur', 'brightness', 'contrast', 'hue-rotate', <br />'hue-rotate2', 'hue-rotate3', 'saturate', 'invert', '']; <br />function changeFilter(e) { <br />var el = e.target; <br />el.className = ''; <br />var effect = filters[idx % filters.length]; // loop through filters. <br />if (effect) { <br />el.classList.add(effect); <br />} <br />} <br />document.getElementById('video' ).addEventListener('click', changeFilter, false); <br /></script>