Наливайте шампанское и пончики! Самая отмеченная звездами функция 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>
Приложения
- Приложение Voice Memos Пола Льюиса теперь поддерживает MediaRecorder, а также имеет полифил для браузеров, не поддерживающих аудио MediaRecorder.
Полифиллы
- MediaStreamRecorder Муаза Хана — это библиотека JavaScript для записи аудио и видео, совместимая с MediaRecorder.
- Recorderjs позволяет записывать с узла Web Audio API. Вы можете увидеть это в действии в приложении Voice Memos Пола Льюиса.
Поддержка браузера
- Chrome 49 и выше по умолчанию
- Chrome Desktop 47 и 48 с функциями экспериментальной веб-платформы, включенными из chrome://flags
- Firefox начиная с версии 25
- Край : «На рассмотрении»
Спецификация
w3c.github.io/mediacapture-record/MediaRecorder.html