Übersicht und Beispiele für die Erfassung von Audio- und Videoinformationen mithilfe von HTML5

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

WBOY

Freigeben： 2016-05-16 15:49:32

Original

1681 Leute haben es durchsucht

Ü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:

Code kopieren

Der Code lautet wie folgt:

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> ;

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