访问媒体设备时出错：DOMException

Question

全新反应，正在尝试访问相机和麦克风，但我遇到了此错误：

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])

Answer 1

不幸的是，iOS 上只允许使用一种浏览器引擎。苹果不允许任何其他的。尽管您可以安装不同名称的浏览器，但它们都必须在内部使用 WebKit。 WebKit 是 Safari 的浏览器引擎。

WebKit 不支持将任何内容记录为

'video/webm'

。因此，在检查之前必须触发错误。

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

浏览器可能没有使用摄像头或麦克风的权限，因此对

getUserMedia()

的调用会立即被拒绝。