iOS端Chrome与Safari中MediaRecorder.start()无报错却执行失败

核心问题分析 #

你的代码在 iOS 端执行到 mediaRecorder.start(1000) 后停止运行，主要原因有两个：

• iOS 底层的 WebKit 引擎（Safari 和 iOS Chrome 共用）不支持 video/webm 格式的 MediaRecorder
• 未捕获 mediaRecorder.start() 抛出的异常，导致后续代码直接终止执行

具体修复步骤 #

1. 替换为 iOS 支持的 MIME 类型

iOS 仅支持 video/mp4 格式，且需指定兼容的编解码器。先通过 MediaRecorder.isTypeSupported() 验证支持性：

// 优先选择 iOS 兼容的 MP4 格式
const supportedMimeType = MediaRecorder.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') 
  ? 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
  : MediaRecorder.isTypeSupported('video/mp4') 
    ? 'video/mp4'
    : '';

if (!supportedMimeType) {
  console.error('当前浏览器不支持 MediaRecorder');
  return;
}

// 初始化 MediaRecorder 时使用支持的类型
mediaRecorder = new MediaRecorder(cameraStream, { mimeType: supportedMimeType });

2. 用 try-catch 捕获启动异常

将 mediaRecorder.start() 包裹在 try-catch 块中，避免异常直接终止后续代码：

function startRecording() 
{
  console.log("starting recording")
  takePicture();
  console.log("Selfie taken")
  outline.style.display = 'none';
  button.style.display = 'none';
  text.innerText = "Volg de instructies op het scherm.";
  
  try {
    mediaRecorder.start(1000);
    console.log("setting timeout");
    setTimeout(step,2000);
  } catch (err) {
    console.error('录制启动失败:', err);
    // 可在此添加错误提示逻辑
  }
}

3. 降低视频分辨率约束

你设置的理想分辨率（4096x2160）过高，iOS 设备可能无法支持这么高的录制规格，导致启动失败。调整为更通用的参数：

var constraints = { 
  video: { 
    width: { ideal: 1920, max: 1920 }, 
    height: { ideal: 1080, max: 1080 }, 
    facingMode: 'user'
  }
};

4. 确保视频流完全加载后再初始化 MediaRecorder

等待视频元素播放完成后再创建 MediaRecorder，避免流未就绪导致的问题：

async function start() 
{
  var constraints = { 
    video: { 
      width: { ideal: 1920, max: 1920 }, 
      height: { ideal: 1080, max: 1080 }, 
      facingMode: 'user'
    }
  };
  
  cameraStream = await navigator.mediaDevices.getUserMedia(constraints);
  video.srcObject = cameraStream;
  
  // 等待视频开始播放后再初始化 MediaRecorder
  await video.play();
  
  const supportedMimeType = MediaRecorder.isTypeSupported('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') 
    ? 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"'
    : MediaRecorder.isTypeSupported('video/mp4') 
      ? 'video/mp4'
      : '';

  if (!supportedMimeType) {
    console.error('当前浏览器不支持 MediaRecorder');
    return;
  }
  
  mediaRecorder = new MediaRecorder(cameraStream, { mimeType: supportedMimeType });
  mediaRecorder.addEventListener('dataavailable', function(e) {
    chunks.push(e.data);
  });
}

额外注意事项 #

• iOS 上的 MediaRecorder 对录制时长有一定限制，过长的录制可能会被系统中断
• 必须在用户交互（如按钮点击）中调用 getUserMedia 和 mediaRecorder.start()，iOS 禁止自动触发媒体权限和录制操作

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