Présentation et exemples de capture d'informations audio et vidéo à l'aide de HTML5-tutoriel HTML-php.cn

Cet article présente principalement un aperçu et des exemples d'utilisation de HTML5 pour capturer des informations audio et vidéo. Il a maintenant une certaine valeur de référence. Les amis dans le besoin peuvent se référer à

Informations audio et vidéo. La capture a toujours été une difficulté dans le développement Web. Nous introduisons ici une nouvelle API qui permet aux applications Web d'avoir la possibilité d'accéder aux appareils photo et microphone de l'utilisateur en utilisant la méthode navigatior.getUserMedia() Aperçu de cet article

La capture d'informations audio et vidéo est depuis longtemps 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, c'est pourquoi l'organisation W3C a décidé d'organiser un 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 :

<input type="file" accept="image/*;capture=camera">

Copier après la connexion

Le code pour l'enregistrement des données vidéo et les données audio sont les mêmes que Similaire à :

Copiez le code

Le code est le suivant :

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

Copier après la connexion

Dans ces codes, vous devez uniquement utiliser le contrôle de fichier (élément d'entrée de type fichier) pour compléter la fonction de prise de photos ou d'enregistrement de 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 :

<device type="media" onchange="update(this.data)"></device> 
<video autoplay></video> 
<script> 
function update(stream) { 
document.querySelector(&#39;video&#39;).src = stream.url; 
} 
</script>

Copier après la connexion

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() { 
//请注意:在Opera浏览器中不使用前缀 
return !!(navigator.getUserMedia || navigator.webkitGetUserMedia || 
navigator.mozGetUserMedia || navigator.msGetUserMedia); 
} 
if (hasGetUserMedia()) { 
alert(&#39;您的浏览器支持getUserMedia方法&#39;); 
} 
else { 
alert(&#39;您的浏览器不支持getUserMedia方法&#39;); 
}

Copier après la connexion

获取访问设备的权限
为了访问客户端摄像头设备与麦克风设备,我们首先需要获取权限。getUserMedia方法的第一个参数是一个用于指定媒体类型的对象。例如,当你想访问摄像头设备时,第一个参数应该为{video:true},为了同时访问摄像头设备与麦克风设备,需要使用{video:true,audio:true}参数,代码如下所示：

复制代码

代码如下:

<video autoplay id="video"></video> 
<script> 
var onFailSoHard = function() { 
alert(&#39;设备拒绝访问&#39;); 
}; 
//不使用供应商前缀 
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) { 
var video = document.getElementById(&#39;video&#39;); 
video.src = window.URL.createObjectURL(localMediaStream); 
//请注意:当使用getUserMedia方法时,在Chrome浏览器中不触发onloadedmetadata事件 
video.onloadedmetadata = function(e) { 
//后续代码略 
}; 
}, onFailSoHard); 
</script>

Copier après la connexion

在这段代码中,结合了video元素的使用。请注意我们没有使用video元素的src属性值,而是为video元素指定了一个引用媒体文件的URL地址,同时将代表了从摄像头中所获取到的视频数据的LocalMediaStream对象转换为一个Blob URL。
在这段代码中,同时为video元素使用autoplay属性,如果不使用该属性,则video元素将停留在所获取的第一帧画面处。
请注意：在Chrome浏览器中,如果只使用{audio:true},则引发BUG,在Opera浏览器中,同样不能使用audio元素。
如果你想让多个浏览器同时支持getUserMedia方法,请使用如下所示的代码：

复制代码

代码如下:

window.URL = window.URL || window.webkitURL; 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
navigator.mozGetUserMedia || navigator.msGetUserMedia; 
var video = document.getElementById(&#39;video&#39;); 
if (navigator.getUserMedia) { 
navigator.getUserMedia({audio: true, video: true}, function(stream) { 
video.src = window.URL.createObjectURL(stream); 
}, onFailSoHard); 
} 
else { 
alert(&#39;您的浏览器不支持getUserMedia方法&#39;); 
}

Copier après la connexion

安全性
在有些浏览器中,当调用getUserMedia方法时,显示一个提示窗口,询问用户是否允许或拒绝访问他们的摄像头或麦克风。
拍照
在Canvas API中,可以使用ctx.drawImage(video,0,0)方法将video元素中的某一帧画面输出到canvas元素中。当然,既然我们已经将捕捉到的用户摄像头中的图像信息输出到video元素中,当然也可以将图像信息通过video元素输出到canvas元素中,即实现实时拍照功能,代码如下所示。

复制代码

代码如下:

<video autoplay></video> 
<img src="" id="img" ></img> 
<canvas style="display:none;" id="canvas" ></canvas> 
var video = document.getElementById(&#39;video&#39;); 
var canvas = document.getElementById(&#39;canvas&#39;); 
var ctx = canvas.getContext(&#39;2d&#39;); 
var localMediaStream = null; 
function snapshot() { 
if (localMediaStream) { 
ctx.drawImage(video, 0, 0); 
document.getElementById(&#39;img&#39;).src = canvas.toDataURL(&#39;image/png&#39;); 
} 
} 
video.addEventListener(&#39;click&#39;, snapshot, false); 
//不使用供应商前缀 
navigator.getUserMedia({video: true}, function(stream) { 
video.src = window.URL.createObjectURL(stream); 
localMediaStream = stream; 
}, onFailSoHard);

Copier après la connexion

应用CSS滤镜
目前为止,可以在Chrome 18以上版本的浏览器中使用CSS滤镜。
通过CSS滤镜的使用,我们可以对video元素中捕捉的视频添加各种图像滤镜效果。

复制代码

代码如下:

<style> 
#video3 { 
width: 307px; 
height: 250px; 
background: rgba(255,255,255,0.5); 
border: 1px solid #ccc; 
} 
.grayscale { 
-webkit-filter: grayscale(1); 
} 
.sepia { 
-webkit-filter: sepia(1); 
} 
.blur { 
-webkit-filter: blur(3px); 
} 
... 
</style> 
<video id="video" autoplay></video> 
<script> 
var idx = 0; 
var filters = [&#39;grayscale&#39;, &#39;sepia&#39;, &#39;blur&#39;, &#39;brightness&#39;, &#39;contrast&#39;, &#39;hue-rotate&#39;, 
&#39;hue-rotate2&#39;, &#39;hue-rotate3&#39;, &#39;saturate&#39;, &#39;invert&#39;, &#39;&#39;]; 
function changeFilter(e) { 
var el = e.target; 
el.className = &#39;&#39;; 
var effect = filters[idx++ % filters.length]; // loop through filters. 
if (effect) { 
el.classList.add(effect); 
} 
} 
document.getElementById(&#39;video&#39;).addEventListener(&#39;click&#39;, changeFilter, false); 
</script>

Copier après la connexion