Streamen Sie Ihre Webcam in einem Browser in JavaScript

Opera 12: Ein Pionier in der Multimedia -Stream -API -Unterstützung von W3C

Die Veröffentlichung von Version 12 durch src Opera -Software war ein bedeutender Meilenstein, wodurch der erste große Browser die Multimedia -Stream -API von W3C (auch als GetUsermedia -API bekannt ist) unterstützt. Diese API ermöglicht das Streamieren von Kamera- und Mikrofoneingängen direkt in ein Browserfenster, das normalerweise als <video></video> -Regribut eines

-Elements verwendet wird. Angesichts des Entwurfs der API und des sich entwickelnden Natures bietet dieser Artikel einen grundlegenden Überblick. Wir werden dies erweitern, wenn die API reift und breiter unterstützt wird.

API -Unterstützung

überprüfen navigator Derzeit bleibt Opera der einzige Browser mit Stream -API -Unterstützung. Daher ist die Überprüfung der API -Verfügbarkeit vor der Implementierung von entscheidender Bedeutung. Die folgende Funktion bestätigt die Unterstützung, indem die getUserMedia() -Objektmethode untersucht wird:

function isStreamSupported() {
  return !!navigator.getUserMedia;
}

Verwenden Sie die getUserMedia() -Methode

Die Methode navigator.getUserMedia() bietet Zugriff auf die Stream -API. Eine explizite Benutzeringenehmigung ist jedoch erforderlich. Beim Aufrufen von getUserMedia() zeigt die Opera einen Einverständniserklärungsdialog an.

Die getUserMedia() -Syntax ist wie folgt: Es akzeptiert zwei obligatorische Argumente und einen optionalen dritten. Das Objekt "Einschränkungen" gibt angeforderte Medienströme (Video und/oder Audio) an. successCallback wird nach erfolgreichem Zugriff ausgeführt und empfängt das Medienstromobjekt. errorCallback (optional) verarbeitet Fehler (z. B. Benutzerverweigerung).

navigator.getUserMedia(constraints, successCallback[, errorCallback]);

Integration in <video> Elemente

Dieses Beispiel zeigt die Streaming -Kamera -Eingabe in ein HTML -Element, einschließlich Spielen, Pause und Stoppsteuerungen. Die Variable <video> fordert sowohl Audio als auch Video an. (Eine Live -Version, falls in der Opera verfügbar, wird hier verknüpft.) constraints

<title>getUserMedia Example</title>
<meta charset="UTF-8">
<button id="play">Play</button>
<button id="pause">Pause</button>
<button id="stop">Stop</button>
<br><br>
<video id="camera"></video>

<🎜>

häufig gestellte Fragen (FAQs)

Dieser Abschnitt befasst sich mit häufigen Fragen zum Webcam-Streaming in JavaScript, der Sicherheits-, Fehlerbehebung, Multi-Browser-Streaming, Auflösungsanpassung, Verzögerungsreduzierung, Aufzeichnung, Fehlerbehebung, Audio-/Videointegration, Leistungsoptimierung und Filteranwendung. (Die detaillierten Antworten aus dem Originaltext würden hier enthalten sein)

Das obige ist der detaillierte Inhalt vonStreamen Sie Ihre Webcam in einem Browser in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!