Neem audio en video op met MediaRecorder

Sam Dutton

Haal de champagne en de donuts tevoorschijn! De Chrome-functie met de meeste sterren OOIT is nu geïmplementeerd.

Stel je een skipisterecorder voor die video synchroniseert met GeoLocation-gegevens, of een supereenvoudige spraakmemo-app, of een widget waarmee je een video kunt opnemen en deze naar YouTube kunt uploaden - allemaal zonder plug-ins.

Met de MediaRecorder API kunt u audio en video opnemen vanaf een webapp. Het is nu beschikbaar in Firefox en in Chrome voor Android en desktop.

Probeer het hier eens .

Opmerking: een woordje over ondersteuning - Als u MediaRecorder in Chrome 47 en 48 wilt gebruiken, schakelt u experimentele webplatformfuncties in via de chrome://flags pagina. - Audio-opname werkt in Firefox en in Chrome 49 en hoger; Chrome 47 en 48 ondersteunen alleen video-opnames. - In Chrome op Android kun je opnames gemaakt met MediaRecorder opslaan en downloaden, maar het is nog niet mogelijk om een ​​opname in een video-element te bekijken via window.URL.createObjectURL() . Zie deze fout .

De API is eenvoudig, wat ik zal demonstreren met behulp van code uit de WebRTC-voorbeeldrepository demo . Houd er rekening mee dat de API alleen vanaf een veilige oorsprong kan worden gebruikt: HTTPS of localhost.

Maak eerst een MediaRecorder met een MediaStream. Gebruik optioneel een options om het gewenste uitvoerformaat op te geven:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

De MediaStream kan afkomstig zijn van:

• Een getUserMedia() -aanroep.
• De ontvangende kant van een WebRTC-oproep.
• Een schermopname.
• Webaudio, zodra dit probleem is geïmplementeerd.

Voor options is het mogelijk om het MIME-type en, in de toekomst, audio- en videobitrates op te geven.

MIME-typen hebben min of meer specifieke waarden, waarbij container en codecs worden gecombineerd. Bijvoorbeeld:

• audio/webm
• video/webm
• video/webm;codecs=vp8
• video/webm;codecs=vp9

Gebruik de statische methode MediaRecorder.isTypeSupported() om te controleren of een MIME-type wordt ondersteund, bijvoorbeeld wanneer u MediaRecorder instantieert:

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

De volledige lijst met MIME-typen die door MediaRecorder in Chrome worden ondersteund, is hier beschikbaar.

Let op: Instantiatie zal mislukken als de browser het opgegeven MIME-type niet ondersteunt, dus gebruik MediaRecorder.isTypeSupported() of try/catch - of laat het options argument achterwege als u tevreden bent met de standaardinstellingen van de browser.

Voeg vervolgens een gegevenshandler toe en roep de methode start() aan om de opname te starten:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

In dit voor beeld wordt een BLOB toegevoegd aan de array recordedChunks wanneer er gegevens beschikbaar komen. De methode start() kan optioneel een timeSlice -argument krijgen dat de lengte van de media specificeert die voor elke Blob moet worden vastgelegd.

Wanneer u klaar bent met opnemen, vertelt u de MediaRecorder:

mediaRecorder.stop();

Speel de opgenomen Blobs af in een video-element door een 'super-Blob' te maken uit de reeks opgenomen Blobs:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

Als alternatief kunt u via XHR naar een server uploaden of een API zoals YouTube gebruiken (zie de experimentele demo hieronder).

Downloaden kan worden bereikt met wat link-hacking:

function download() {
    var blob = new Blob(recordedChunks, {
    type: 'video/webm'
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

Feedback over de API's en demo's

De mogelijkheid om audio en video op te nemen zonder plug-ins is relatief nieuw voor webapps, dus we stellen uw feedback over de API's bijzonder op prijs.

• Implementatiefout bij MediaRecorder: crbug.com/262211
• Chrome: crbug.com/new
• Firefox: bugzil.la
• Demo's: github.com/webrtc/samples

We willen ook graag weten welke gebruiksscenario's voor u het belangrijkst zijn en aan welke functies u prioriteit wilt geven. Reageer op dit artikel of volg de voortgang op crbug.com/262211 .

Demo's

• webrtc.github.io/samples/src/content/getusermedia/record
• simpl.info/mr (dezelfde code, eenvoudigere URL voor mobiel!)
• Neem een ​​video op en upload deze naar YouTube met een experimenteel aangepast <google-youtube-upload> -element

Apps

• De Voice Memos- app van Paul Lewis heeft nu MediaRecorder-ondersteuning, polyfilled voor browsers die MediaRecorder-audio niet ondersteunen.

Polyvullingen

• Muaz Khan's MediaStreamRecorder is een JavaScript-bibliotheek voor het opnemen van audio en video, compatibel met MediaRecorder.
• Recorderjs maakt opnemen mogelijk vanaf een Web Audio API-knooppunt. Je kunt dit in actie zien in de Voice Memos -app van Paul Lewis.

Browser-ondersteuning

• Standaard Chrome 49 en hoger
• Chrome-desktop 47 en 48 met experimentele webplatformfuncties ingeschakeld via chrome://flags
• Firefox vanaf versie 25
• Rand : 'In overweging'

Spec

w3c.github.io/mediacapture-record/MediaRecorder.html

API-informatie

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API