[英]HTML using MediaRecorder record canvas with a video inside
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.我正在尝试从 canvas 录制一段视频,其中包含一系列图片、gif 以及一些视频,甚至歌曲(音频)随着时间的推移而显示。
Now I have achieved:现在我已经实现了:
- record a video with pictures, gif and videos without any audio using canvas.captureStream()
and MediaRecorder
- 使用canvas.captureStream()
和MediaRecorder
录制带有图片、gif 和视频的视频,没有任何音频
What I want to know:我想知道的:
- Figure out why the recorded video has no audio of the video inside the canvas? - 弄清楚为什么录制的视频没有 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.我注意到一个类似的问题(下面的链接)关于如何同时录制 canvas 和音频,但我不知道为什么视频的音频应该分开处理。 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 MediaStream 同时捕获 Canvas 和音频
Thanks!谢谢!
- Figure out why the recorded video has no audio of the video inside the canvas?弄清楚为什么录制的视频没有 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.创建一个新的 MediaStream,它将 CanvasCaptureMediaStream 中的视频轨道和您想要的任何位置的音频轨道组合在一起。 You can use .getVideoTracks()
and .getAudioTracks()
on other streams, and instantiate a new stream with an array of tracks.您可以在其他流上使用.getVideoTracks()
和.getAudioTracks()
,并使用一组轨道实例化一个新的 stream。
const stream = new MediaStream([audioTrack, videoTrack]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.