HTML с использованием MediaRecorder записать холст с видео внутри

Question

Я пытаюсь записать видео с холста с серией картинок, gif, а также с некоторыми видео, даже песнями (аудио), отображаемыми во времени.
Теперь я достиг:
- записать видео с изображениями, gif и видео без звука, используя canvas.captureStream() и MediaRecorder
Что я хочу знать:
- Узнайте, почему записанное видео не содержит аудиовидео внутри холста?
- Есть ли способ вставить песни в записанное видео с определенной отметкой времени?

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

MediaStream Capture Canvas и Audio одновременно

Спасибо!

Answer 1

• Выясните, почему в записанном видео нет звука видео внутри холста?

На полотнах нет звука.

• Есть ли способ записать песни в записанное видео с определенной отметкой времени?

Если не считать ремикса самостоятельно, не совсем. Но вам, вероятно, не нужно делать это в любом случае. Просто воспроизведите аудио одновременно и запишите оба одновременно.

Создайте новый MediaStream, который объединяет видеодорожку из CanvasCaptureMediaStream и звуковую дорожку из любого места, где вы хотите. Вы можете использовать .getVideoTracks() и .getAudioTracks() в других потоках и создавать новый поток с массивом дорожек.

const stream = new MediaStream([audioTrack, videoTrack]);