Wyciągajcie szampana i pączki! Najczęściej oznaczona gwiazdką funkcja Chrome, która kiedykolwiek została wdrożona, została wdrożona.
Wyobraź sobie dyktafon, który synchronizuje filmy z danymi geolokalizacji, lub bardzo prostą aplikację do obsługi notatek głosowych albo widżet, który pozwala nagrać film i przesłać go do YouTube – wszystko to bez wtyczek.
Interfejs MediaRecorder API umożliwia nagrywanie dźwięku i filmów z aplikacji internetowej. Jest teraz dostępny w przeglądarkach Firefox oraz w Chrome na Androida i komputery.
Wypróbuj to tutaj.
Interfejs API jest prosty, co pokażę na przykładzie kodu z repozytorium przykładowego repozytorium WebRTC. Pamiętaj, że interfejsu API można używać tylko z bezpiecznych źródeł: HTTPS lub localhost.
Najpierw utwórz instancję MediaRecorder za pomocą MediaStream. Opcjonalnie możesz użyć parametru options, aby określić odpowiedni format wyjściowy:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
Element MediaStream może pochodzić z:
- Połączenie
getUserMedia(). - Urządzenie odbiorcy połączenia WebRTC.
- nagranie ekranu,
- Web Audio, gdy to rozwiązanie zostanie zaimplementowane.
W przypadku options można określić typ MIME, a w przyszłości szybkości transmisji danych dźwięku i obrazu.
Typy MIME mają bardziej lub mniej szczegółowe wartości, łączące kontener i kodeki. Na przykład:
- audio/webm
- video/webm
- video/webm;codecs=vp8,
- video/webm;codecs=vp9
Aby sprawdzić, czy dany typ MIME jest obsługiwany, na przykład podczas tworzenia instancji MediaRecorder, użyj statycznej metody MediaRecorder.isTypeSupported():
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 {
// ...
}
Pełną listę typów MIME obsługiwanych przez MediaRecorder w Chrome znajdziesz tutaj.
Następnie dodaj moduł obsługi danych i wywołaj metodę start(), aby rozpocząć nagrywanie:
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 {
// ...
}
}
Ten przykład dodaje obiekt Blob do tablicy recordedChunks, gdy dostępne są dane. Metoda start() może opcjonalnie zawierać argument timeSlice, który określa długość multimediów do przechwycenia dla każdego Bloba.
Po zakończeniu nagrywania powiedz MediaRecorder:
mediaRecorder.stop();
Odtwarzanie nagranych kropek w elemencie wideo przez utworzenie „superkropki” z tablicy nagranych kropek:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Możesz też przesłać dane na serwer za pomocą XHR lub użyć interfejsu API, np. YouTube (patrz eksperymentalny pokaz poniżej).
Można je pobrać za pomocą hakowania linków:
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);
}
Opinie na temat interfejsów API i demo
Możliwość nagrywania dźwięku i obrazu bez wtyczek jest stosunkowo nowa w przypadku aplikacji internetowych, dlatego szczególnie cenimy sobie opinie na temat interfejsów API.
- Błąd implementacji MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Prezentacje: github.com/webrtc/samples
Chcielibyśmy też poznać scenariusze użytkowania, które są dla Ciebie najważniejsze, oraz funkcje, które powinny być priorytetowe. Dodaj komentarz do tego artykułu lub śledź postępy prac na stronie crbug.com/262211.
Prezentacje
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (ten sam kod, prostszy adres URL na urządzenia mobilne)
- Nagraj film i prześlij go do YouTube za pomocą eksperymentalnego niestandardowego elementu
<google-youtube-upload>
Aplikacje
- Aplikacja Voice Memos autorstwa Paula Lewisa obsługuje teraz MediaRecorder, a w przypadku przeglądarek, które nie obsługują dźwięku MediaRecorder, korzysta z polyfilla.
wypełniacze;
- MediaStreamRecorder autorstwa Muaza Khana to biblioteka JavaScriptu do nagrywania dźwięku i obrazu, która jest zgodna z MediaRecorder.
- Recorderjs umożliwia nagrywanie z węzła interfejsu Web Audio API. Możesz to zobaczyć w działaniu w aplikacji Voice Memos Paula Lewisa.
Obsługa przeglądarek
- Chrome 49 lub nowszy,
- Chrome na komputery 47 i 48 z funkcjami eksperymentalnych platform internetowych włączonymi na chrome://flags
- Firefox od wersji 25
- Edge: „Under Consideration” (pod uwagę).
Specyfikacja
w3c.github.io/mediacapture-record/MediaRecorder.html