React移动端调用摄像头麦克风遇DOMException问题求助

问题描述 #

刚接触React，尝试调用摄像头和麦克风时遇到以下错误：

Error accessing media devices: DOMException { line: 1, column: 161443, sourceURL: "https://sample.com/user/static/js/838.d273e7b8.chunk.js" }

代码在桌面浏览器运行正常，但在iPhone的Brave、Chrome、Safari、Firefox浏览器中均无法工作，完整代码如下：

useEffect(() => {
    const setupMedia = async () => {
        try {
            const mediaStream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: 'user' },
                audio: true,
            })

            if (!MediaRecorder.isTypeSupported('video/webm')) {
                console.warn('video/webm is not supported')
                return
            }

            if (videoLiveRef.current) {
                videoLiveRef.current.srcObject = mediaStream
            }

            mediaRecorderRef.current = new MediaRecorder(mediaStream, {
                mimeType: 'video/webm',
            })

            mediaRecorderRef.current.addEventListener('dataavailable', (event) => {
                const blob = new Blob([event.data], { type: 'video/webm' })
                videoRecordedRef.current.src = URL.createObjectURL(blob)
                setAuthData({ type: 4, payload: { file: blob } })
                
            })
        } catch (error) {
            console.error('Error accessing media devices:', error)
            setToast({
                isError: true,
                show: true,
                message:
                    'Unable to access camera and microphone. Please check your device settings and browser permissions.',
            })
        }
    }

    setupMedia()
}, [setAuthData, setToast, lang])

解决办法 #

1. 确认HTTPS环境 #

iPhone所有现代浏览器要求必须在HTTPS环境下调用媒体设备（localhost开发环境除外），如果生产环境是HTTP，直接会被阻止权限请求。

2. 修复facingMode兼容性 #

部分iPhone浏览器对facingMode: 'user'的强制配置支持不佳，建议改为ideal优先级，或先简化配置测试基础功能：

// 兼容写法
video: {
    facingMode: { ideal: 'user' },
    width: { ideal: 640 },
    height: { ideal: 480 }
}

// 最简测试写法
video: true,
audio: true

3. 替换不兼容的视频格式 #

iOS设备几乎不支持video/webm格式，MediaRecorder.isTypeSupported('video/webm')会返回false，导致代码提前终止。建议替换为iOS支持的格式：

// 优先选择iOS兼容格式
const supportedMimeType = MediaRecorder.isTypeSupported('video/mp4') 
    ? 'video/mp4' 
    : MediaRecorder.isTypeSupported('video/quicktime') 
        ? 'video/quicktime' 
        : 'video/webm';

if (!supportedMimeType) {
    console.warn('无支持的视频录制格式');
    return;
}

// 初始化MediaRecorder时使用兼容格式
mediaRecorderRef.current = new MediaRecorder(mediaStream, {
    mimeType: supportedMimeType,
})

// dataavailable事件同步修改Blob格式
const blob = new Blob([event.data], { type: supportedMimeType })

4. 由用户交互触发权限请求 #

iOS浏览器禁止自动触发媒体权限申请，必须通过用户主动交互（如点击按钮）调用setupMedia，不能在组件挂载时自动执行：

// 定义触发函数
const handleStart = () => {
    setupMedia();
}

// 页面添加触发按钮
<button onClick={handleStart}>开启摄像头和麦克风</button>

5. 检查系统权限设置 #

确认iPhone系统设置中，对应浏览器已被授予摄像头和麦克风权限：

• 打开「设置」→ 找到目标浏览器（如Safari/Chrome）→ 开启「摄像头」和「麦克风」权限。

内容的提问来源于stack exchange，提问作者alireza javanmardi