Доставайте шампанское и пончики! Самая популярная функция Chrome за всю историю реализована.
Представьте себе рекордер лыжных трасс, который синхронизирует видео с данными геолокации, или сверхпростое приложение для голосовых заметок, или виджет, который позволяет записывать видео и загружать его на YouTube — и все это без плагинов.
API MediaRecorder позволяет записывать аудио и видео из веб-приложения. Теперь он доступен в Firefox и Chrome для Android и настольных компьютеров.
Попробуйте здесь .
API прост, и я продемонстрирую его с помощью кода из демонстрационного примера репозитория WebRTC . Обратите внимание, что API можно использовать только из безопасных источников : HTTPS или localhost.
Прежде всего создайте экземпляр MediaRecorder с помощью MediaStream. При необходимости используйте параметр options , чтобы указать желаемый формат вывода:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
MediaStream может быть из:
- Вызов
getUserMedia(). - Принимающая сторона вызова WebRTC.
- Запись экрана.
- Веб-аудио, как только эта проблема будет решена.
Для options можно указать тип MIME и, в будущем, битрейт аудио и видео.
Типы MIME имеют более или менее конкретные значения, объединяя контейнер и кодеки. Например:
- аудио/вебм
- видео/вебм
- видео/webm;кодеки=vp8
- видео/webm;кодеки=vp9
Используйте статический метод MediaRecorder.isTypeSupported() , чтобы проверить, поддерживается ли тип MIME, например, при создании экземпляра 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 {
// ...
}
Полный список типов MIME, поддерживаемых MediaRecorder в Chrome, доступен здесь .
Затем добавьте обработчик данных и вызовите метод start() чтобы начать запись:
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 {
// ...
}
}
В этом примере объект Blob добавляется в массив recordedChunks всякий раз, когда данные становятся доступными. Методу start() дополнительно может быть присвоен аргумент timeSlice , который определяет длину медиафайла, который необходимо захватить для каждого Blob.
Когда вы закончите запись, сообщите MediaRecorder:
mediaRecorder.stop();
Воспроизведите записанные Blob-объекты в видеоэлементе, создав «супер-Blob» из массива записанных Blob-объектов:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Альтернативно вы можете загрузить на сервер через XHR или использовать API, например YouTube (см. экспериментальную демонстрацию ниже).
Загрузить можно, взломав ссылку:
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);
}
Отзывы об API и демоверсиях
Возможность записывать аудио и видео без плагинов является относительно новой для веб-приложений, поэтому мы особенно ценим ваши отзывы об API.
- Ошибка реализации MediaRecorder: crbug.com/262211
- Хром: crbug.com/new
- Firefox: bugzil.la
- Демонстрации: github.com/webrtc/samples
Мы также хотели бы знать, какие сценарии использования наиболее важны для вас и какие функции вы хотели бы, чтобы мы отдали приоритет. Комментируйте эту статью или отслеживайте прогресс на crbug.com/262211 .
Демо
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (тот же код, более простой URL-адрес для мобильных устройств!)
- Запишите видео и загрузите его на YouTube с помощью экспериментального пользовательского элемента
<google-youtube-upload>.
Приложения
- Приложение «Голосовые заметки» Пола Льюиса теперь имеет поддержку MediaRecorder, дополненную полифилом для браузеров, которые не поддерживают звук MediaRecorder.
Полифилы
- MediaStreamRecorder Муаза Хана — это библиотека JavaScript для записи аудио и видео, совместимая с MediaRecorder.
- Recorderjs позволяет осуществлять запись с узла API веб-аудио. Вы можете увидеть это в действии в приложении Пола Льюиса «Голосовые заметки» .
Поддержка браузера
- Chrome 49 и выше по умолчанию
- Chrome Desktop 47 и 48 с функциями экспериментальной веб-платформы, включенными в chrome://flags
- Firefox начиная с версии 25
- Эдж : «На рассмотрении»
Спецификация
w3c.github.io/mediacapture-record/MediaRecorder.html