Szampan i pączki! Funkcja Chrome najbardziej oznaczona gwiazdką została wdrożona.
Wyobraźmy sobie np. rejestrator narciarski, który synchronizuje film z danymi geograficznymi, albo bardzo prostą aplikację do notatek głosowych lub widżet, który umożliwia nagranie filmu i przesłanie go do YouTube – a wszystko to bez wtyczek.
Interfejs MediaRecorder API umożliwia nagrywanie dźwięku i obrazu z aplikacji internetowej. Jest już dostępny w Firefoksie i Chrome na Androida oraz na komputerach.
Wypróbuj tę funkcję tutaj.
Interfejs API jest prosty, co zademonstruję za pomocą kodu z przykładowego repozytorium WebRTC. Pamiętaj, że interfejsu API można używać tylko z bezpiecznych źródeł: HTTPS lub lokalnego hosta.
Najpierw utwórz instancję MediaRecorder z MediaStream. Opcjonalnie użyj parametru options, aby określić wymagany format wyjściowy:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
Adresy MediaStream mogą pochodzić z:
- Połączenie z numerem
getUserMedia(). - Zakończenie odbierania wywołania WebRTC.
- Nagranie ekranu.
- Web Audio, po zaimplementowaniu tego problemu.
W przypadku options można określić typ MIME, a w przyszłości także szybkość transmisji bitów audio i wideo.
Typy MIME mają bardziej lub mniej szczegółowe wartości, łącząc kontener i kodeki. Na przykład:
- audio/webm
- film/webm
- video/webm;codecs=vp8
- video/webm;codecs=vp9
Użyj metody statycznej MediaRecorder.isTypeSupported(), aby sprawdzić, czy dany typ MIME jest obsługiwany, na przykład podczas tworzenia instancji 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 {
// ...
}
Pełna lista typów MIME obsługiwanych przez MediaRecorder w Chrome jest dostępna 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 {
// ...
}
}
W tym przykładzie obiekt Blob jest dodawany do tablicy recordedChunks, gdy dostępne są dane. Metoda start() może mieć opcjonalnie argument timeSlice określający długość multimediów do przechwycenia w przypadku każdego obiektu blob.
Po zakończeniu nagrywania powiedz programowi MediaRecorder:
mediaRecorder.stop();
Odtwórz zarejestrowane obiekty blob w elemencie wideo, tworząc „super-Blob” z tablicy nagranych blobów:
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 (zobacz eksperymentalną prezentację poniżej).
Pobranie może być związane z hakowaniem 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 wersji demonstracyjnych
Możliwość nagrywania dźwięku i obrazu bez używania wtyczek jest w przypadku aplikacji internetowych stosunkowo nowa, dlatego szczególnie cenimy sobie Twoją opinię na temat interfejsów API.
- Błąd implementacji MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Wersje demonstracyjne: github.com/webrtc/samples
Chcielibyśmy też dowiedzieć się, które scenariusze użytkowania są dla Ciebie najważniejsze oraz jakie funkcje powinniśmy traktować priorytetowo. Skomentuj ten artykuł lub śledź postępy na stronie crbug.com/262211.
Przykłady
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (ten sam kod, prostszy URL na komórki)
- Nagraj film i prześlij go do YouTube z eksperymentalnym elementem niestandardowym
<google-youtube-upload>.
Aplikacje
- Aplikacja Voice Memos Paula Lewisa obsługuje teraz technologię MediaRecorder, w której wypełniona jest poligrafia w przeglądarkach, które nie obsługują dźwięku MediaRecorder.
Polyfill
- MediaStreamRecorder firmy Muaz Khan to biblioteka JavaScript do nagrywania dźwięku i wideo, zgodna z MediaRecorder.
- Recorderjs umożliwia nagrywanie z węzła Web Audio API. Możesz to zobaczyć w aplikacji Voice Memos Paula Lewisa.
Obsługiwane przeglądarki
- domyślnie Chrome 49 i nowsze wersje,
- Chrome 47 i 48 z włączonymi eksperymentalnymi funkcjami platformy internetowej pod adresem chrome://flags
- Firefox z wersji 25
- Brzegowy: „W trakcie rozważania”
Dane techniczne
w3c.github.io/mediacapture-record/MediaRecorder.html