Übersicht und Beispiele für die Erfassung von Audio- und Videoinformationen mithilfe von HTML5_html5-Tutorial-Tipps

Übersicht über diesen Artikel
Das Erfassen von Audio- und Videoinformationen stellt seit langem eine Schwierigkeit in der Webentwicklung dar. 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, weshalb die W3C-Organisation beschloss, sich zu organisieren Eine DAP-Arbeitsgruppe (Device APIS POLICY) soll einen einheitlichen Standard zur Umsetzung dieser Anforderung entwickeln.
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:

Der Code zum Aufzeichnen von Videodaten und Audiodaten ist ähnlich:

Code kopieren

Der Code lautet wie folgt:

< input type="file" Accept="audio/*;capture=microphone"> Verwenden Sie in diesen Codes einfach das Dateisteuerelement (Eingabeelement vom Typ Datei). um die Fotoaufnahme abzuschließen oder Mediendaten aufzuzeichnen. 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:

<script> <br>function update(stream) { <br>document.querySelector('video').src = stream.url} <br></script>
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 hart 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() {
/ /Bitte beachten Sie: Das Präfix
return wird im Opera-Browser nicht verwendet!!(navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia);
}
if (hasGetUserMedia()) {
alert('Ihr Browser unterstützt die getUserMedia-Methode');
}
else {
alert('Ihr Browser unterstützt die getUserMedia-Methode nicht');
}

Erlaubnis für den Zugriff auf das Gerät einholen
Um auf das Client-Kameragerät und das Mikrofongerät zuzugreifen, müssen wir zunächst die Erlaubnis einholen. Der erste Parameter der getUserMedia-Methode ist ein Objekt, das den Medientyp angibt. Wenn Sie beispielsweise auf das Kameragerät zugreifen möchten, sollte der erste Parameter {video:true} sein. Um gleichzeitig auf das Kameragerät und das Mikrofongerät zuzugreifen, müssen Sie {video:true,audio: verwenden. true} Parameter. Der Code lautet wie folgt:

Code kopieren

Der Code lautet wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt:

window.URL = window.URL || navigator.getUserMedia = navigator.webkitGetUserMedia | |. navigator.msGetUserMedia;

var video = document.getElementById('video');

navigator.getUserMedia({audio: true, video: true}, function (stream) {

video.src = window.URL.createObjectURL(stream);
},
}
else {
alert('Your Browser unterstützt die getUserMedia-Methode nicht');
}


Sécurité
Dans certains navigateurs, lorsque la méthode getUserMedia est appelée, une fenêtre d'invite s'affiche demandant à l'utilisateur s'il doit autoriser ou refuser l'accès à sa caméra ou à son microphone.
Prendre des photos
Dans l'API Canvas, vous pouvez utiliser la méthode ctx.drawImage(video,0,0) pour afficher une certaine image de l'élément vidéo vers l'élément canevas. Bien sûr, puisque nous avons transmis les informations d'image capturées de la caméra de l'utilisateur vers l'élément vidéo, bien sûr, nous pouvons également transmettre les informations d'image vers l'élément de toile via l'élément vidéo, c'est-à-dire pour réaliser la prise de photo en temps réel. fonction. Le code est le suivant.

Copier le code

Le code est le suivant :

< ;/vidéo> ;


var video = document.getElementById('video');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d'); var localMediaStream = null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
document.getElementById('img').src = canvas .toDataURL( 'image/png');
}
}
video.addEventListener('click', snapshot, false
//Ne pas utiliser le préfixe du fournisseur
navigator.getUserMedia); ({video : true}, function(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream;
}, onFailSoHard); 🎜>
Appliquer les filtres CSS

Jusqu'à présent, les filtres CSS peuvent être utilisés dans les navigateurs Chrome 18 et supérieurs.
Grâce à l'utilisation de filtres CSS, nous pouvons ajouter divers effets de filtre d'image à la vidéo capturée dans l'élément vidéo.



Copier le code

Le code est le suivant :
script>
var idx = 0;
var filters = ['niveaux de gris', 'sépia', 'flou', 'luminosité', 'contraste', 'teinte-rotation',
'hue-rotate2 ', 'hue-rotate3', 'saturer', 'invert', ''];
function changeFilter(e) {
var el = e.target; 🎜>var effect = filters[idx % filters.length]; // boucle à travers les filtres
if (effect) {
el.classList.add(effect); >document.getElementById('video').addEventListener('click', changeFilter, false

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn