Share
Was Sie erstellen werdenHeute möchte ich mit der Media Capture- und Streams-API experimentieren, die vom W3C gemeinsam von der Arbeitsgruppe für Web-Echtzeitkommunikation und der Arbeitsgruppe für Gerät-APIs entwickelt wurde. Einige Entwickler kennen es vielleicht einfach als getUserMedia, Dies ist die Hauptschnittstelle, über die Webseiten auf Medienaufnahmegeräte wie Webcams und Mikrofone zugreifen können.
Den Quellcode für dieses Projekt finden Sie auf meinem GitHub. Außerdem gibt es hier eine funktionierende Demo, mit der Sie experimentieren können. In der neuesten Windows-10-Vorabversion hat Microsoft erstmals Unterstützung für APIs für die Medienerfassung im Microsoft Edge-Browser hinzugefügt. Dieser Code wurde größtenteils aus dem Photo Capture-Beispiel übernommen, das das Edge-Entwicklerteam an seinem Teststandort erstellt hatte.
Für diejenigen unter Ihnen, die etwas tiefer eintauchen möchten, hat Eric Bidelman einen großartigen Artikel auf HTML5 Rocks, der in die geschichtsträchtige Geschichte dieser API eingeht.
Die getUserMedia () - Methode ist ein guter Ausgangspunkt, um die Media Capture-APIs zu verstehen. Das getUserMedia () Der Aufruf nimmt MediaStreamConstraints als Eingabeargument an, das die Voreinstellungen und / oder Anforderungen für Aufnahmegeräte und erfasste Medienströme wie z. B. Kamera definiert faceMode, Mikrofonlautstärke und Videoauflösung.
Durch MediaStreamConstraints, Sie können auch das bestimmte erfasste Gerät mit dessen auswählen Geräte ID, die aus der abgeleitet werden kann enumerateDevices () Methode. Sobald der Benutzer die Erlaubnis erteilt, wird die getUserMedia () Der Aufruf gibt ein Versprechen mit einem MediaStream-Objekt zurück MediaStreamConstraints kann getroffen werden.
All dies, ohne dass Sie ein Plugin herunterladen müssen! In diesem Beispiel werden wir in die API eintauchen und ein paar nette Filter für das Video und die Bilder erstellen, die wir aufnehmen werden. Unterstützt Ihr Browser das? Gut getUserMedia () gibt es seit Chrome 21, Opera 18 und Firefox 17 und arbeitet jetzt in Edge.
Die Funktionserkennung beinhaltet eine einfache Überprüfung der Existenz von navigator.getUserMedia. Es ist ein großes Projekt, in jedem Browser nachzuschauen. Ich schlage daher vor, einfach Modernizr zu verwenden. So funktioniert das:
Accentsconagua
if (Modernizr.getusermedia) var getUM = Modernizr.prefixed ('getUserMedia', Navigator); getUM (video: true, Funktion (//… //…)Ohne Modernizr müssten Sie, wie in diesem Beispiel gezeigt, Folgendes verwenden:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (! navigator.getuserMedia) Console.log ('Sie verwenden einen Browser, der die Media Capture-API nicht unterstützt'); In unserem HTML-Code können Sie das Video-Tag oben auf der Seite erkennen. Sie werden feststellen, dass auch die automatische Wiedergabe eingestellt ist. Andernfalls würde das Video im ersten Frame dauerhaft eingefroren.
Derzeit gibt es keine Quelle für das Medienset, aber wir werden diese Quelle in Kürze über JavaScript einführen.
Diese neue Funktionalität kann eine Reihe neuer Möglichkeiten für Entwickler ermöglichen, sie kann jedoch auch ein Sicherheitsrisiko für den Endbenutzer darstellen. Wenn Sie diese Web-App starten, werden Sie als Erstes feststellen, dass Sie zur Verwendung der Webcam berechtigt sind.
GetUserMedia akzeptiert einige Parameter. Das erste ist ein Objekt, das die Details und Anforderungen für jeden Medientyp angibt, auf den Sie zugreifen möchten. Für den Zugriff auf die Webcam sollte der erste Parameter sein video: true. Um sowohl das Mikrofon als auch die Kamera zu verwenden, führen Sie die Option "Pass" video: true, audio: true.
Hier werden die Dinge wirklich interessant. In diesem Beispiel verwenden wir auch die MediaDevices.enumerateDevices-Methode. Dadurch werden Informationen zu den in Ihrem System verfügbaren Medienein- / ausgabegeräten wie Mikrofonen, Kameras und Lautsprechern erfasst. Dies ist ein Versprechen, das mehrere Eigenschaften zurückgibt, einschließlich der Art (des Typs) des Geräts, wie z Video Eingang, Audioeingang, oder Audioausgang. Außerdem kann eine eindeutige ID in Form einer Zeichenfolge mit einer eindeutigen ID generiert werden (videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =) und schließlich ein Etikett zur Beschreibung des Geräts, z FaceTime HD-Kamera (eingebaut). Dies ist jedoch immer noch eine experimentelle Technologie, die noch nicht einmal auf CanIUse.com gelistet ist.
In dem initalizeVideoStream Funktion können Sie sehen, dass wir das Video-Tag von unserer Seite erhalten und die Quelle auf den Stream setzen, den wir übergeben. Der Stream selbst ist ein Blob. Wenn der Browser das nicht unterstützt srcObject Attribut, es fällt zurück, eine URL aus dem Medienstrom zu erstellen und setzt diese.
// initializeVideoStream () - Callback-Funktion, wenn getUserMedia () erfolgreich mit einem mediaStream-Objekt zurückgegeben wird // 1. Legen Sie den mediaStream auf das Video-Tag // fest ältere Version var initializeVideoStream = Funktion (Stream) MediaStream = Stream; var video = document.getElementById ('videoTag'); if (typeof (video.srcObject)! == 'undefined') video.srcObject = mediaStream; else video.src = URL.createObjectURL (mediaStream); if (webcamList.length> 1) document.getElementById ('switch'). disabled = false; ; Ich bin nicht sehr gut darin, Fotos zu machen, deshalb verlasse ich mich oft auf die Filter, die Instagram für mich bereitstellt. Aber was wäre, wenn Sie Ihre eigenen Filter auf Ihr Video oder Ihr statisches Bild anwenden könnten? Ja, du kannst!
Ich habe eine einfache Funktion für den Video-Feed erstellt, mit der ich CSS-Filter in Echtzeit anwenden kann. Der für das Bild ist fast identisch.
// changeCssFiltersOnVid () - Wechseln Sie durch CSS-Filter, die auf den Videostrom angewendet werden. // 1. Nehmen Sie einen Verweis auf das Video-Tag //. 2. Behalten Sie die ursprünglichen CSS-Klassen bei, während Sie die Filter hinzufügen //. 3. Durchlaufen Sie alle Filter var changeCssFilterOnVid = function () var el = document.getElementById ('videoTag'); el.className = 'view - video__video'; var effect = filters [index ++% filters.length] if (effect) el.classList.add (effect); console.log (el.classList); An der Spitze der Klasse habe ich ein Array von Filtern zum Durchlaufen. Sie werden als Zeichenfolge gespeichert, die Klassen mit identischen Namen in CSS entspricht.
// CSS-Filter var index = 0; var filters = ['Graustufen', 'Sepia', 'Unschärfe', 'Invertieren', 'Helligkeit', 'Kontrast', "];
Und im CSS:
/ * image * videofilter * / .grayscale -webkit-filter: Graustufen (1); -Moz-Filter: Graustufen (1); -ms-filter: Graustufen (1); Filter: Graustufen (1); .sepia -Webkit-Filter: Sepia (1); -Moz-Filter: Sepia (1); -ms-Filter: Sepia (1); Filter: Sepia (1); .blur -webkit-filter: blur (3px); -Moz-Filter: Unschärfe (3px); -ms-Filter: Unschärfe (3px); Filter: Unschärfe (3px);
Auf der Edge-Testfahrt-Seite finden Sie weitere Beispiele, wie dies funktioniert, und ändern Sie die Werte in Echtzeit.
Beim Durchforsten des Codes werden möglicherweise andere Funktionen angezeigt, mit denen Sie nicht sofort vertraut sind. Das erste, was mir ins Auge fiel, war navigator.msSaveBlob. Mit dem Blob-Konstruktor können Sie auf einfache Weise einen Blob (im Wesentlichen eine Datei) direkt auf dem Client erstellen und bearbeiten. Es wird in IE 10 unterstützt+.
Mit der msSaveBlob-Methode können Sie dieses Blob-Objekt (in diesem Fall unser Snapshot-Image) auf der Festplatte speichern. Es hat auch eine Geschwister-Methode, msSaveOrOpenBlob, mit der Sie das Bild auch vom Browser aus öffnen können.
// savePhoto () - Diese Funktion wird aufgerufen, wenn der Benutzer auf das Zeichenbereichselement klickt. // 1. Wenn msSaveBlob unterstützt wird, rufen Sie den Foto-Blob aus dem Zeichenbereich ab und speichern Sie die Bilddatei //. Andernfalls richten Sie das Download-Attribut des Ankers ein Element und Download der Bilddatei var savePhoto = function () if (photoReady) var canvas = document.getElementById ('canvasTag'); if (navigator.msSaveBlob) var imgData = canvas.msToBlob ('image / jpeg'); navigator.msSaveBlob (imgData, 'myPhoto.jpg'); else var imgData = canvas.toDataURL ('image / jpeg'); var link = document.getElementById ('saveImg'); link.href = imgData; link.download = 'myPhoto.jpg'; link.click (); canvas.removeEventListener ('click', savePhoto); document.getElementById ('photoViewText'). innerHTML = "; photoReady = false;;Wenn der Browser die Methode unterstützt, wird der Code reduziert, den wir zum Speichern eines Bildes schreiben müssen.
Dies ist nur der Anfang. Wir können damit auch WebGL verwenden, wodurch noch mehr Filter angewendet werden können und ein Echtzeit-Video- / Audio-Feed in interaktive Umgebungen integriert werden kann. Vielleicht ist das mein nächstes Projekt…
Darüber hinaus können Sie in die Web-Audio-API einbinden, um die Frequenzmodulation auf Ihre Audioausgabe anzuwenden. Dieses Beispiel aus dem Web-Audio-Tuner veranschaulicht dies gut. Einige Leute beschäftigen sich mehr mit visuellem Lernen. Schauen Sie sich auch dieses Microsoft-Beispiel an.
Schließlich, da mobile Browser immer mehr von dieser Technologie verwenden, können Sie diese JavaScript-APIs verwenden, um die zugrunde liegende Hardware einzubinden und auf mobilen Geräten unabhängig von der Plattform funktionieren zu lassen. Es ist eine großartige Zeit, um ein Webentwickler zu sein, und nachdem Sie dies verwendet haben, werden Sie verstehen, warum ich so begeistert bin, ein Teil davon zu sein.
Schauen Sie sich den Quellcode an und sehen Sie ein funktionierendes Beispiel.
Microsoft bietet viele kostenlose Lernmöglichkeiten zu vielen Open Source-JavaScript-Themen. Wir haben uns vorgenommen, mit Microsoft Edge viel mehr zu schaffen. Hier sind einige zu überprüfen:
Einige kostenlose Tools für den Einstieg: Visual Studio Code, Azure Trial und Cross-Browser-Test-Tools - alle verfügbar für Mac, Linux oder Windows.
Dieser Artikel ist Teil der Web-Dev-Tech-Serie von Microsoft. Wir freuen uns zu teilen Microsoft Edge und das Neue EdgeHTML-Rendering-Engine mit dir. Erhalten Sie kostenlose virtuelle Maschinen oder testen Sie remote auf Ihrem Mac, iOS, Android oder Windows-Gerät. http://dev.modern.ie/.
