HTML5 Canvas添加音频后导出视频无声音问题求助

你当前的代码仅把canvas捕获的视频流传入了MediaRecorder进行录制，单独实例化播放的音频没有被加入到待录制的媒体流中，因此导出的视频只有画面没有声音。

• 从音频实例中提取音频轨道
• 将音频轨道添加到canvas生成的视频流内
• 用合并了音视频轨道的流初始化MediaRecorder

JS代码 #

var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var video = document.querySelector("video");

var colors = ["pink","brown"];
function draw (){
    ctx.fillStyle = colors[Math.floor(Math.random() * colors.length)];
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}
draw();
// 初始化音频，替换下方地址为你自己的音频资源地址即可
var audio = new Audio("替换为你的音频资源地址");
audio.play();

// 捕获canvas视频流
var videoStream = canvas.captureStream(30);
// 提取音频轨道添加到视频流中
var audioStream = audio.captureStream();
videoStream.addTrack(audioStream.getAudioTracks()[0]);

// 用合并音视频轨道后的流初始化录制器
var mediaRecorder = new MediaRecorder(videoStream);

var chunks = [];
mediaRecorder.ondataavailable = function(e) {
  chunks.push(e.data);
};

mediaRecorder.onstop = function(e) {
  var blob = new Blob(chunks, { 'type' : 'video/mp4' });
  chunks = [];
  var videoURL = URL.createObjectURL(blob);
  video.src = videoURL;
};

mediaRecorder.start();
setInterval(draw, 300);
setTimeout(function (){ mediaRecorder.stop(); }, 5000);

HTML代码 #

<canvas width="300" height="300"></canvas>
<video autoplay controls></video>

• 音频资源需要满足跨域要求，否则无法正常捕获音频轨道
• 多数浏览器会自动拦截非用户交互触发的音频播放、媒体录制行为，建议将音频播放和录制启动逻辑绑定到用户点击等交互事件上，避免功能被拦截

内容的提问来源于stack exchange，提问作者user2828442