Überblick und Beispiele zur Erfassung von Audio- und Videoinformationen mit HTML5-HTML-Tutorial-php.cn

Dieser Artikel stellt hauptsächlich einen Überblick und Beispiele für die Verwendung von HTML5 zum Erfassen von Audio- und Videoinformationen vor. Jetzt kann ich ihn mit Ihnen teilen.

Audio- und Videoinformationen Die Erfassung war schon immer eine Schwierigkeit in der Webentwicklung. Hier stellen wir eine neue API vor, die es Webanwendungen ermöglicht, mithilfe der navigatior.getUserMedia()-Methode auf die Kamera- und Mikrofongeräte des Benutzers zuzugreifen Übersicht über diesen Artikel

Das Erfassen von Audio- und Videoinformationen war lange Zeit eine Schwierigkeit in der Webentwicklung. Um diesen Bedarf zu decken, verlassen wir uns seit vielen Jahren auf Browser-Plugins.
In HTML 5 gibt es viele APIs, die auf Hardwaregeräte zugreifen können, z. B. die Geolocation-API für den Zugriff auf GPS-Geräte, die Orientierungs-API für den Zugriff auf Beschleunigungsmessergeräte, die WebGL-API für den Zugriff auf GPU-Geräte, die Web-Audio-API für den Zugriff auf Audiowiedergabegeräte usw . . Diese APIs sind sehr leistungsstark, da Entwickler durch das Schreiben von JavaScript-Skriptcode direkt auf die zugrunde liegenden Hardwaregeräte zugreifen können.
In diesem Artikel wird eine neue API vorgestellt, die es Webanwendungen ermöglicht, über die Methode navigatior.getUserMedia() auf die Kamera- und Mikrofongeräte des Benutzers zuzugreifen.
Geschichte der Technologieentwicklung zur Erfassung von Mediendaten
In den letzten Jahren begann sich die Notwendigkeit zu entwickeln, in Webanwendungen auf lokale Clientgeräte zuzugreifen. Daher beschloss die W3C-Organisation, ein DAP zu organisieren ( Device APIS POLICY) Arbeitsgruppe zur Entwicklung eines einheitlichen Standards zur Umsetzung dieser Anforderung.
Werfen wir einen Blick auf die Ereignisse im Jahr 2011:

Erfassen von Mediendaten in HTML-Seitendateien
Der erste von der DAP-Arbeitsgruppe entwickelte Standard ist die Erfassung von Mediendaten in HTML-Seiten von Web Anwendungen. Sie beschlossen, das Eingabeelement vom Typ Datei () zu überladen und dem Attribut „accept“ einen neuen Attributwert hinzuzufügen.
Wenn der Entwickler die Funktion implementieren möchte, dass Benutzer Bilder über die Kamera aufnehmen, kann er den Code wie unten gezeigt schreiben.

Code kopieren

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Der Code zum Aufzeichnen von Videodaten und Audio Die Daten ähneln:

Kopieren Sie den Code

Der Code lautet wie folgt:

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

Nach dem Login kopieren

In diesen Codes, verwenden Sie einfach die Dateisteuerung (Eingabeelement vom Typ Datei), um die Funktion zum Aufnehmen von Bildern oder Aufzeichnen von Mediendaten abzuschließen. Da diese Codes jedoch immer noch nicht in der Lage sind, einige damit verbundene Anforderungen zu implementieren (z. B. das Rendern erfasster Videodaten in Canvas-Elementen oder das Anwenden von WEBGL-Filtern auf erfasste Videodaten), wurden sie von Entwicklern nicht häufig verwendet.
Unterstützte Browser:
Android 3.0-Browser
Chrome für Android (0.16)
Firefox Mobile 10.0
Geräteelement
Wenn Sie die Dateisteuerung verwenden, erfassen Sie die Mediendaten und verarbeiten sie Die Fähigkeiten sind sehr begrenzt, daher entstand ein neuer Standard, der jedes Gerät unterstützen könnte. Dieser Standard verwendet das Geräteelement.
Opera Browser ist der erste Browser, der Videodaten über das Geräteelement erfasst. Fast am selben Tag beschloss die Organisation WhatWG, die Methode navigator.getUserMedia() zur Erfassung von Mediendaten zu verwenden. Eine Woche später startete Opera einen neuen Browser, der die Methode navigator.getUserMedia() unterstützt. Später startete Microsoft Tools den IE 9-Browser, der diese Methode unterstützt. Die Verwendung des
Geräteelements ist wie folgt.

Code kopieren

Der Code lautet wie folgt:

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

Nach dem Login kopieren

Unterstützte Browser :
Leider unterstützt bisher keine offizielle Version des Browsers das Geräteelement.
WEBRTC
Vor kurzem hat die Mediendatenerfassungstechnologie aufgrund der Einführung der WebRTC-API (Web Real Time Communication: Web-Echtzeitkommunikation) große Fortschritte gemacht. Google, Opera, Mozilla und andere Unternehmen arbeiten intensiv daran, es in ihren Browsern zu implementieren.
Die WebRTC-API ist eine API, die eng mit der getUserMedia-Methode verwandt ist und die Möglichkeit bietet, auf die lokale Kamera oder das Mikrofongerät des Clients zuzugreifen.
Unterstützte Browser:
Bisher kann WebRTC in der Chrome 18-Version des Browsers verwendet werden, nachdem es auf der Seite chrome://flags festgelegt wurde. In der Chrome 21-Version des Browsers wird diese API verwendet Standardmäßig sind keine weiteren Einstellungen erforderlich. Die WebRTC-API wird standardmäßig in Browsern über Opera 12 und Firefox 17 unterstützt.
Verwendung der getUserMedia-Methode
Mit der getUserMedia-Methode können wir direkt auf das lokale Kameragerät und Mikrofongerät des Clients zugreifen, ohne auf Plug-Ins angewiesen zu sein.
Browserunterstützung erkennen
Sie können die unten gezeigte Methode verwenden, um zu erkennen, ob der Browser die getUserMedia-Methode unterstützt.

Code kopieren

Der Code lautet wie folgt:

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

Nach dem Login kopieren

获取访问设备的权限
为了访问客户端摄像头设备与麦克风设备,我们首先需要获取权限。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>

Nach dem Login kopieren

在这段代码中,结合了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;); 
}

Nach dem Login kopieren

安全性
在有些浏览器中,当调用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);

Nach dem Login kopieren

应用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>

Nach dem Login kopieren