Share
Hva du skal skapeI dag vil jeg gjerne eksperimentere med Media Capture and Streams API, utviklet i fellesskap på W3C av Web Real-Time Communications Working Group og Device APIs Working Group. Noen utviklere kan bare vite det getUserMedia, som er hovedgrensesnittet som gjør det mulig for websider å få tilgang til medieopptaksenheter som webkameraer og mikrofoner.
Du finner kildekoden for dette prosjektet på min GitHub. I tillegg er det en fungerende demo for deg å eksperimentere med. I den nyeste versjonen av Windows 10-forhåndsvisning, tilføyde Microsoft for første gang støtte for medieoppfangings-APIer i Microsoft Edge-nettleseren. Mye av denne koden ble hentet fra Photo Capture-prøven som Edge dev-teamet produserte på deres teststasjonsside.
For de av dere som ønsker å dykke litt dypere, har Eric Bidelman en flott artikkel på HTML5 Rocks som går inn i den store historien til denne API.
Metoden getUserMedia () er et godt utgangspunkt for å forstå Media Capture APIs. De getUserMedia () samtalen tar MediaStreamConstraints som et inngangsargument, som definerer preferanser og / eller krav til opptaksenheter og innspillte mediestrømmer, for eksempel kamera facingMode, mikrofonvolum og videooppløsning.
Gjennom MediaStreamConstraints, Du kan også velge den spesifikke innfangede enheten ved hjelp av den DeviceID, som kan utledes av enumerateDevices () metode. Når brukeren gir tillatelse, vil getUserMedia () samtalen vil returnere et løfte med et MediaStream-objekt hvis den spesifikke MediaStreamConstraints kan møtes.
Alt dette uten å måtte laste ned et plugin! I denne prøven kommer vi til å dykke inn i API-en og skape noen ryddige filtre på videoen og bildene vi skal fange. Støtter nettleseren din det? Vi vil getUserMedia () har eksistert siden Chrome 21, Opera 18 og Firefox 17, og jobber nå i Edge.
Funksjonsdeteksjon innebærer en enkel kontroll for eksistensen av navigator.getUserMedia. Det er et stort prosjekt å sjekke inn i hver nettleser, så jeg foreslår at du bare bruker Modernizr for å sjekke det. Slik fungerer det:
Accentsconagua
if (Modernizr.getusermedia) var getUM = Modernizr.prefixed ('getUserMedia', navigator); getUM (video: true, funksjon (// ... // ...Uten Modernizr, som vist i denne prøven, må du bruke:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; hvis (! navigator.getuserMedia) Console.log ('Du bruker en nettleser som ikke støtter Media Capture API'); I vår HTML kan du se videoen mot toppen av siden. Du vil legge merke til at den også er satt til autoplay. Uten det ville videoen permanent bli frosset på den første rammen.
Det er for øyeblikket ikke en kilde for mediesettet, men vi skal injisere denne kilden via JavaScript kort tid.
Denne nye funksjonaliteten kan aktivere en rekke nye muligheter for utviklere, men det kan også være en sikkerhetsrisiko for sluttbrukeren. Derfor er det første du vil merke når du starter denne webapplikasjonen, at den krever tillatelse til å bruke webkameraet ditt.
getUserMedia aksepterer noen få parametere. Den første er et objekt som spesifiserer detaljene og kravene til hver type media du vil ha tilgang til. For tilgang til webkameraet, bør den første parameteren være video: true. I tillegg, for å bruke både mikrofonen og kameraet, passere video: true, audio: true.
Det er her ting blir veldig interessante. Vi bruker også metoden MediaDevices.enumerateDevices i denne prøven. Dette samler informasjon om medieinngang / utgangsenheter som er tilgjengelige på systemet ditt, for eksempel mikrofoner, kameraer og høyttalere. Dette er et løfte som vil returnere flere egenskaper, inkludert typen (type) av enheten, for eksempel videoinput, Lydinngang, eller audiooutput. I tillegg kan det generere en unik ID i form av en streng med en unik ID (videoinngang: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =), og til slutt en etikett for å beskrive enheten, for eksempel FaceTime HD-kamera (innebygd). Dette er fortsatt en eksperimentell teknologi, men er ikke engang oppført på CanIUse.com ennå.
I initalizeVideoStream funksjonen, kan du se at vi får videoen fra vår side og setter kilde til strømmen vi sender inn. Strømmen er en blomst. Hvis nettleseren ikke støtter srcObject attributt, det faller tilbake for å lage en URL ut av mediestrømmen og angir det.
// initializeVideoStream () - Tilbakeringingsfunksjon når getUserMedia () returneres vellykket med et mediaStream-objekt // 1. Sett mediaStream på videotaggen // 2. Bruk 'srcObject'-attributtet for å avgjøre om du skal bruke standardbasert API eller eldre versjon var initializeVideoStream = funksjon (stream) mediaStream = stream; var video = document.getElementById ('videoTag'); hvis (typeof (video.srcObject)! == 'undefined') video.srcObject = mediaStream; else video.src = URL.createObjectURL (mediaStream); hvis (webcamList.length> 1) document.getElementById ('switch'). deaktivert = false; ; Jeg er ikke så god til å ta bilder, så jeg stoler ofte på filtene som Instagram gir meg. Men hva om du kunne bruke dine egne filtre til video eller statisk bilde? Vel, det kan du!
Jeg har opprettet en enkel funksjon for videoinnmatningen, som lar meg bruke CSS-filtre i sanntid. En for bildet er nesten identisk.
// changeCssFiltersOnVid () - Syklus gjennom CSS-filtre som er brukt på videostrømmen // 1. Ta en referanse til videotaggen // 2. Hold de originale CSS-klassene mens du fortsatt legger filtene // 3. Gå gjennom alle filtrene var changeCssFilterOnVid = funksjon () var el = document.getElementById ('videoTag'); el.className = 'view - video__video'; var effect = filters [index ++% filters.length] if (effect) el.classList.add (effekt); console.log (el.classList); På toppen av klassen har jeg en rekke filtre å løse gjennom. De lagres som en streng, som tilsvarer klasser med identiske navn i CSS.
// CSS filtre var indeks = 0; var filters = ['gråtoner', 'sepia', 'uskarphet', 'invert', 'lysstyrke', 'kontrast', '];
Og i CSS:
/ * bilde * videofilter * / .grayscale -webkit-filter: gråskala (1); -moz-filter: gråtoner (1); -ms-filter: gråtoner (1); filter: gråtoner (1); .sepia -webkit-filter: sepia (1); -moz-filter: sepia (1); -ms-filter: sepia (1); filter: sepia (1); .blur -webkit-filter: uskarphet (3px); -moz-filter: uskarphet (3px); -ms-filter: uskarphet (3px); filter: uskarphet (3px);
Du kan se flere eksempler på hvordan dette virker, og endre verdier i sanntid, på siden Edge test drive.
Graving gjennom koden, kan du se noen andre funksjoner som du ikke umiddelbart kjenner til. Det første som grep øyet mitt var navigator.msSaveBlob. Blob-konstruktøren lar deg enkelt lage og manipulere en blob (egentlig en fil) direkte på klienten. Den støttes i IE 10+.
Metoden msSaveBlob lar deg lagre dette blob-objektet (i dette tilfellet vårt øyeblikksbildebilde) til disk. Det har også en søsken metode, msSaveOrOpenBlob, som også lar deg åpne bildet fra i nettleseren.
// savePhoto () - Funksjonen påberopes når brukeren klikker på lerretelementet // 1. Hvis msSaveBlob støttes, får du bildeblokken fra lerretet og lagre bildefilen // 2. Ellers skal du sette ned nedlastingsattributtet til ankeret element og last ned bildefilen var savePhoto = funksjon () hvis (photoReady) var canvas = document.getElementById ('canvasTag'); hvis (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;;Hvis nettleseren støtter metoden, vil den kutte ned koden vi trenger for å skrive for å lagre et bilde.
Dette er bare begynnelsen. Vi kan også bruke WebGL med dette, noe som gjør det mulig å bruke enda flere filtre, samt å ha en sanntids video / lydmateriell innbygget i svært interaktive miljøer. Kanskje det blir mitt neste prosjekt ...
I tillegg kan du knytte deg til Web Audio API for å bruke frekvensmodulering til lydutgangen. Denne prøven fra Web Audio tuner illustrerer det godt. Noen folk handler mer om visuell læring, så sjekk ut denne Microsoft-prøven også.
Til slutt, som mobile nettlesere fortsetter å vedta mer av denne teknologien, kan du bruke disse JavaScript-APIene til å knytte seg til den underliggende maskinvaren og ha dette til å fungere på mobile enheter, uavhengig av plattformen. Det er en flott tid å være en webutvikler, og forhåpentligvis etter at du har brukt dette, vil du forstå hvorfor jeg er så spent på å være en del av det.
Ta gjerne sjansen til å sjekke ut kildekoden, og se en arbeidsprøve.
Microsoft har en mengde gratis læring på mange open source JavaScript-emner, og vi har et oppdrag å skape mye mer med Microsoft Edge. Her er noen å sjekke ut:
Og noen gratis verktøy for å komme i gang: Visual Studio Code, Azure Trial og testverktøy for kryssbrowser - alt tilgjengelig for Mac, Linux eller Windows.
Denne artikkelen er en del av web dev-teknologiserien fra Microsoft. Vi er glade for å dele Microsoft Edge og den nye EdgeHTML rendering motor med deg. Få gratis virtuelle maskiner eller test eksternt på Mac, IOS, Android eller Windows-enheten @ http://dev.modern.ie/.
