Share
Cosa starai creandoOggi mi piacerebbe sperimentare con l'API Media Capture and Streams, sviluppata congiuntamente al W3C dal gruppo di lavoro Web Real-Time Communications e dal gruppo di lavoro Device API. Alcuni sviluppatori potrebbero saperlo semplicemente come getUserMedia, che è l'interfaccia principale che consente alle pagine Web di accedere a dispositivi di acquisizione multimediale come webcam e microfoni.
Puoi trovare il codice sorgente per questo progetto sul mio GitHub. Inoltre, ecco una demo funzionante con cui sperimentare. Nell'ultima versione di anteprima di Windows 10, Microsoft ha aggiunto per la prima volta il supporto per le API di acquisizione multimediale nel browser Microsoft Edge. Gran parte di questo codice è stata presa dall'esempio di Photo Capture che il team di sviluppo Edge ha prodotto nel sito di test drive.
Per quelli di voi che vogliono immergersi un po 'più a fondo, Eric Bidelman ha un grande articolo su HTML5 Rocks che entra nella storia di questa API.
Il metodo getUserMedia () è un buon punto di partenza per comprendere le API di Media Capture. Il getUserMedia () call prende MediaStreamConstraints come argomento di input, che definisce le preferenze e / oi requisiti per i dispositivi di acquisizione e i flussi multimediali acquisiti, come la fotocamera facingMode, volume del microfono e risoluzione video.
Attraverso MediaStreamConstraints, puoi anche scegliere il dispositivo catturato specifico usando il suo ID del dispositivo, che può essere derivato dal enumerateDevices () metodo. Una volta che l'utente concede il permesso, il getUserMedia () la chiamata restituirà una promessa con un oggetto MediaStream se specifica MediaStreamConstraints può essere raggiunto.
Tutto questo senza bisogno di scaricare un plugin! In questo esempio ci immergeremo nell'API e creeremo alcuni filtri accurati sul video e le immagini che cattureremo. Il tuo browser lo supporta? Bene getUserMedia () è in circolazione da Chrome 21, Opera 18 e Firefox 17 e ora funziona in Edge.
Il rilevamento delle caratteristiche implica un semplice controllo dell'esistenza di navigator.getUserMedia. È un grande progetto per controllare in ogni browser, quindi suggerirei semplicemente usando Modernizr per controllarlo. Ecco come funziona:
Accentsconagua
if (Modernizr.getusermedia) var getUM = Modernizr.prefixed ('getUserMedia', navigator); getUM (video: true, funzione (// ... // ...Senza Modernizr, come dimostrato in questo esempio, dovresti usare:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (! navigator.getuserMedia) Console.log ('Stai utilizzando un browser che non supporta l'API di Media Capture'); Nel nostro HTML puoi individuare il tag video verso la parte superiore della pagina. Noterai che è anche impostato per la riproduzione automatica. Senza quello, il video sarebbe permanentemente congelato sul primo fotogramma.
Al momento non esiste una fonte per il set di media, ma inseriremo la sorgente tramite JavaScript a breve.
Questa nuova funzionalità può consentire una serie di nuove opportunità per gli sviluppatori, ma può anche rappresentare un rischio per la sicurezza per l'utente finale. Pertanto, la prima cosa che noterai quando lanci questa web app è che richiede il permesso di usare la tua webcam.
GetUserMedia accetta alcuni parametri. Il primo è un oggetto che specifica i dettagli e i requisiti per ciascun tipo di supporto a cui si desidera accedere. Per accedere alla webcam, dovrebbe essere il primo parametro video: vero. Inoltre, per utilizzare sia il microfono che la fotocamera, passa video: true, audio: true.
È qui che le cose diventano davvero interessanti. Stiamo anche utilizzando il metodo MediaDevices.enumerateDevices in questo esempio. Questo raccoglie informazioni sui dispositivi di input / output multimediali disponibili sul sistema, come microfoni, fotocamere e altoparlanti. Questa è una promessa che restituirà diverse proprietà, incluso il tipo (tipo) di dispositivo, come ad esempio videoinput, ingresso audio, o Uscita audio. Inoltre, può generare un ID univoco sotto forma di stringa con un ID univoco (videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =), e infine un'etichetta per descrivere il dispositivo, ad esempio Fotocamera FaceTime HD (incorporata). Questa è ancora una tecnologia sperimentale e non è ancora presente su CanIUse.com.
Nel initalizeVideoStream funzione, puoi vedere che stiamo ottenendo il tag video dalla nostra pagina e impostando la sua origine sul flusso che stiamo passando. Il flusso stesso è un blob. Se il browser non supporta il srcObject attributo, ricade per creare un URL dal flusso multimediale e lo imposta.
// initializeVideoStream () - Funzione callback quando getUserMedia () restituisce correttamente un oggetto mediaStream // 1. Imposta mediaStream sul tag video // 2. Usa l'attributo 'srcObject' per determinare se utilizzare l'API standard o il versione legacy var initializeVideoStream = function (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; ; Non sono molto bravo a scattare foto, quindi mi affido spesso ai filtri che Instagram mi fornisce. Ma se potessi applicare i tuoi filtri al tuo video o immagine statica? Bene, puoi!
Ho creato una semplice funzione per il feed video, che mi consente di applicare i filtri CSS in tempo reale. Quello per l'immagine è quasi identico.
// changeCssFiltersOnVid () - Passa attraverso i filtri CSS applicati al flusso video // 1. Prendi un riferimento al tag video // 2. Mantieni le classi CSS originali mentre aggiungi ancora i filtri // 3. Passa in rassegna tutti i filtri 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); In cima alla classe ho una serie di filtri da scorrere. Sono memorizzati come una stringa, che corrisponde a classi con nomi identici in CSS.
// Filtri CSS var index = 0; var filters = ['grayscale', 'sepia', 'blur', 'invert', 'brightness', 'contrast', '];
E nel CSS:
/ * image * filtri video * / .grayscale -webkit-filter: grayscale (1); -moz-filter: grayscale (1); -ms-filter: grayscale (1); filtro: scala di grigi (1); .sepia -webkit-filter: sepia (1); -moz-filter: sepia (1); -ms-filter: sepia (1); filtro: seppia (1); .blur -webkit-filter: blur (3px); -moz-filter: blur (3px); -ms-filter: blur (3px); filtro: sfocatura (3px);
Puoi vedere altri esempi di come funziona e modificare i valori in tempo reale nella pagina dell'unità test di Edge.
Scavando attraverso il codice, potresti vedere alcune altre caratteristiche che non ti sono immediatamente familiari. La prima cosa che ha attirato la mia attenzione è stata navigator.msSaveBlob. Il costruttore Blob consente di creare e manipolare facilmente un blob (fondamentalmente un file) direttamente sul client. È supportato in IE 10+.
Il metodo msSaveBlob consente di salvare questo oggetto blob (in questo caso, la nostra immagine di istantanea) su disco. Ha anche un metodo di pari livello, msSaveOrOpenBlob, che consente anche di aprire l'immagine dal browser.
// savePhoto () - Funzione invocata quando l'utente fa clic sull'elemento canvas // 1. Se msSaveBlob è supportato, recupera il blob fotografico dall'area di disegno e salva il file immagine // 2. In caso contrario, imposta l'attributo download dell'ancora elemento e scarica il file immagine 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;;Se il browser supporta il metodo, ridurrà la quantità di codice che dobbiamo scrivere per salvare un'immagine.
Questo è solo l'inizio. Possiamo anche utilizzare WebGL con questo, che consente di applicare ancora più filtri, oltre ad avere un feed video / audio in tempo reale integrato in ambienti altamente interattivi. Forse quello sarà il mio prossimo progetto ...
Inoltre, è possibile collegarsi all'API Web Audio per applicare la modulazione di frequenza all'uscita audio. Questo esempio dal sintonizzatore Web Audio lo illustra bene. Alcuni sono più interessati all'apprendimento visivo, quindi dai un'occhiata anche a questo esempio di Microsoft.
Infine, poiché i browser mobili continuano ad adottare più di questa tecnologia, sarete in grado di utilizzare queste API JavaScript per collegarle all'hardware sottostante e farlo funzionare su dispositivi mobili, indipendentemente dalla piattaforma. È un ottimo momento per diventare uno sviluppatore web e, spero che dopo averlo usato, capirai perché sono così felice di farne parte.
Sentiti libero di controllare il codice sorgente e di vedere un campione funzionante.
Microsoft ha un sacco di apprendimento gratuito su molti argomenti JavaScript open source, e siamo in missione per creare molto di più con Microsoft Edge. Ecco alcuni da verificare:
E alcuni strumenti gratuiti per iniziare: Visual Studio Code, Azure Trial e strumenti di test cross-browser - tutti disponibili per Mac, Linux o Windows.
Questo articolo fa parte della serie di web dev tech di Microsoft. Siamo entusiasti di condividere Microsoft Edge e il nuovo Motore di rendering EdgeHTML con te. Ottieni macchine virtuali gratuite o test in remoto sul tuo dispositivo Mac, iOS, Android o Windows @ http://dev.modern.ie/.
