移动端浏览器录制Div容器+麦克风音频实现方案咨询

核心思路 #

利用浏览器Element.captureStream()捕获目标容器（含叠加画布、分数文本）的视频流，通过getUserMedia()获取麦克风音频流，将两者合并后用MediaRecorder完成15秒录制，最后导出文件。

实现步骤及代码示例 #

1. 前置条件

页面需在HTTPS环境运行（localhost开发环境不受限制），且录制操作必须由用户手动触发（浏览器禁止自动获取媒体权限）。

2. 完整代码实现

// 获取目标容器
const container = document.querySelector('.container');
let mediaRecorder;
let recordedChunks = [];

// 启动录制函数
async function startRecording() {
  try {
    // 获取麦克风音频流
    const audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    
    // 捕获容器的视频流（设置30fps，可按需调整）
    const videoStream = container.captureStream(30);
    
    // 将音频轨道合并到视频流中
    audioStream.getAudioTracks().forEach(track => {
      videoStream.addTrack(track);
    });
    
    // 配置MediaRecorder，优先用webm格式（移动端兼容性好）
    const recorderOptions = { mimeType: 'video/webm; codecs=vp9' };
    mediaRecorder = new MediaRecorder(videoStream, recorderOptions);
    
    // 收集录制数据
    mediaRecorder.ondataavailable = (event) => {
      if (event.data.size > 0) {
        recordedChunks.push(event.data);
      }
    };
    
    // 录制完成后处理导出
    mediaRecorder.onstop = () => {
      const recordingBlob = new Blob(recordedChunks, { type: 'video/webm' });
      const downloadUrl = URL.createObjectURL(recordingBlob);
      
      // 创建下载链接供用户保存
      const downloadLink = document.createElement('a');
      downloadLink.href = downloadUrl;
      downloadLink.download = 'game-recording.webm';
      downloadLink.click();
      
      // 清理资源
      recordedChunks = [];
      URL.revokeObjectURL(downloadUrl);
    };
    
    // 启动录制，15秒后自动停止
    mediaRecorder.start();
    setTimeout(() => {
      mediaRecorder.stop();
      // 停止所有媒体轨道，释放设备资源
      videoStream.getTracks().forEach(track => track.stop());
      audioStream.getTracks().forEach(track => track.stop());
    }, 15000);
    
  } catch (error) {
    console.error('录制启动失败:', error);
    alert('无法获取麦克风权限或浏览器不支持录制功能，请检查设置');
  }
}

// 绑定启动按钮（需在页面添加class为start-record的按钮）
// document.querySelector('.start-record').addEventListener('click', startRecording);

关键注意事项 #

• 权限触发：必须由用户手动操作（如点击按钮）启动录制，浏览器不允许自动请求媒体权限。
• 兼容性：现代移动端Chrome、Safari 14+、Firefox均支持核心API，若格式不兼容，可将MIME类型改为video/webm; codecs=vp8。
• 性能优化：帧率设置推荐25-30fps，过高会导致移动端卡顿。
• 资源清理：录制停止后务必停止所有媒体轨道，避免占用设备资源。

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