Champagner und Donuts sind angesagt! Die Chrome-Funktion mit den meisten Markierungen wurde jetzt implementiert.
Stellen Sie sich eine Skilaufaufzeichnung vor, die Videos mit Geolokalisierungsdaten synchronisiert, eine supereinfache Sprachmemo-App oder ein Widget, mit dem Sie ein Video aufnehmen und auf YouTube hochladen können – und das alles ohne Plugins.
Mit der MediaRecorder API können Sie Audio- und Videoinhalte aus einer Webanwendung aufzeichnen. Sie ist jetzt in Firefox und Chrome für Android-Geräte und Computer verfügbar.
Hier können Sie es ausprobieren.
Die API ist einfach. Das zeige ich anhand von Code aus der WebRTC-Beispiel-Repo-Demo. Beachten Sie, dass die API nur über sichere Ursprünge verwendet werden kann: HTTPS oder localhost.
Instanziieren Sie zuerst einen MediaRecorder mit einem MediaStream. Optional können Sie den Parameter options verwenden, um das gewünschte Ausgabeformat anzugeben:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
Der MediaStream kann aus folgenden Quellen stammen:
- Einen
getUserMedia()-Anruf - Die Empfängerseite eines WebRTC-Anrufs.
- Eine Bildschirmaufzeichnung.
- Web Audio, sobald dieses Problem behoben ist.
Für options können Sie den MIME-Typ und in Zukunft Audio- und Video-Bitraten angeben.
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
Mit der statischen Methode MediaRecorder.isTypeSupported() kannst du prüfen, ob ein MIME-Typ unterstützt wird, z. B. wenn du MediaRecorder instanzierst:
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 {
// ...
}
Eine vollständige Liste der von MediaRecorder in Chrome unterstützten MIME-Typen finden Sie hier.
Fügen Sie als Nächstes einen Daten-Handler hinzu und rufen Sie die Methode start() auf, um mit der Aufzeichnung zu beginnen:
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 recordedChunks-Array ein Blob hinzugefügt, sobald Daten verfügbar sind. Optional kann der Methode start() das Argument timeSlice übergeben werden, mit dem die Länge der Medien angegeben wird, die für jeden Blob erfasst werden sollen.
Wenn Sie mit der Aufnahme fertig sind, sagen Sie dem MediaRecorder Folgendes:
mediaRecorder.stop();
Du kannst die aufgezeichneten Blobs in einem Videoelement abspielen, indem du aus dem Array der aufgezeichneten Blobs einen „Super-Blob“ erstellst:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Alternativ können Sie die Dateien auch per XHR auf einen Server hochladen oder eine API wie die YouTube API verwenden (siehe experimentelle Demo unten).
Der Download kann durch Link-Hacking erfolgen:
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 Webanwendungen relativ neu. Deshalb freuen wir uns besonders über Ihr Feedback zu den APIs.
- Fehler bei der Implementierung von MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demos: github.com/webrtc/samples
Außerdem möchten wir wissen, welche Anwendungsfälle für Sie am wichtigsten sind und welche Funktionen wir priorisieren sollten. 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 (gleicher Code, einfachere URL für Mobilgeräte)
- Nimm ein Video auf und lade es mit einem benutzerdefinierten
<google-youtube-upload>-Testelement auf YouTube hoch.
Apps
- Die App Voice Memos von Paul Lewis unterstützt jetzt MediaRecorder. Für Browser, die MediaRecorder-Audio nicht unterstützen, wird eine Polyfill-Funktion verwendet.
Polyfills
- Der MediaStreamRecorder von Muaz Khan ist eine JavaScript-Bibliothek zum Aufzeichnen von Audio- und Videoinhalten, die mit MediaRecorder kompatibel ist.
- Recorderjs ermöglicht die Aufzeichnung über einen Web Audio API-Knoten. In der Voice Memos App von Paul Lewis können Sie sich das ansehen.
Unterstützte Browser
- Standardmäßig in Chrome 49 und höher
- Chrome-Desktopversion 47 und 48 mit aktivierten experimentellen Webplattform-Funktionen unter chrome://flags
- Firefox ab Version 25
- Edge: „Unter Prüfung“
Spezifikation
w3c.github.io/mediacapture-record/MediaRecorder.html