Как я могу записать или смешать два или более видеопотока в один, используя MediaRecorder? - PullRequest
Новая
       9

Как я могу записать или смешать два или более видеопотока в один, используя MediaRecorder?

0 голосов
/ 22 февраля 2019

Я создаю веб-страницу, на которой пользователи могут создавать видеосообщения, например:

  • Сначала видеосообщение начинает запись с использованием потока с основного видеоустройства.

  • В любой заданный момент после начала записи пользователь может «добавить» поток другого видеоустройства.Поток может полностью заменить первый поток, или их можно увидеть одновременно (это мне решать).

  • Пользователь должен иметь возможность сохранить свое видео-сообщение в файл и отправить его другому пользователю, который должен видеть все записанные потоки.

То, что я до сих пор делал, - это использование элемента canvas для рисования потока, который я хочу показать (сначала поток первого устройства, затем другого), и записи потока холста с использованием следующих строк: 

const stream = canvas.captureStream(30);
const options = { mimeType: 'video/webm' };
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = (e) => {
  if (e.data.size > 0) {
    recordedChunks.push(e.data);
  }
};
mediaRecorder.onstop = () => {
  const blob = new Blob(recordedChunks, { type: 'video/webm' });
  const file = new File([blob], 'message');
};

Это сработало, за исключением того, что в сгенерированном файле, похоже, отключены некоторые метаданные ( Пример , просмотрите его в Chrome и обратите внимание, что при первом воспроизведении времявидео, кажется, резко меняется), и иногда видео, записанные таким образом, вообще не могут быть воспроизведены на ПК (с использованием VLC).(Это сильно мешает моему клиенту, поэтому мне нужно это исправить).

Есть ли другой способ записи или микширования двух или более видеопотоков, чтобы получить видеофайл, который работает?

Пожалуйста, примите во внимание, что я не знаю размеров второго потока, пока пользователь не выберет его.

Не уверен, что это важно, но я собираюсь использовать это в электронном приложении, чтобызапишите видео с веб-камеры, а затем с экрана или окна (как вы можете видеть на примере видео, который я разместил).

...