Pak de champagne en de donuts er maar bij! De meest met sterren bekroonde Chrome-functie OOIT is nu geïmplementeerd.
Stel je een ski-afdalingsrecorder voor die video synchroniseert met geolocatiegegevens, of een supereenvoudige app voor spraakmemo's, of een widget waarmee je een video kunt opnemen en uploaden naar YouTube - allemaal zonder plug-ins.
Met de MediaRecorder API kun je audio en video opnemen vanuit een webapp. Deze is nu beschikbaar in Firefox en Chrome voor Android en desktop.
Probeer het hier .
De API is eenvoudig, wat ik zal demonstreren aan de hand van code uit de WebRTC-voorbeeldrepository demo . Let op: de API kan alleen worden gebruikt vanaf beveiligde bronnen : HTTPS of localhost.
Instantieer eerst een MediaRecorder met een MediaStream. Gebruik eventueel een options -parameter om het gewenste uitvoerformaat te specificeren:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
De MediaStream kan afkomstig zijn van:
- Een
getUserMedia()-aanroep. - Het ontvangende einde van een WebRTC-oproep.
- Een schermopname.
- Web Audio, zodra dit probleem is opgelost.
U kunt bij options het MIME-type opgeven en in de toekomst ook de audio- en videobitsnelheden .
MIME-typen hebben min of meer specifieke waarden, waarbij containers 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.
Voeg vervolgens een datahandler toe en roep de start() methode 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 {
// ...
}
}
Dit voorbeeld voegt een blob toe aan de array recordedChunks wanneer er gegevens beschikbaar zijn. De start() methode kan optioneel een timeSlice argument krijgen dat de lengte van de vast te leggen media voor elke blob specificeert.
Wanneer u klaar bent met opnemen, geeft u de MediaRecorder het volgende bericht:
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 het bestand uploaden naar een server via XHR, of een API zoals YouTube gebruiken (zie de experimentele demo hieronder).
Downloaden kan worden bereikt door middel van linkhacking:
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 web-apps. Daarom stellen we uw feedback over de API's bijzonder op prijs.
- MediaRecorder-implementatiebug: 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 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 ondersteunt nu MediaRecorder, aangevuld met browsers die geen MediaRecorder-audio ondersteunen.
Polyvullingen
- MediaStreamRecorder van Muaz Khan is een JavaScript-bibliotheek voor het opnemen van audio en video, compatibel met MediaRecorder.
- Recorderjs maakt opname mogelijk vanaf een Web Audio API-knooppunt. Je kunt dit in actie zien in de Voice Memos -app van Paul Lewis.
Browserondersteuning
- Standaard Chrome 49 en hoger
- Chrome desktop 47 en 48 met experimentele webplatformfuncties ingeschakeld via chrome://flags
- Firefox vanaf versie 25
- Edge : 'In overweging genomen'
Specificatie
w3c.github.io/mediacapture-record/MediaRecorder.html