Nehmen Sie den Champagner und die Donuts heraus! Die am häufigsten markierte Chrome-Funktion aller Zeiten wurde implementiert.
Stellen Sie sich einen Ski-Rekorder vor, der Videos mit GeoLocation-Daten synchronisiert, eine supereinfache Sprachmemo-App oder ein Widget, mit dem Sie ein Video aufzeichnen und auf YouTube hochladen können – ganz ohne Plug-ins.
Mit der MediaRecorder API kannst du Audio- und Videoinhalte aus einer Webanwendung aufnehmen. Die API ist jetzt in Firefox und Chrome für Android und Computer verfügbar.
Hier können Sie es ausprobieren.
Die API ist einfach aufgebaut. Ich werde anhand des Codes aus dem WebRTC-Beispiel-Repository-Demo zeigen. Die API kann nur von sicheren Ursprüngen verwendet werden: HTTPS oder localhost.
Instanziieren Sie zuerst einen MediaRecorder mit einem MediaStream. Verwenden Sie optional einen options-Parameter, um das gewünschte Ausgabeformat anzugeben:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
Der MediaStream kann von Folgendem stammen:
- Ein
getUserMedia()-Anruf. - Ende eines WebRTC-Anrufs beim Empfang.
- Eine Bildschirmaufzeichnung.
- Web Audio: sobald dieses Problem implementiert wurde.
Für options können Sie den MIME-Typ und in Zukunft die Bitraten für Audio und Video 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
Verwenden Sie die statische Methode MediaRecorder.isTypeSupported(), um zu prüfen, ob ein MIME-Typ unterstützt wird. Das ist z. B. dann der Fall, wenn Sie MediaRecorder instanziieren:
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 MIME-Typen, die von MediaRecorder in Chrome unterstützt werden, 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 werden. Der Methode start() kann optional ein timeSlice-Argument zugewiesen werden, das die Länge der Medien angibt, die für jeden Blob erfasst werden sollen.
Wenn du mit der Aufnahme fertig bist, teile dem MediaRecorder Folgendes mit:
mediaRecorder.stop();
Geben Sie die aufgezeichneten Blobs in einem Videoelement ab, indem Sie aus dem Array der aufgezeichneten Blobs ein „Super-Blob“ erstellen:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Alternativ können Sie Inhalte über XHR auf einen Server hochladen oder eine API wie YouTube verwenden (siehe experimentelle Demo unten).
Der Download ist durch Hacking von Links 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 wissen Ihr Feedback zu den APIs besonders zu schätzen.
- Fehler bei der MediaRecorder-Implementierung: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demos: github.com/webrtc/samples
Außerdem möchten wir wissen, welche Nutzungsszenarien für dich am wichtigsten sind und welche Funktionen wir deiner Meinung nach priorisieren sollten. Kommentieren Sie diesen Artikel oder verfolgen Sie den Fortschritt unter crbug.com/262211.
Demos
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (derselbe Code, einfachere URL für Mobilgeräte!)
- Nimm ein Video auf und lade es auf YouTube hoch. Verwende dazu ein experimentelles benutzerdefiniertes
<google-youtube-upload>-Element.
Apps
- Paul Lewiss App Voice Memos unterstützt jetzt MediaRecorder. Sie ist mit Polyfilling für Browser ausgestattet, die MediaRecorder-Audio nicht unterstützen.
Polyfills
- MediaStreamRecorder von Muaz Khan ist eine JavaScript-Bibliothek für die Aufnahme von Audio und Video, die mit MediaRecorder kompatibel ist.
- Recorderjs aktiviert die Aufnahme über einen Web Audio API-Knoten. In der Voice Memos App von Paul Lewis können Sie sich ein Bild davon machen.
Unterstützte Browser
- Standardmäßig Chrome 49 und höher
- Chrome Desktop 47 und 48 mit aktivierten experimentellen Webplattformfunktionen über chrome://flags
- Firefox ab Version 25
- Edge: „Wird geprüft“
Technische Daten
w3c.github.io/mediacapture-record/MediaRecorder.html