Share
Vad du ska skapaIdag vill jag experimentera med Media Capture and Streams API, som utvecklas gemensamt på W3C av webben i realtidskommunikationsgruppen och enhetens API-grupper. Vissa utvecklare kanske vet det helt enkelt som getUserMedia, vilket är huvudgränssnittet som tillåter webbsidor att få tillgång till mediainspelningsenheter som webbkameror och mikrofoner.
Du kan hitta källkoden för detta projekt på min GitHub. Dessutom är det här en fungerande demo för dig att experimentera med. I den senaste versionen av Windows 10-förhandsgranskningen lade Microsoft för första gången support till medieinspelnings-API: er i Microsoft Edge-webbläsaren. Mycket av den här koden togs från det fotofångstprov som Edge dev-laget producerade på deras testplats.
För dem som vill dyka lite djupare, har Eric Bidelman en bra artikel på HTML5 Rocks som går in i det här lagrets historia.
Metoden getUserMedia () är en bra utgångspunkt för att förstå Media Capture API. De getUserMedia () samtal tar MediaStreamConstraints som ett inmatningsargument som definierar inställningarna och / eller kraven för inspelningsenheter och infångade medieströmmar, till exempel kamera facingMode, mikrofonvolym och videoupplösning.
Genom MediaStreamConstraints, Du kan också välja den specifika infångade enheten med dess enhets-ID, som kan härledas från enumerateDevices () metod. När användaren beviljar tillstånd, ska getUserMedia () samtal kommer att returnera ett löfte med ett MediaStream-objekt om det specifika MediaStreamConstraints kan uppfyllas.
Allt detta utan att behöva ladda ner ett plugin! I det här provet dyker vi in i API: n och skapar några snygga filter på videon och bilderna vi ska fånga. Stöder din webbläsare det? Väl getUserMedia () har funnits sedan Chrome 21, Opera 18 och Firefox 17, och arbetar nu i Edge.
Funktionsdetektering innebär en enkel kontroll av förekomsten av navigator.getUserMedia. Det är ett stort projekt att checka in i varje webbläsare, så jag föreslår att du bara använder Modernizr för att kontrollera det. Så här fungerar det:
Accentsconagua
om (Modernizr.getusermedia) var getUM = Modernizr.prefixed ('getUserMedia', navigator); getUM (video: true, funktion (// ... // ...Utan Modernizr, som demonstreras i detta prov, måste du använda:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; om (! navigator.getuserMedia) Console.log ('Du använder en webbläsare som inte stöder Media Capture API'); I vår HTML kan du kolla upp videotaggen mot toppen av sidan. Du märker att den också är inställd på autoplay. Utan det skulle videon permanent frysas på den första ramen.
Det finns för tillfället ingen källa för mediesatsen, men vi kommer att injicera den källan via JavaScript inom kort.
Denna nya funktionalitet kan möjliggöra ett antal nya möjligheter till utvecklare, men det kan också vara en säkerhetsrisk för slutanvändaren. Därför är det första som du kommer att märka när du startar den här webbappen att den begär tillstånd att använda din webbkamera.
GetUserMedia accepterar några parametrar. Det första är ett objekt som specificerar detaljer och krav för varje typ av media du vill komma åt. För att få tillgång till webbkameran bör den första parametern vara video: true. Dessutom, för att använda både mikrofonen och kameran, passera video: true, audio: true.
Det är här sakerna blir intressanta. Vi använder också metoden MediaDevices.enumerateDevices i det här provet. Detta samlar in information om de inmatnings- / utmatningsenheter som finns tillgängliga på ditt system, t.ex. mikrofoner, kameror och högtalare. Detta är ett löfte som kommer att returnera flera egenskaper, inklusive enhetens typ (typ), t.ex. videoinput, ljudingång, eller ljudutgång. Dessutom kan det skapa ett unikt ID i form av en sträng med ett unikt ID (videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =) och slutligen en etikett för att beskriva anordningen, såsom FaceTime HD-kamera (inbyggd). Detta är dock fortfarande en experimentell teknik, och är inte ens listad på CanIUse.com än.
I initalizeVideoStream funktion kan du se att vi hämtar videotaggen från vår sida och ställer in källan till den ström vi passerar in. Strömmen är en blob. Om webbläsaren inte stöder srcObject attribut, faller det tillbaka för att skapa en URL ur medieströmmen och anger det.
// initieraVideoStream () - Återuppringningsfunktion när getUserMedia () returneras framgångsrikt med ett mediaStream-objekt // 1. Ställ in mediaStream på videotaggen // 2. Använd attributet srcObject för att bestämma om du vill använda det standardbaserade API- eller arv version var initializeVideoStream = funktion (ström) mediaStream = stream; var video = document.getElementById ('videoTag'); om (typeof (video.srcObject)! == 'undefined') video.srcObject = mediaStream; annars video.src = URL.createObjectURL (mediaStream); om (webcamList.length> 1) document.getElementById ('switch'). inaktiverat = false; ; Jag är inte så bra på att ta bilder, så jag litar ofta på de filter som Instagram ger mig. Men vad händer om du kan tillämpa dina egna filter på din video eller statisk bild? Tja du kan!
Jag har skapat en enkel funktion för videofödet, vilket gör att jag kan använda CSS-filter i realtid. Den för bilden är nästan identisk.
// ändraCssFiltersOnVid () - Cykla genom CSS-filter som tillämpas på videoströmmen // 1. Hämta en referens till videotaggen // 2. Håll de ursprungliga CSS-klasserna medan du fortfarande lägger till filtren // 3. Löp igenom alla filtren var changeCssFilterOnVid = function () var el = document.getElementById ('videoTag'); el.className = 'visa - video__video'; var effekt = filter [index ++% filters.length] if (effect) el.classList.add (effekt); console.log (el.classList); I toppen av klassen har jag en rad filter att slinga igenom. De lagras som en sträng, vilket motsvarar klasser med identiska namn i CSS.
// CSS-filter var index = 0; var filters = ['gråskala', 'sepia', 'oskärpa', 'invert', 'ljusstyrka', 'kontrast', '];
Och i CSS:
/ * bild * videofilter * / .grayscale -webkit-filter: gråskala (1); -moz-filter: gråskala (1); -ms-filter: gråskala (1); filter: gråskala (1); .sepia -webkit-filter: sepia (1); -moz-filter: sepia (1); -ms-filter: sepia (1); filter: sepia (1); .blur -webkit-filter: oskärpa (3px); -moz-filter: oskärpa (3px); -ms-filter: oskärpa (3px); filter: oskärpa (3px);
Du kan se fler exempel på hur detta fungerar, och ändra värden i realtid, på sidan Edge test drive.
Gräva igenom koden kan du se några andra funktioner som du inte är omedelbart bekant med. Det första som grep mitt öga var navigator.msSaveBlob. Blob-konstruktorn låter dig enkelt skapa och manipulera en blob (i princip en fil) direkt på klienten. Den stöds i IE 10+.
Metoden msSaveBlob kan du spara det här blob-objektet (i detta fall vår snapshot-bild) till disken. Det har också en syskon metod, msSaveOrOpenBlob, som också tillåter dig att öppna bilden från webbläsaren.
// sparaPhoto () - Funktion påkallad när användaren klickar på kanvaselementet // 1. Om msSaveBlob stöds, skaffa fotoblobgen från kanfasen och spara bildfilen // 2. Annars ställer du in nedladdningsattributet för ankaret element och ladda ner bildfilen var sparaPhoto = funktion () om (photoReady) var canvas = document.getElementById ('canvasTag'); om (navigator.msSaveBlob) var imgData = canvas.msToBlob ('image / jpeg'); navigator.msSaveBlob (imgData, 'myPhoto.jpg'); else var imgData = canvas.toDataURL ('image / jpeg'); var länk = document.getElementById ('saveImg'); link.href = imgData; link.download = 'myPhoto.jpg'; link.click (); canvas.removeEventListener ('click', savePhoto); document.getElementById ('photoViewText'). innerHTML = "; PhotoReady = false;;Om webbläsaren stöder metoden kommer den att minska koden som vi behöver skriva för att spara en bild.
Detta är bara början. Vi kan även använda WebGL med detta, vilket gör det möjligt att använda ännu fler filter, samt att ha ett realtid video / ljudmatning inbyggd i mycket interaktiva miljöer. Kanske blir det mitt nästa projekt ...
Dessutom kan du koppla in i Web Audio API för att använda frekvensmodulering till din ljudutgång. Detta prov från Web Audio tuner illustrerar det bra. Vissa människor handlar mer om visuellt lärande, så kolla även detta Microsoft-prov.
Slutligen, eftersom mobila webbläsare fortsätter att anta mer av denna teknik, kan du använda dessa JavaScript-API: er för att binda till den underliggande hårdvaran och fungera på mobila enheter, oberoende av plattformen. Det är en bra tid att vara webbutvecklare, och förhoppningsvis, efter att du har använt detta, förstår du varför jag är så glada att vara en del av det.
Känn dig fri att kolla källkoden och se ett arbetsprov.
Microsoft har en massa gratis lärande på många JavaScript-ämnen med öppen källkod, och vi har ett uppdrag att skapa mycket mer med Microsoft Edge. Här är några att kolla in:
Och några gratis verktyg för att komma igång: Visual Studio Code, Azure Trial och testverktyg för cross-browser - alla tillgängliga för Mac, Linux eller Windows.
Den här artikeln är en del av web dev-tekniken från Microsoft. Vi är glada att dela Microsoft Edge och den nya EdgeHTML-återgivningsmotor med dig. Få gratis virtuella maskiner eller testa fjärran på din Mac, iOS, Android eller Windows-enheten @ http://dev.modern.ie/.
