Простой пример 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 прямо сейчас. Спасибо!

0 ответов

Другие вопросы по тегам