Wie Audio und Video für den Zugriff, wenn sie mit javascript Coding
Wie greifen Sie auf Audio und Video, wenn sie mit javascript Codierung? Vor HTML5, die einzige Möglichkeit für eine Web-Seite, um eine Kamera auf einen Computer oder eingebaut in einen Computer war durch die Verwendung von Plug-ins, wie Flash angeschlossen zu verwenden.
Eines der wichtigsten Ziele von HTML5 ist die Notwendigkeit für Plugins zu beseitigen, mit ihren ständigen Updates und Sicherheitsfragen. Da HTML5 wurde zuerst vorgeschlagen wurden mehrere Versuche unternommen worden, einen Standard für die Verwendung von Eingaben von Kameras zu bestimmen.
Die neueste und größte API für die Live-Video-und Audio-Kommunikation über Web-Browser ermöglicht wird WebRTC (Web Echtzeit Kommunikation) genannt.
Im Herzen von WebRTC ist navigator.getUserMedia (), was tut genau das, was sein Name würde bedeuten: Es wird Medien (Audio und Video) vom Benutzer (na ja, von dem Gerät des Benutzers, speziell).
getUserMedia derzeit in Chrome, Opera und Firefox unterstützt. Wenn Sie es in anderen Browsern wie Safari oder Internet Explorer verwenden möchten, müssen Sie ein Tool ein polyfill genannt zu verwenden.
Der erste Parameter getUserMedia ist ein Objekt mit Eigenschaften angibt, welche Art von Medien, die Sie zugreifen möchten. Zum Beispiel, wenn Sie Video- und Audiodaten zugreifen möchten, würden Sie das folgende Objekt als ersten Parameter verwenden:
{Video: true, audio: true}Die anderen Parameter, getUserMedia nimmt ein Erfolg Rückruf und ein Fehler-Callback. Hier ist eine Beispielanwendung getUserMedia.
Holen Sie sich das Medien
Untersuchen Sie die wichtigsten Linien Code:
window.addEventListener ( 'DOMContentLoaded', function () {Ein Ereignis-Listener, die DOM wartet, bis geladen wird, bevor der Rest des Codes ausgeführt wird,
var v = document.getElementById ( 'v') -
Die vorangehenden Zeile erzeugt eine neue Variable, genannt v, eine Referenz auf das Videoelement mit einem zu halten, id =# 147-v# 148-:
navigator.getUserMedia = (navigator.getUserMedia || || navigator.webkitGetUserMedia navigator.mozGetUserMedia || navigator.msGetUserMedia) -
getUserMedia noch ist eine experimentelle Technik nicht vollständig standardisiert. Aus diesem Grund, haben Webbrowsern verschiedene Implementierungen davon, die sie unter Verwendung hersteller Präfixe anzuzeigen. Diese Anweisung setzt den Wert der Standard Navigator.getUserMedia Objekt an den Anbieter als Präfix-Version durch den Benutzer das aktuelle Browser nicht unterstützt. Also, wenn Sie mit Firefox und Call navigator.getUserMedia, Sie anrufen tatsächlich navigator.mozGetUserMedia:
if (navigator.getUserMedia) {die überprüft, um zu sehen, ob der Browser des Benutzers getUserMedia unterstützt:
navigator.getUserMedia (
Ruf den getUserMedia Verfahren:
{Video: true, audio: false}Der erste Parameter ist ein Objekt erzählt, die Medien, die Sie zugreifen möchten:
Funktion (Strom) {Der Erfolg Rückruf läuft, wenn der Antrag auf getUserMedia gelingt es. Es dauert nur ein Argument:
var url = window.URL || window.webkitURL-v.src = url? url.createObjectURL (Strom): Stream-
Die vorangegangenen zwei Linien zu glätten, die Unterschiede zwischen verschiedenen Browsern wie die Medien-Stream-Objekt behandeln. Die zweite Linie kennzeichnet unser Kumpel, den ternären Operator! Diese Anweisung setzt die src Eigenschaft des Videoelements entweder url.createObjectUrl (Strom) oder streamen, je nachdem, welche Methode wird vom Browser unterstützt:
v.play () -
Schließlich wird das Video abgespielt. Wenn Ihr Computer unterstützt getUserMedia und Sie haben eine Kamera, werden Sie Video von sich selbst sehen (oder was auch immer die Kamera zeigt auf) an dieser Stelle:
Funktion (Fehler) {alert ( 'ging etwas schief (Fehlercode.' + error.code + ')') - Rücklauf-}Der obige Code ist ein Fehler-Callback. Wenn der Browser-Unterstützung tut getUserMedia (), aber der Benutzer ist nicht der Browser auf die Kamera zuzugreifen, wird diese Funktion ausgeführt werden und eine bestimmte Fehlermeldung ausdrucken:
else {alert ( 'Sorry, der Browser Sie doesn verwenden' t Unterstützung getUserMedia ') - Rückkehr -} -Der vorstehende Code ist die sonst Bedingung. Wenn der Browser unterstützt leider des Benutzers nicht getUserMedia (), Diese Warnung wird angezeigt:
Wenn der Browser des Benutzers Unterstützung tut getUserMedia, der Benutzer hat eine Kamera, und sie ermöglichen es die App auf die Kamera zuzugreifen, wird die App Live-Videos im Browser-Fenster angezeigt werden soll.
