Mediastream Recording API: Fang Dit Indhold Nemt

I en verden, hvor digitalt indhold er konge, er evnen til at fange og genbruge medier direkte fra din webbrowser mere værdifuld end nogensinde. Dette er præcis, hvad MediaStream Recording API muliggør. Ofte omtalt som Media Recording API eller MediaRecorder API, er det et kraftfuldt værktøj, der er tæt forbundet med Media Capture and Streams API og WebRTC API. Dets primære formål er at give udviklere mulighed for at fange data genereret af et MediaStream-objekt eller et HTMLMediaElement (som f.eks. et <audio> eller <video> element) med henblik på analyse, videre behandling eller lagring på disk. Det mest bemærkelsesværdige er, at det er overraskende ligetil at arbejde med, hvilket åbner op for en verden af muligheder for interaktive webapplikationer.

Selvom visse dele af denne funktionalitet kan have varierende grad af understøttelse på tværs af platforme, er MediaStream Recording API generelt veletableret og fungerer på mange enheder og browserversioner. Faktisk har det været bredt tilgængeligt på tværs af de fleste moderne browsere siden april 2021, hvilket cementerer dets position som en pålidelig og tilgængelig teknologi for webudviklere.

Kernekoncepter og Anvendelse af MediaStream Recording API

MediaStream Recording API er centreret omkring én enkelt, men yderst vigtig, grænseflade: MediaRecorder. Det er dette objekt, der udfører alt arbejdet med at tage data fra en MediaStream og levere det til dig til videre behandling. Dataene leveres i en serie af dataavailable-begivenheder, og de er allerede i det format, du specificerer, når du opretter MediaRecorder-instansen. Dette giver dig den fleksibilitet, du har brug for, til at behandle dataene yderligere, f.eks. ved at filtrere dem, eller blot skrive dem direkte til en fil, som du ønsker.

Optagelsesprocessen Trin for Trin

Processen med at optage en stream er bemærkelsesværdigt enkel og kan opdeles i nogle få logiske trin:

1. Opsætning af Mediekilden: Først skal du definere din mediekilde. Dette kan enten være et MediaStream-objekt, som typisk kommer fra en mikrofon, et kamera eller en skærmoptagelse, eller et HTMLMediaElement i form af et <audio>- eller <video>-element, der afspiller indhold.
2. Oprettelse af MediaRecorder-objektet: Dernæst opretter du et MediaRecorder-objekt. Her specificerer du kildestreamen og eventuelle ønskede indstillinger. Disse indstillinger kan omfatte containerens MIME-type (f.eks. 'video/webm' eller 'audio/ogg') og de ønskede bitrater for dens spor. Valget af MIME-type er afgørende, da det bestemmer formatet for de optagede data.
3. Indstilling af ondataavailable-begivenhedshåndterer: Du skal derefter indstille en begivenhedshåndterer for dataavailable-begivenheden. Denne funktion vil blive kaldt, hver gang der er nye data tilgængelige for dig at arbejde med. Hver gang denne håndterer udløses, vil den modtage en Blob, der indeholder de seneste mediebytes.
4. Start af Optagelse: Når kildemediet afspilles, og du er klar til at begynde optagelsen, kalder du blot MediaRecorder.start()-metoden for at starte optagelsen. Du kan også angive et tidsinterval i millisekunder som et argument til start(), hvis du ønsker at modtage data i mindre bidder med jævne mellemrum.
5. Håndtering af Indsamlede Data: Din dataavailable-begivenhedshåndterer bliver kaldt, hver gang der er data klar til dig at gøre med, som du vil. Begivenheden har et data-attribut, hvis værdi er en Blob, der indeholder mediedataene. Du kan derefter behandle disse Blob'er yderligere, f.eks. ved at tilføje dem til en array, eller skrive dem direkte til en fil. Det er også muligt at tvinge en dataavailable-begivenhed til at forekomme ved at kalde MediaRecorder.requestData(), hvilket leverer de seneste data til dig, så du kan filtrere, gemme eller hvad end du ønsker.
6. Stop af Optagelse: Optagelsen stopper automatisk, når kildemediet stopper med at afspille. Du kan dog også stoppe optagelsen manuelt til enhver tid ved at kalde MediaRecorder.stop()-metoden. Det er vigtigt at bemærke, at individuelle Blob-objekter, der indeholder dele af de optagede medier, ikke nødvendigvis kan afspilles individuelt. Mediet skal samles igen, typisk til én stor Blob, før det kan afspilles korrekt.
7. Fejlhåndtering: Hvis der opstår problemer under optagelsen, sendes en error-begivenhed til MediaRecorder-objektet. Du kan lytte efter disse fejl ved at opsætte en onerror-begivenhedshåndterer, hvilket er afgørende for robust applikationsudvikling.

Et Praktisk Eksempel: Optagelse fra et HTML Canvas

For at illustrere, hvor nemt det er at bruge MediaStream Recording API, lad os se på et eksempel, hvor vi optager indhold fra et HTML <canvas>-element og gemmer det som en WebM-video. Dette eksempel viser, hvordan man fanger en stream fra et canvas, optager den i 9 sekunder og derefter downloader den.

const canvas = document.querySelector("canvas"); // Fang en stream fra canvas med 25 billeder per sekund. const stream = canvas.captureStream(25); const recordedChunks = []; console.log(stream); // Definer indstillinger for optageren, her med WebM og VP9 codec. const options = { mimeType: "video/webm; codecs=vp9" }; // Opret en ny MediaRecorder-instans med streamen og de definerede indstillinger. const mediaRecorder = new MediaRecorder(stream, options); // Definer begivenhedshåndtereren for 'dataavailable'. mediaRecorder.ondataavailable = handleDataAvailable; // Start optagelsen. mediaRecorder.start(); function handleDataAvailable(event) { console.log("data-available"); // Tjek om der er data og at dataens størrelse er større end nul. if (event.data.size > 0) { // Tilføj den nye Blob med data til vores array af optagede bidder. recordedChunks.push(event.data); console.log(recordedChunks); // Kald download-funktionen for at gemme filen, når alle bidder er samlet. download(); } else { // Håndter tilfælde hvor event.data er tom (ikke relevant i dette eksempel, men god praksis). // … } } function download() { // Opret en enkelt Blob ud fra alle de optagede bidder. const blob = new Blob(recordedChunks, { type: "video/webm" }); // Opret en midlertidig URL til Bloben. const url = URL.createObjectURL(blob); // Opret et usynligt 'a'-element (link) for at udløse download. const a = document.createElement("a"); document.body.appendChild(a); a.style = "display: none"; a.href = url; a.download = "test.webm"; // Filnavn for download. a.click(); // Simuler et klik på linket for at starte download. // Frigiv den midlertidige URL for at frigøre hukommelse. URL.revokeObjectURL(url); } // Demo: Stop optagelsen efter 9 sekunder. setTimeout((event) => { console.log("stopping"); mediaRecorder.stop(); }, 9000); 

Dette eksempel demonstrerer hele workflowet: fra at fange en stream til at optage og til sidst downloade den færdige fil. canvas.captureStream(25) fanger indholdet af canvas'et som en mediestream med 25 billeder i sekundet. recordedChunks-arrayet bruges til at opsamle de små Blob-bidder, der kommer ind via dataavailable-begivenhederne. Når optagelsen stopper (her efter 9 sekunder via setTimeout), samles alle Blob-bidderne til én stor Blob, som derefter omdannes til en downloadbar fil via en midlertidig URL.

Kontrol og Status for Optageren

Ud over at starte og stoppe optagelsen kan du også bruge egenskaberne for MediaRecorder-objektet til at bestemme optagelsesprocessens aktuelle tilstand. Dette kan være nyttigt for at vise brugeren, om optagelsen er aktiv, pauset eller stoppet. MediaRecorder tilbyder også pause()- og resume()-metoder, som giver dig mulighed for at sætte optagelsen på pause og derefter genoptage den, hvilket giver en mere fleksibel brugeroplevelse.

En anden vigtig funktionalitet er muligheden for at kontrollere, om en specifik MIME-type understøttes af browseren til optagelse. Dette er muligt ved at kalde MediaRecorder.isTypeSupported()-metoden. Dette er afgørende for at sikre kompatibilitet og tilbyde brugeren de mest optimale optagelsesformater baseret på deres browsers muligheder. Hvis du f.eks. vil vide, om video/webm; codecs=vp9 understøttes, kan du kalde MediaRecorder.isTypeSupported('video/webm; codecs=vp9'), som vil returnere true eller false.

Metoder i MediaRecorder-objektet

Her er en oversigt over de vigtigste metoder, du vil bruge med MediaRecorder:

Identifikation af Potentielle Inputkilder

Hvis dit mål er at optage input fra kamera og/eller mikrofon, kan det være en god idé at undersøge de tilgængelige inputenheder, før du begynder processen med at konstruere MediaRecorder. For at gøre dette skal du kalde navigator.mediaDevices.enumerateDevices() for at få en liste over de tilgængelige medieenheder. Du kan derefter undersøge den liste og identificere potentielle inputkilder og endda filtrere listen baseret på ønskede kriterier, f.eks. kun at vise lydenheder eller videokameraer.

Følgende kodeeksempel viser, hvordan enumerateDevices() bruges til at undersøge de tilgængelige inputenheder, finde dem, der er lydinputenheder, og oprette <option>-elementer, der derefter tilføjes til et <select>-element, der repræsenterer en inputkildevælger:

navigator.mediaDevices.enumerateDevices().then((devices) => { devices.forEach((device) => { const menu = document.getElementById("input-devices"); // Tjek om enheden er en lydinputenhed. if (device.kind === "audioinput") { const item = document.createElement("option"); item.textContent = device.label; // Vis enhedens navn til brugeren. item.value = device.deviceId; // Gem enhedens ID som værdi. menu.appendChild(item); // Tilføj elementet til dropdown-menuen. } }); }); 

Kode, der ligner dette, kan bruges til at lade brugeren begrænse de enheder, de ønsker at bruge, hvilket giver en høj grad af brugertilpasning og kontrol over optagelsesprocessen.

Vigtige Grænseflader i MediaStream Recording API'en

Ud over MediaRecorder er der et par andre grænseflader, der er centrale for API'ens funktionalitet:

• BlobEvent: Hver gang en 'bid' af mediedata er færdig med at blive optaget, leveres den til forbrugere i Blob-form ved hjælp af en BlobEvent af typen dataavailable. Dette event-objekt indeholder den faktiske mediedata i sin data-egenskab.
• MediaRecorder: Den primære grænseflade, der implementerer MediaStream Recording API. Dette er objektet, du interagerer med for at starte, stoppe, pause og genoptage optagelser samt kontrollere status og understøttede formater.
• MediaRecorderErrorEvent (Forældet/Ikke-standard): Denne grænseflade repræsenterer fejl, der er kastet af MediaStream Recording API. Dens error-egenskab er en DOMException, der specificerer den fejl, der opstod. Selvom den er forældet, er det vigtigt at være opmærksom på fejlhåndtering via onerror-begivenhedshåndtereren.

Ofte Stillede Spørgsmål om MediaStream Recording API

Hvad kan jeg optage med MediaStream Recording API?

Du kan optage indhold fra en række forskellige kilder, herunder en brugers mikrofon (lydinput), kamera (videoinput), skærmdeling (video af skærmindhold), eller endda indhold, der afspilles i et HTML <audio> eller <video> element. Derudover kan du, som vist i eksemplet, optage dynamisk genereret indhold fra et HTML <canvas> element, hvilket åbner op for optagelse af spil, animationer eller interaktive visualiseringer.

Hvilke filformater understøttes af API'en?

Understøttede filformater (MIME-typer) varierer afhængigt af browseren og dens codecs. Almindelige formater inkluderer dog ofte WebM (med VP8, VP9, Opus, Vorbis codecs) og nogle gange MP4 (med H.264, AAC codecs). Du kan altid tjekke, om en specifik MIME-type understøttes i brugerens browser ved hjælp af MediaRecorder.isTypeSupported('din/mime-type').

Er de individuelle datablokke (Blobs) spilbare?

Nej, de individuelle Blob-objekter, der leveres via dataavailable-begivenheder, er typisk ikke spilbare alene. De repræsenterer 'bidder' af data, der skal samles. For at få en afspilningsbar fil skal alle disse Blob-bidder samles til én stor Blob, som derefter kan gemmes eller afspilles.

Hvordan gemmer jeg den optagede fil?

Efter at have samlet alle de optagede Blob-bidder til en enkelt Blob, kan du gemme den ved at oprette en midlertidig URL til denne Blob ved hjælp af URL.createObjectURL(). Derefter kan du oprette et usynligt <a> (link) element, indstille dets href til denne URL og dets download-attribut til det ønskede filnavn. Ved at simulere et klik på dette link (a.click()) kan du udløse en download i browseren. Husk at kalde URL.revokeObjectURL() efter download for at frigøre ressourcer.

Er det sikkert at bruge MediaStream Recording API?

Ja, brugen af MediaStream Recording API er sikker. For at optage fra en brugers mikrofon, kamera eller skærm kræves der altid eksplicit samtykke fra brugeren. Browseren vil vise en prompt, der beder om tilladelse, før den giver adgang til disse enheder. Dette sikrer, at brugerens privatliv respekteres, og at optagelse kun sker med deres viden og accept.

MediaStream Recording API er et fundamentalt værktøj for moderne webapplikationer, der kræver medieoptagelsesfunktionalitet. Med dets intuitive grænseflade og brede understøttelse kan udviklere nemt integrere robuste optagelsesløsninger direkte i browseren, hvilket giver brugerne mulighed for at skabe og dele indhold som aldrig før. Fra simple lydoptagere til komplekse skærmdelingsværktøjer er mulighederne nærmest uendelige.

Hvis du vil læse andre artikler, der ligner Mediastream Recording API: Fang Dit Indhold Nemt, kan du besøge kategorien Teknologi.