Share
Ce veți creaAstăzi, aș vrea să experimentez API-ul Media Capture and Streams, dezvoltat în comun la W3C de către Grupul de Lucru pentru Comunicații în timp real în Web și Grupul de lucru API-uri pentru dispozitive. Unii dezvoltatori ar putea să o știe pur și simplu getUserMedia, care este interfața principală care permite paginilor web să acceseze dispozitive de captare media cum ar fi camere web și microfoane.
Puteți găsi codul sursă pentru acest proiect pe GitHub-ul meu. În plus, iată un demo de lucru pentru a vă experimenta. În ultima versiune de previzualizare Windows 10, Microsoft a adăugat pentru prima dată suport pentru API-urile de captare multimedia în browser-ul Microsoft Edge. O mare parte din acest cod a fost preluat din proba Photo Capture pe care echipa Edge dev a produs-o pe site-ul lor de testare.
Pentru cei care vor să se scufunde mai adânc, Eric Bidelman are un articol extraordinar la HTML5 Rocks, care intră în istoria acestui API.
Metoda getUserMedia () este un bun punct de plecare pentru a înțelege API-urile Media Capture. getUserMedia () apelul acceptă MediaStreamConstraints ca argument de intrare, care definește preferințele și / sau cerințele pentru dispozitivele de captare și fluxurile media înregistrate, cum ar fi camera facingMode, volumul microfonului și rezoluția video.
Prin MediaStreamConstraints, puteți alege, de asemenea, dispozitivul capturat specific folosind identificatorul dispozitivului, care pot fi derivate din enumerateDevices () metodă. Odată ce utilizatorul acordă permisiunea, getUserMedia () apelul va returna o promisiune cu un obiect MediaStream dacă specificul MediaStreamConstraints pot fi îndeplinite.
Toate acestea fără a fi nevoie să descărcați un plugin! În acest exemplu, vom fi scufundați în API și vom crea niște filtre îngrijite pe video și imagini pe care le vom capta. Îți acceptă browserul? Bine getUserMedia () a fost în jur de la Chrome 21, Opera 18 și Firefox 17 și acum lucrează în Edge.
Detectarea elementelor implică o verificare simplă pentru existența navigator.getUserMedia. Este un proiect mare de verificat în fiecare browser, așa că aș sugera pur și simplu utilizarea Modernizr pentru a verifica. Iată cum funcționează:
Accentsconagua
dacă (Modernizr.getusermedia) var getUM = Modernizr.prefixed ("getUserMedia", navigator); getUM (video: true, funcția (// ... // ...Fără Modernizr, așa cum sa demonstrat în acest exemplu, va trebui să utilizați:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; dacă (! navigator.getuserMedia) Console.log ("Folosiți un browser care nu acceptă API-ul Media Capture"); În HTML-ul nostru puteți să vedeți eticheta video în partea de sus a paginii. Veți observa că este setat și la redarea automată. Fără aceasta, videoclipul va fi permanent înghețat pe primul cadru.
În prezent nu există o sursă pentru setul media, dar vom injecta acea sursă prin JavaScript în scurt timp.
Această nouă funcționalitate poate permite o serie de noi oportunități pentru dezvoltatori, dar poate fi și un risc de securitate pentru utilizatorul final. Prin urmare, primul lucru pe care îl veți observa când lansați această aplicație web este că solicită permisiunea de a utiliza camera web.
GetUserMedia acceptă câțiva parametri. Primul este un obiect care specifică detaliile și cerințele pentru fiecare tip de suport pe care doriți să îl accesați. Pentru a accesa camera web, trebuie să fie primul parametru video: true. În plus, pentru a utiliza atât microfonul, cât și camera, treceți video: adevărat, audio: adevărat.
Aici lucrurile devin interesante. De asemenea, folosim metoda MediaDevices.enumerateDevices din acest exemplu. Aceasta colectează informații despre dispozitivele de intrare / ieșire media disponibile în sistem, cum ar fi microfoanele, camerele foto și difuzoarele. Aceasta este o promisiune care va reveni la câteva proprietăți, inclusiv tipul (tipul) dispozitivului, cum ar fi videoinput, intrare audio, sau iesire audio. În plus, poate genera un ID unic sub forma unui șir cu un ID unic (videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =) și, în final, o etichetă pentru a descrie dispozitivul, cum ar fi Cameră FaceTime HD (încorporată). Aceasta este totuși o tehnologie experimentală, deși nu este încă listată încă pe CanIUse.com.
În initalizeVideoStream , puteți vedea că primim eticheta video de pe pagina noastră și setăm sursa acesteia la fluxul în care trecem. Stream-ul în sine este un blob. Dacă browserul nu acceptă srcObject atribut, acesta revine pentru a crea o adresă URL din fluxul media și o stabilește.
// initializeVideoStream () - Funcția Callback atunci când getUserMedia () se întoarce cu succes cu un obiect mediaStream // 1. Setați mediaStream pe eticheta video // 2. Utilizați atributul 'srcObject' pentru a determina dacă se utilizează API-ul bazat pe standard sau versiunea învechită var initializeVideoStream = funcție (flux) mediaStream = flux; var video = document.getElementById ("videoTag"); dacă (typeof (video.srcObject)! == 'undefined') video.srcObject = mediaStream; altceva video.src = URL.createObjectURL (mediaStream); dacă (webcamList.length> 1) document.getElementById ('switch') disabled = false; ; Nu sunt foarte bun la fotografiile, așa că mă bazez adesea pe filtrele pe care mi le oferă Instagram. Dar dacă ați putea aplica propriile dvs. filtre la imaginile video sau statice? Ei bine poți!
Am creat o funcție simplă pentru fluxul video, ceea ce permite să utilizez filtrele CSS în timp real. Cel pentru imagine este aproape identic.
// changeCssFiltersOnVid () - Ciclul prin filtrele CSS aplicate fluxului video // 1. Apucă o referință la eticheta video // 2. Păstrați clasele CSS originale în timp ce adăugați încă filtrele // 3. Curățați prin toate filtrele var variațieCssFilterOnVid = funcție () var el = document.getElementById ('videoTag'); el.className = 'vizualizare - video__video'; var efect = filtre [index ++% filters.length] dacă (efect) el.classList.add (efect); console.log (el.classList); În partea de sus a clasei am o gamă largă de filtre pentru a le rupe. Ele sunt stocate ca un șir, care corespunde claselor cu nume identice în CSS.
// Filtre CSS var index = 0; var filtru = ['grayscale', 'sepia', 'blur', 'invert', 'luminozitate', 'contrast', "];
Și în CSS:
/ * imagine * filtre video * / .grayscale -webkit-filter: tonuri de gri (1); -moz-filtru: tonuri de gri (1); -ms-filter: tonuri de gri (1); filtru: tonuri de gri (1); .sepia -webkit-filter: sepia (1); -moz-filtru: sepia (1); -ms-filtru: sepia (1); filtru: sepia (1); .blur -webkit-filter: estomp (3px); -moz-filter: estompare (3px); -ms-filtru: estompare (3px); filtru: estompare (3 pixeli);
Puteți vedea mai multe exemple despre modul în care funcționează acest lucru și puteți modifica valorile în timp real, la pagina de testare Edge.
Sărind prin cod, este posibil să vedeți alte caracteristici pe care nu le cunoașteți imediat. Primul lucru care mi-a prins ochiul a fost navigator.msSaveBlob. Constructorul Blob vă permite să creați și să manipulați cu ușurință un blob (în esență un fișier) direct pe client. Este susținută în IE 10+.
Metoda msSaveBlob vă permite să salvați acest obiect blob (în acest caz imaginea instantanee) pe disc. De asemenea, are o metodă frățească, msSaveOrOpenBlob, care vă permite de asemenea să deschideți imaginea din browser.
// savePhoto () - Funcția invocată atunci când utilizatorul face clic pe elementul canvas // 1. Dacă msSaveBlob este suportat, obțineți blobul foto de pe pânză și salvați fișierul imagine // 2. În caz contrar, setați atributul de descărcare al ancorei element și descărcați fișierul imagine var savePhoto = funcția () if (photoReady) var canvas = document.getElementById ('canvasTag'); dacă (navigator.msSaveBlob) var imgData = canvas.msToBlob ("imagine / jpeg"); navigator.msSaveBlob (imgData, 'myPhoto.jpg'); altfel var imgData = canvas.toDataURL ('imagine / jpeg'); var link = document.getElementById ('saveImg'); link.href = imgData; link.download = 'myPhoto.jpg'; link.click (); canvas.removeEventListener ("faceți clic pe", salvațiFoto); document.getElementById ('photoViewText') interiorHTML = "; photoReady = false;;Dacă browserul acceptă metoda, va reduce cantitatea de cod pe care trebuie să o scriem pentru a salva o imagine.
Acesta este doar inceputul. De asemenea, putem utiliza WebGL cu acest lucru, ceea ce permite utilizarea unui număr mai mare de filtre, precum și un feed video / audio în timp real, construit în medii extrem de interactive. Poate că acesta va fi următorul meu proiect ...
În plus, puteți conecta la API-ul Web Audio pentru a aplica modulația frecvenței la ieșirea dvs. audio. Această probă din tunerul Web Audio o ilustrează bine. Unii oameni sunt mai mult despre învățarea vizuală, deci verificați și acest eșantion Microsoft.
În cele din urmă, pe măsură ce browserele mobile continuă să adopte mai mult din această tehnologie, veți putea să utilizați aceste API-uri JavaScript pentru a le lega în hardware-ul de bază și pentru a avea acest lucru pe dispozitive mobile, indiferent de platformă. Este un moment minunat să fii un dezvoltator de web și, sperăm, după ce ai folosit acest lucru, vei înțelege de ce sunt atât de încântat să fac parte din ea.
Simțiți-vă liber să verificați codul sursă și să vedeți un eșantion de lucru.
Microsoft are o grămadă de învățare gratuită pe multe subiecte JavaScript open source și suntem în misiunea de a crea mult mai mult cu Microsoft Edge. Iată câteva pentru a verifica:
Și câteva instrumente gratuite pentru a începe: Visual Studio Code, Azure Trial și instrumente de testare cross-browser - toate disponibile pentru Mac, Linux sau Windows.
Acest articol face parte din seriile de tehnologie web dev din Microsoft. Suntem încântați să împărtășim Microsoft Edge și noul EdgeHTML motor de randare cu tine. Obțineți mașini virtuale gratuite sau testați de la distanță pe dispozitivele Mac, iOS, Android sau Windows @ http://dev.modern.ie/.
