Wyciągajcie szampana i pączki! Wdrożyliśmy funkcję Chrome, która najczęściej otrzymywała gwiazdkę.
Wyobraź sobie rejestrator jazdy na nartach, który synchronizuje film z danymi GeoLocation, bardzo prostą aplikację do dyktafonu lub widget, który umożliwia nagrywanie filmów i przesyłanie ich do YouTube – wszystko bez wtyczek.
Interfejs MediaRecorder API umożliwia nagrywanie dźwięku i obrazu z aplikacji internetowej. Jest już dostępny w Firefoxie i Chrome na Androida oraz na 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 zabezpieczonych źródeł: HTTPS lub localhost.
Najpierw utwórz instancję MediaRecorder za pomocą MediaStream. Opcjonalnie możesz użyć parametru options, aby określić format wyjściowy:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
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ą mniej lub bardziej konkretne 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 {
// ...
}
}
W tym przykładzie pętla recordedChunks dopisuje do tablicy Blob za każdym razem, gdy dane staną się dostępne. 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 aplikacji 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).
Pobieranie może być możliwe dzięki użyciu linku do edycji:
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 wideo bez wtyczek jest stosunkowo nowa w przypadku aplikacji internetowych, dlatego szczególnie cenimy sobie opinie na temat interfejsów API.
- Błąd w implementacji MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demonstracje: 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 polyfill.
Watoliny
- 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 akcji w aplikacji Voice Memos Paula Lewisa.
Obsługa przeglądarek
- Chrome 49 i nowsze domyślnie
- Chrome na komputery z wersją 47 lub 48 z włączonymi funkcjami eksperymentalnej platformy internetowej na stronie chrome://flags
- Firefox od wersji 25
- Edge: „Under Consideration” (pod uwagę).
Specyfikacja
w3c.github.io/mediacapture-record/MediaRecorder.html