Verwenden der Media Capture API

In diesem Artikel wird die Medienerfassung und die Streams -API (GetUsermedia) untersucht, wobei Webseiten ohne Plugins auf Webcam und Mikrofon zugreifen können. Unterstützt von großen Browsern wie Chrome, Opera, Firefox und Edge.

Die API bietet Video-, Audio- und Bildaufnahmen. Steuerung über Kamerateinstellungen (Auflösung, Bildrate, Fokus); Support mit mehreren Kamera; und Integration in andere APIs. Die Anwendungen reichen vom Video -Chat bis zur Erstellung von Social -Media -Inhalten. Die Erlaubnis der Benutzer ist erforderlich, und die Verfügbarkeit von Merkmalen variiert zwischen Geräten und Browsern.

Schlüsselmerkmale und Funktionen:

Die getUserMedia() -Methode, die für die API von zentraler Bedeutung ist, verwendet MediaStreamConstraints, um die Erfassungseinstellungen (Gesichtsmodus, Volumen, Auflösung) zu definieren. enumerateDevices() hilft dabei, bestimmte Geräte über ihre deviceId auszuwählen. Erfolgreiche Anrufe geben ein MediaStream Objekt zurück.

Browserkompatibilität:

Die API genießt eine breite Unterstützung, die auf Chrome 21, Opera 18 und Firefox 17 zurückreicht, mit jüngster Hinzufügung von Edge. Modernizr vereinfacht Browserkompatibilitätsprüfungen. Ohne Modernizr sind manuelle Überprüfungen erforderlich, um Browser -Inkonsistenzen zu verarbeiten.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

Alternativ ohne Modernizr:

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Video -Wiedergabe:

Das HTML enthält ein <video></video> -Tag (auf autoplay und muted festgelegt), um den erfassten Stream anzuzeigen. JavaScript legt dynamisch die srcObject (oder src als Fallback) des Videoelements fest.

<video id="videoTag" src="" autoplay muted class="view--video__video"></video>

Zugriff und Berechtigungen der Kamera:

Die API priorisiert die Benutzersicherheit. Beim Start fordert die Anwendung die Berechtigung zur Verwendung der Webcam (oder Webcam und Mikrofon, falls angegeben). getUserMedia() akzeptiert ein Objekt, das die Anforderungen an die Medienzugriffsanforderungen angibt ({video: true} für Webcam, {video: true, audio: true} für beide).

Mehrfacher Webcam -Unterstützung:

MediaDevices.enumerateDevices() ruft Informationen zu den verfügbaren Medieneingangs-/Ausgabegeräten (Mikrofone, Kameras, Lautsprecher) ab. Es gibt ein Versprechen zurück, das auf ein Array von Geräteobjekten auflöst, jeweils Eigenschaften wie kind, deviceId und label. Diese Funktion ist immer noch experimentell.

Videoquelle einstellen:

Die Funktion initializeVideoStream() setzt die Quelle des Video -Tags auf die empfangene MediaStream. Es verwendet srcObject, wenn es unterstützt wird, und fällt für ältere Browser auf URL.createObjectURL() zurück.

var initializeVideoStream = function(stream) {
    // ... (code to set video source) ...
};

CSS -Filter:

Die Anwendung wendet Echtzeit-CSS-Filter auf das Video und die Bilder an. Eine JavaScript -Funktion fährt durch vordefinierte Filter (Graustufen, Sepia, Unschärfe usw.) und fügt dem Videoelement entsprechende CSS -Klassen hinzu.

if (Modernizr.getusermedia) {
  var getUM = Modernizr.prefixed('getUserMedia', navigator);
  getUM({video: true}, function( //...
  //...
}

Bildsparen:

navigator.msSaveBlob (IE10) oder ein Fallback mit toDataURL und einem <a></a> -Element speichert erfasste Bilder.

navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;

if (!navigator.getUserMedia) {
  console.log('Unsupported browser.');
}

Weitere Entwicklung:

Zu den zukünftigen Möglichkeiten gehören die WebGL -Integration für erweiterte Filter- und interaktive Umgebungen sowie die Integration von Web -Audio -API für Audio -Manipulation. Der mobile Browser -Support erweitert ebenfalls.

(Der Rest der ursprünglichen Eingabe, einschließlich der FAQs und Microsoft Learning Resources, wird für die Kürze weggelassen, da sie weitgehend beschreibend ist und nicht direkt mit der Kernfunktionalität der Medienerfassungs -API zusammenhängt, wie im Code gezeigt Snippets.)

Das obige ist der detaillierte Inhalt vonVerwenden der Media Capture API. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!