Share
Wat je gaat creërenVandaag zou ik willen experimenteren met de Media Capture and Streams API, gezamenlijk ontwikkeld in het W3C door de Werkgroep voor web-realtimecommunicatie en de werkgroep Device API's. Sommige ontwikkelaars kennen het misschien simpelweg als getUserMedia, Dit is de hoofdinterface waarmee webpagina's toegang hebben tot apparaten voor het vastleggen van media, zoals webcams en microfoons.
Je kunt de broncode voor dit project vinden op mijn GitHub. Bovendien is hier een werkende demo om mee te experimenteren. In de nieuwste previewversie van Windows 10 heeft Microsoft voor de eerste keer ondersteuning voor API's voor het vastleggen van media in de Microsoft Edge-browser toegevoegd. Een groot deel van deze code is overgenomen uit het Photo Capture-voorbeeld dat het Edge Dev-team op hun testritlocatie heeft gemaakt.
Voor degenen onder u die een beetje dieper willen duiken, heeft Eric Bidelman een geweldig artikel in HTML5 Rocks dat ingaat op de legendarische geschiedenis van deze API.
De methode getUserMedia () is een goed startpunt om de Media Capture-API's te begrijpen. De getUserMedia () call neemt MediaStreamConstraints als een invoerargument, dat de voorkeuren en / of vereisten definieert voor capture-apparaten en vastgelegde mediastreams, zoals camera's facingMode, microfoonvolume en videoresolutie.
Door MediaStreamConstraints, je kunt ook het specifieke vastgelegde apparaat kiezen met behulp van de apparaat ID, die kan worden afgeleid van de enumerateDevices () methode. Zodra de gebruiker toestemming verleent, de getUserMedia () oproep zal een belofte retourneren met een MediaStream-object als het specifiek is MediaStreamConstraints kan worden voldaan.
Dit alles zonder een plug-in te moeten downloaden! In dit voorbeeld duiken we de API in en maken we een aantal nette filters voor de video en afbeeldingen die we gaan maken. Ondersteunt uw browser het? Goed getUserMedia () bestaat al sinds Chrome 21, Opera 18 en Firefox 17 en werkt nu in Edge.
Functiedetectie houdt een eenvoudige controle in op het bestaan van navigator.getUserMedia. Het is een groot project om in elke browser in te checken, dus ik zou aanraden om Modernizr gewoon te gebruiken om te controleren. Dit is hoe het werkt:
Accentsconagua
if (Modernizr.getusermedia) var getUM = Modernizr.prefixed ('getUserMedia', navigator); getUM (video: true, function (// ... // ...Zonder Modernizr, zoals aangetoond in dit voorbeeld, zou u moeten gebruiken:
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (! navigator.getuserMedia) Console.log ('U gebruikt een browser die de Media Capture API niet ondersteunt'); In onze HTML kun je de videotag zien aan de bovenkant van de pagina. Je zult merken dat het ook is ingesteld om automatisch af te spelen. Zonder dat zou de video permanent worden bevroren op het eerste frame.
Er is momenteel geen bron voor de mediaset, maar we zullen die bron binnenkort via JavaScript injecteren.
Deze nieuwe functionaliteit kan een aantal nieuwe kansen voor ontwikkelaars mogelijk maken, maar het kan ook een beveiligingsrisico voor de eindgebruiker zijn. Daarom is het eerste dat u opvalt wanneer u deze web-app start, dat deze toestemming vraagt om uw webcam te gebruiken.
GetUserMedia- accepteert een paar parameters. De eerste is een object dat de details en vereisten specificeert voor elk type medium waartoe u toegang wilt hebben. Voor toegang tot de webcam moet de eerste parameter zijn video: true. Bovendien, om te gebruiken zowel de microfoon als de camera video: true, audio: true.
Dit is waar dingen echt interessant worden. We gebruiken ook de methode MediaDevices.enumerate Apparaten in dit voorbeeld. Hiermee verzamelt u informatie over de media-invoer / uitvoerapparaten die op uw systeem beschikbaar zijn, zoals microfoons, camera's en luidsprekers. Dit is een belofte die verschillende eigenschappen zal teruggeven, inclusief het soort (type) apparaat, zoals videoinput, Audio-ingang, of Audio uitgang. Bovendien kan het een unieke ID genereren in de vorm van een string met een unieke ID (videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi + SqfBZZ8 =) en ten slotte een label om het apparaat te beschrijven, zoals FaceTime HD-camera (ingebouwd). Dit is echter nog steeds een experimentele technologie en wordt nog niet eens vermeld op CanIUse.com.
In de initalizeVideoStream functie, kunt u zien dat we de video-tag van onze pagina krijgen en de broncode instellen op de stream die we doorgeven. De stream zelf is een klodder. Als de browser de ondersteuning niet ondersteunt srcObject attribuut, het valt terug om een URL uit de mediastream te maken en stelt die in.
// initializeVideoStream () - Terugbelfunctie wanneer getUserMedia () met succes retourneert met een mediaStream-object // 1. Stel de mediaStream in op de videotag // 2. Gebruik het kenmerk 'srcObject' om te bepalen of de standaardgebaseerde API of de API moet worden gebruikt verouderde versie 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; ; Ik ben niet erg goed in het maken van foto's, dus ik vertrouw vaak op de filters die Instagram voor mij biedt. Maar wat als u uw eigen filters zou kunnen toepassen op uw video of statische afbeelding? Dat kan je wel!
Ik heb een eenvoudige functie voor de videofeed gemaakt, waarmee ik in realtime CSS-filters kan toepassen. De afbeelding is bijna identiek.
// changeCssFiltersOnVid () - Blader door CSS-filters toegepast op de videostream // 1. Grijp een verwijzing naar de videotag // 2. Bewaar de originele CSS-klassen terwijl u nog steeds de filters toevoegt // 3. Doorloop alle filters 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); Aan de bovenkant van de klas heb ik een reeks filters om doorheen te lussen. Ze worden opgeslagen als een tekenreeks, die overeenkomt met klassen met identieke namen in CSS.
// CSS-filters var-index = 0; var filters = ['grijswaarden', 'sepia', 'vervagen', 'omkeren', 'helderheid', 'contrast', '];
En in de CSS:
/ * afbeelding * videofilters * /. grijswaarden -webkit-filter: grijstinten (1); -moz-filter: grijsschaal (1); -ms-filter: grijsschaal (1); filter: grijsschaal (1); .sepia -webkit-filter: sepia (1); -moz-filter: sepia (1); -ms-filter: sepia (1); filter: sepia (1); .blur -webkit-filter: vervagen (3px); -moz-filter: onscherpte (3px); -ms-filter: onscherpte (3px); filter: vervagen (3px);
U kunt meer voorbeelden bekijken van hoe dit werkt en waarden in realtime wijzigen op de Edge-testritpagina.
Als u de code doorzoekt, ziet u mogelijk enkele andere functies waarmee u niet meteen vertrouwd bent. Het eerste dat mijn aandacht trok was navigator.msSaveBlob. Met de Blob-constructor kunt u eenvoudig een blob (in feite een bestand) rechtstreeks op de client maken en manipuleren. Het wordt ondersteund in IE 10+.
Met de msSaveBlob-methode kunt u dit blob-object (in dit geval ons snapshot-image) opslaan op schijf. Het heeft ook een broer / zus-methode, msSaveOrOpenBlob, waarmee je ook de afbeelding vanuit de browser kunt openen.
// savePhoto () - Functie wordt aangeroepen wanneer gebruiker op het canvaselement klikt // 1. Als msSaveBlob wordt ondersteund, haalt u de foto-blob uit het canvas en slaat u het afbeeldingsbestand op // 2. Anders stelt u het downloadkenmerk van het anker in element en download het afbeeldingsbestand 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 ('klik', savePhoto); document.getElementById ('photoViewText'). innerHTML = "; photoReady = false;;Als de browser de methode ondersteunt, vermindert het de hoeveelheid code die we moeten schrijven om een afbeelding op te slaan.
Dit is slechts het begin. We kunnen ook WebGL hiermee gebruiken, waardoor zelfs nog meer filters kunnen worden toegepast, evenals een real-time video / audio-feed in zeer interactieve omgevingen. Misschien zal dat mijn volgende project zijn ...
Bovendien kunt u aansluiten op de Web Audio API om frequentiemodulatie toe te passen op uw audio-uitvoer. Dit voorbeeld van de Web Audio-tuner illustreert het goed. Sommige mensen gaan meer over visueel leren, dus bekijk ook dit Microsoft-voorbeeld.
Ten slotte, omdat mobiele browsers meer van deze technologie blijven gebruiken, kunt u deze JavaScript-API's gebruiken om te koppelen aan de onderliggende hardware en deze te laten werken op mobiele apparaten, ongeacht het platform. Het is een goed moment om een webontwikkelaar te zijn en hopelijk, nadat je dit hebt gebruikt, begrijp je waarom ik zo enthousiast ben om er deel van uit te maken.
Bekijk de broncode en bekijk een werkvoorbeeld.
Microsoft heeft veel gratis leren over veel open source JavaScript-onderwerpen en we zijn op een missie om nog veel meer met Microsoft Edge te maken. Hier zijn enkele om te bekijken:
En enkele gratis tools om aan de slag te gaan: Visual Studio Code, Azure Trial en testtools voor meerdere browsers - allemaal beschikbaar voor Mac, Linux of Windows.
Dit artikel maakt deel uit van de web dev tech-serie van Microsoft. We zijn verheugd om te delen Microsoft Edge en het nieuwe EdgeHTML-renderingengine met jou. Download gratis virtuele machines of test op afstand op uw Mac, iOS, Android of Windows-apparaat @ http://dev.modern.ie/.
