为何相机调用代码在iOS端Chrome/Safari失效，桌面端却正常？

数据老陈

2026-6-29

移动端getUserMedia无法加载视频流问题解决

问题现象

点击按钮调用devices函数后，桌面端能正常在<video autoplay id="getVIN"></video>中显示视频；但移动端仅弹出devices提示框，doing the stream提示框不触发，视频画面无法加载。

相关代码

const constraints = 
    {
        video: {
          width: {
            min: 1280,
            ideal: 1920,
            max: 2560,
          },
          height: {
            min: 720,
            ideal: 1080,
            max: 1440
          },
          facingMode: 'user'
        }
      }


var devices = () => {
    alert('devices');
    navigator.mediaDevices.getUserMedia(constraints).then(stream => {
        alert('doing the stream');
        const stream2 = stream;
        tracks = stream2.getTracks();
        console.log('Got MediaStream:', stream);
        var video:any = document.querySelector('video');
        video.srcObject = stream2;
    })
    .catch(error => {
        alert('inhere');
        console.error('Error accessing media devices.', error);
    });
}

问题原因及解决方法

视频分辨率约束过高：你设置的最小分辨率1280×720超过了多数移动端前置摄像头的硬件能力，导致getUserMedia请求被拒绝，直接进入catch分支。建议先降低分辨率测试：
```
const constraints = {
    video: {
        width: { ideal: 640 },
        height: { ideal: 480 },
        facingMode: 'user'
    }
}
```
权限触发限制：移动端浏览器要求getUserMedia必须由用户真实交互触发，确保按钮的点击事件直接绑定devices函数，没有嵌套在异步回调或非用户触发的逻辑里。
facingMode兼容性：部分设备对facingMode: 'user'支持不佳，可尝试移除该属性，或改用facingMode: { exact: 'user' }（注意exact会让不支持的设备直接失败，需谨慎使用）。