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.
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.
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