Holen Sie den Champagner und die Donuts raus! Die am häufigsten mit Sternchen markierte Chrome-Funktion überhaupt wurde jetzt implementiert.
Stellen Sie sich eine App vor, die Videos mit Geolocation-Daten synchronisiert, oder eine ganz einfache Sprachmemo-App oder ein Widget, mit dem Sie ein Video aufnehmen und auf YouTube hochladen können – alles ohne Plug-ins.
Mit der MediaRecorder API können Sie Audio und Video in einer Web-App aufzeichnen. Sie ist jetzt in Firefox und in Chrome für Android und Desktop verfügbar.
Hier können Sie die Funktion ausprobieren.
Die API ist unkompliziert. Das zeige ich anhand von Code aus der WebRTC-Beispiel-Demo. Die API kann nur von sicheren Ursprüngen verwendet werden: HTTPS oder localhost.
Instanziieren Sie zuerst einen MediaRecorder mit einem MediaStream. Optional können Sie mit dem Parameter options das gewünschte Ausgabeformat angeben:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
Der MediaStream kann aus folgenden Quellen stammen:
- Ein
getUserMedia()-Anruf. - Die Empfangsseite eines WebRTC-Anrufs.
- Eine Bildschirmaufzeichnung
- Web Audio, sobald dieses Problem behoben ist.
Für options kann der MIME-Typ und in Zukunft auch die Bitraten für Audio und Video angegeben werden.
MIME-Typen haben mehr oder weniger spezifische Werte, die Container und Codecs kombinieren. Beispiel:
- Audio/WebM
- video/webm
- video/webm;codecs=vp8
- video/webm;codecs=vp9
Verwenden Sie die statische Methode MediaRecorder.isTypeSupported(), um zu prüfen, ob ein MIME-Typ unterstützt wird, z. B. beim Instanziieren von MediaRecorder:
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 {
// ...
}
Die vollständige Liste der MIME-Typen, die von MediaRecorder in Chrome unterstützt werden, ist hier verfügbar.
Fügen Sie als Nächstes einen Daten-Handler hinzu und rufen Sie die Methode start() auf, um die Aufzeichnung zu 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 diesem Beispiel wird dem Array recordedChunks immer dann ein Blob hinzugefügt, wenn Daten verfügbar werden. Der Methode start() kann optional ein timeSlice-Argument übergeben werden, das die Länge der Medien angibt, die für jedes Blob erfasst werden sollen.
Wenn Sie die Aufnahme beendet haben, teilen Sie dem MediaRecorder Folgendes mit:
mediaRecorder.stop();
So spielst du die aufgezeichneten Blobs in einem Videoelement ab: Erstelle einen „Super-Blob“ aus dem Array der aufgezeichneten Blobs:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Alternativ können Sie die Datei über XHR auf einen Server hochladen oder eine API wie YouTube verwenden (siehe experimentelle Demo unten).
Der Download ist mit einigen Link-Hacks möglich:
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 zu den APIs und Demos
Die Möglichkeit, Audio und Video ohne Plug-ins aufzuzeichnen, ist für Web-Apps relativ neu. Wir freuen uns daher besonders über Ihr Feedback zu den APIs.
- MediaRecorder-Implementierungsfehler: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demos: github.com/webrtc/samples
Wir möchten auch wissen, welche Nutzungsszenarien für Sie am wichtigsten sind und welche Funktionen wir priorisieren sollen. Sie können diesen Artikel kommentieren oder den Fortschritt unter crbug.com/262211 verfolgen.
Demos
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (derselbe Code, einfachere URL für Mobilgeräte)
- Video aufnehmen und mit einem experimentellen benutzerdefinierten
<google-youtube-upload>-Element auf YouTube hochladen
Apps
- Die Voice Memos App von Paul Lewis unterstützt jetzt MediaRecorder. Für Browser, die MediaRecorder-Audio nicht unterstützen, wird ein Polyfill verwendet.
Polyfills
- MediaStreamRecorder von Muaz Khan ist eine JavaScript-Bibliothek zum Aufzeichnen von Audio und Video, die mit MediaRecorder kompatibel ist.
- Mit Recorderjs können Sie Aufnahmen von einem Web Audio API-Knoten aus starten. Ein Beispiel dafür ist die Voice Memos App von Paul Lewis.
Unterstützte Browser
- Standardmäßig in Chrome 49 und höher
- Chrome-Desktopversion 47 und 48 mit experimentellen Webplattformfunktionen, die über chrome://flags aktiviert wurden
- Firefox ab Version 25
- Edge: „Wird geprüft“
Spezifikation
w3c.github.io/mediacapture-record/MediaRecorder.html