Простой пример MediaRecorder API / "Привет, мир"
Вот простой пример для MediaRecorder API:
(async function() {
let chunks = [];
let stream = await navigator.mediaDevices.getUserMedia({ audio:true, video:false });
let mediaRecorder = new MediaRecorder(stream);
// record for 3 seconds:
mediaRecorder.start();
setTimeout(() => { mediaRecorder.stop(); }, 3000)
mediaRecorder.ondataavailable = function(e) { chunks.push(e.data); };
mediaRecorder.onstop = async function() {
let blob = new Blob(chunks, { type: mediaRecorder.mimeType });
let audioURL = window.URL.createObjectURL(blob);
let arrayBuffer = await (await fetch(audioURL)).arrayBuffer();
let audioBuffer = await (new AudioContext()).decodeAudioData(arrayBuffer);
// ... do stuff with audioBuffer
};
})();
В настоящее время это не работает в Chrome из-за известной ошибки с кодеком opus. Похоже, что это было исправлено недавно, поэтому он должен достичь стабильной версии в течение нескольких месяцев (я думаю?).
Итак, мой вопрос: верен ли "привет мир", который я представил выше? Похоже, что он отлично работает на Firefox, и, надеюсь, скоро будет работать на Chrome, но я не совсем уверен во всех мельчайших деталях спецификации, и я просто хочу убедиться, что я все делаю правильно. Некоторые подвопросы относительно правильности примера кода:
- В Firefox
mediaRecorder.mimeType
пустая строка и все жеBlob
по-прежнему успешно создан, по-видимому. В хроме,mediaRecorder.mimeType
такое "видео / вебм", хотя я указалvideo:false
вgetUserMedia
опции. Что тут происходит? - Нужно ли использовать
fetch
преобразовать блоб в буфер массива? Это не сложно, но кажется немного хакерским. - Есть ли обходной путь, чтобы он работал в Chrome, пока ошибка кодека не устранена? Я старался
new MediaRecorder(stream, {mimeType:"audio/wav"});
после прочтения, но это выдало мне ошибку "mimeType не поддерживается". На самом деле, любойmimeType
кроме "video/webm" выдает ошибку в chrome, и кажется, что firefox просто игнорируетmimeType
вариант. - В статье MDN о MediaRecorder они используют
new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
, Почему они выбрали этот тип и кодек? Откуда вы знаете, что это фактический тип MIME и кодек, который использовался MediaRecorder? Откуда они знают, что mime-type будет работать во всех браузерах?
Это связанный вопрос / ответ. На самом деле, я бы хотел, чтобы какой-то код, который, как я знаю, не сломался бы через 3 месяца, так как все реализовано браузерами и изменено в спецификации. Это будет бонусом, если он может работать с Chrome прямо сейчас. Спасибо!