Webcam在线视频Canvas录制无声音问题求助（支持MP4/WebM下载）

嘿，我懂你现在的困扰——用Canvas录制摄像头视频时，录出来的文件居然没声音！这其实是因为你当前的逻辑只捕获了Canvas的视频画面流，完全没把摄像头的音频流包含进去。别慌，咱们一步步来修复这个问题：

核心原因 #

Canvas的captureStream()方法只能捕获画布上的视觉内容，不会自动包含音频。要录制带声音的视频，你需要把摄像头的音频流和Canvas的视频流合并成一个完整的媒体流，再用MediaRecorder录制这个合并后的流。

具体修复步骤 #

1. 同时获取摄像头的视频和音频权限 #

首先，调用getUserMedia时要同时请求视频和音频权限，这样才能拿到音频轨道：

async function getMediaStream() {
  try {
    return await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true // 关键：加上音频请求
    });
  } catch (err) {
    console.error('获取媒体流失败:', err);
    alert('请授权摄像头和麦克风权限！');
  }
}

2. 合并Canvas视频流与音频流 #

当你把摄像头视频渲染到Canvas后，需要从原始媒体流中取出音频轨道，添加到Canvas的捕获流里：

// 假设你已经创建了Canvas并在绘制视频画面
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const mediaStream = await getMediaStream();
const video = document.createElement('video');

// 把摄像头视频绑定到video元素并播放
video.srcObject = mediaStream;
video.play();

// 定期将视频画面绘制到Canvas（你的原有逻辑）
const drawLoop = () => {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  requestAnimationFrame(drawLoop);
};
drawLoop();

// 获取音频轨道并合并到Canvas流
const audioTrack = mediaStream.getAudioTracks()[0];
const canvasStream = canvas.captureStream(30); // 30为帧率
canvasStream.addTrack(audioTrack); // 把音频轨道加入Canvas流

3. 用合并后的流录制并下载 #

现在用这个包含音视频的流来初始化MediaRecorder，处理录制和下载逻辑：

let recorder;
let recordedChunks = [];

const recButton = document.querySelector('button#recButton');
const pauseRecord = document.querySelector('button#pauseRecord');

recButton.addEventListener('click', async () => {
  // 上面的媒体流获取、Canvas绘制逻辑放在这里
  const mediaStream = await getMediaStream();
  if (!mediaStream) return;

  // 初始化Canvas和video元素（省略你原有创建和绘制代码）
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  const video = document.createElement('video');
  video.srcObject = mediaStream;
  video.play();
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;
  document.body.appendChild(canvas);

  const drawLoop = () => {
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    requestAnimationFrame(drawLoop);
  };
  drawLoop();

  // 合并音频流
  const audioTrack = mediaStream.getAudioTracks()[0];
  const canvasStream = canvas.captureStream(30);
  canvasStream.addTrack(audioTrack);

  // 初始化录制器
  recorder = new MediaRecorder(canvasStream, {
    mimeType: 'video/webm' // WebM格式兼容性好，若要MP4需注意浏览器支持
  });

  recorder.ondataavailable = (event) => {
    if (event.data.size > 0) {
      recordedChunks.push(event.data);
    }
  };

  recorder.onstop = () => {
    // 生成下载文件
    const blob = new Blob(recordedChunks, { type: 'video/webm' });
    const downloadUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = downloadUrl;
    a.download = 'my_recording.webm';
    a.click();
    URL.revokeObjectURL(downloadUrl);
    recordedChunks = []; // 重置录制片段
  };

  recorder.start();
});

pauseRecord.addEventListener('click', () => {
  if (recorder && recorder.state === 'recording') {
    recorder.stop();
  }
});

额外注意事项 #

• 格式兼容性：原生MediaRecorder对MP4的支持有限（比如Chrome需要特定条件），如果必须用MP4，建议使用第三方库如RecordRTC来简化处理。
• 权限检查：一定要处理权限拒绝的情况，避免代码报错。
• 画面同步：确保视频元素已经开始播放后再启动Canvas绘制，否则可能出现画面延迟或黑屏。

内容的提问来源于stack exchange，提问作者PC.PRO