iOS端使用HTML5无压缩捕获上传视频的解决方案问询

针对你遇到的iOS端使用capture="environment"捕获视频自动压缩的问题，以下是几个可行的解决方案：

1. 精确指定视频格式类型 #

修改accept属性为iOS原生无压缩视频的格式video/quicktime（对应MOV格式），替换原来的video/*，这样Safari在捕获视频时会优先保留原始录制质量，避免自动压缩：

<input type="file" id="videoFile" capture="environment" accept="video/quicktime">

原理是iOS Safari对泛用的video/*会触发自动压缩逻辑，但指定具体的无压缩容器格式时，会直接使用相机录制的原始文件。

2. 使用MediaRecorder API手动控制录制参数 #

如果需要更精准的质量控制，可以通过网页的MediaRecorder API直接调用摄像头录制，自定义编码格式和码率参数，完全规避系统的自动压缩：

// 请求后置摄像头和麦克风权限
navigator.mediaDevices.getUserMedia({
  video: { facingMode: 'environment', width: { ideal: 1920 }, height: { ideal: 1080 } },
  audio: true
})
.then(stream => {
  // 配置录制参数：指定MP4格式+高码率（50Mbps，可根据需求调整）
  const recorderOptions = {
    mimeType: 'video/mp4; codecs=avc1',
    videoBitsPerSecond: 50000000
  };
  
  const mediaRecorder = new MediaRecorder(stream, recorderOptions);
  const recordedChunks = [];

  // 收集录制数据
  mediaRecorder.ondataavailable = (e) => {
    if (e.data.size > 0) recordedChunks.push(e.data);
  };

  // 录制结束后生成文件
  mediaRecorder.onstop = () => {
    const videoBlob = new Blob(recordedChunks, { type: 'video/mp4' });
    const videoFile = new File([videoBlob], 'high-quality-recording.mp4', { type: 'video/mp4' });
    // 这里执行你的上传逻辑，比如将videoFile传入FormData
  };

  // 开始录制（实际项目中可绑定按钮事件控制启停）
  mediaRecorder.start();
})
.catch(err => {
  console.error('摄像头/麦克风授权失败:', err);
});

注意：这个方案需要iOS Safari 14.1及以上版本支持，且需要用户授权摄像头和麦克风权限。

补充说明 #

• 若用户iOS系统的相机设置中选择了“高效”录制格式（HEVC编码），可能仍会影响文件大小，但网页端无法干预该设置，只能通过上述方法确保网页端不额外压缩。
• 你之前尝试的multiple参数仅在手动选择本地文件时生效，直接捕获场景下确实无法触发无压缩逻辑，不推荐依赖该参数。

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