----- ОБНОВЛЕНИЕ ДОБАВЛЯЕТ НИЖЕ -----
У меня проблема с MediaRecorder API (https://www.w3.org/TR/mediastream-recording/#mediarecorder-api).
Я использую его для записи речи с веб-страницы (в этом случае использовался Chrome) и сохранить ее как куски. Мне нужно иметь возможность играть в нее во время и после ее записи, поэтому важно сохранить эти куски.
Вот код, который записывает данные:
navigator.mediaDevices.getUserMedia({ audio: true, video: false }).then(function(stream) { recorder = new MediaRecorder(stream, { mimeType: 'audio/webm; codecs="opus"' }) recorder.ondataavailable = function(e) {//Read blob from 'e.data', decode64 and send to sever; } recorder.start(1000) })
Проблема в том, что файл WebM, который я получаю при конкатенации всех частей, поврежден (редко) !. Я могу воспроизвести его как WebM, но когда я пытаюсь преобразовать его (ffmpeg) в другое, он дает мне файл со сдвинутыми таймингами.
Например. Я пытаюсь преобразовать файл с длительностью 00:36:27.78 в wav, но я получаю файл с длительностью 00:36:26.04, что на 1,74 с меньше.
В начале файла - звук один и тот же, но примерно через 10 минут WebM файл воспроизводится с небольшой задержкой.
После некоторых исследований я узнал, что он также не работает правильно с браузером MediaSource API, который я использую для воспроизведения кусков. Я попробовал два способа играть в эти куски:
В случае, когда я просто объединяю все части в один блок, он отлично работает. В случае, если я добавляю их через объект sourceBuffer, у него есть некоторые пробелы (я могу их увидеть, проверив buffered свойство). 697,196 - 697,528 (~ 330 мс) 996,198 - 996,754 (~ 550 мс) 1597,16 - 1597,531 (~ 370 мс) 1896,893 - 1897,183 (~ 290 мс)
Эти пробелы составляют всего 1,55 с, и они находятся точно в местах, где начинается деинхронизация между файлами wav и webm. К сожалению, файл, в котором он воспроизводимый, не может быть разделен, поскольку это личные данные клиента, и я пока не смог воспроизвести такую проблему на разных носителях.
Что может быть причиной такой проблемы?
----- UPDATE ----- Я смог воспроизвести проблему на https://jsfiddle.net/96uj34nf/4/
Чтобы увидеть проблему, нажмите кнопку "Буферные зоны печати", и в ней будут отображаться диапазоны времени. Вы можете видеть, что есть два пробела: 0 - 136.349, 141.388 - 195.439, 197.57 - 198.589
- 136.349 - 141.388
- 195,439 - 197,57
Итак, как вы видите, есть 5 и 2 вторых пробела. Был бы рад, если бы кто-то мог пролить свет на то, почему это происходит, или как избежать этой проблемы.
Спасибо