HTML using MediaRecorder record canvas with a video inside

Question

I am trying to record a video from a canvas with a series of pictures, gif, and also some videos even songs(audio) displaying through time.
Now I have achieved:
- record a video with pictures, gif and videos without any audio using canvas.captureStream() and MediaRecorder
What I want to know:
- Figure out why the recorded video has no audio of the video inside the canvas?
- Is there a way to cancat songs into the recorded video at a specific timestamp?

I notice a similar question (link below) about how to record canvas and audio simultaneously, but I have no idea why the video's audio should deal separately. If it is the only solution, is there any way to add the audio track at a specific time instead of the beginning of the recorded video?

MediaStream Capture Canvas and Audio Simultaneously

Thanks!

Answer 1

• Figure out why the recorded video has no audio of the video inside the canvas?

Canvases don't have audio.

• Is there a way to cancat songs into the recorded video at a specific timestamp?

Short of remuxing everything yourself, not really. But, you probably don't need to do this anyway. Simply play back your audio at the same time and record both simultaneously.

Make a new MediaStream that combines the video track from the CanvasCaptureMediaStream, and the audio track from wherever you want it. You can use .getVideoTracks() and .getAudioTracks() on other streams, and instantiate a new stream with an array of tracks.

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