brand new to react and am trying to get access of camera and mic but i ran to this error:

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

my code works perfect on desktop browsers but it doesn’t work on any mobile devices ( i have an iphone and tried it with brave, chrome, safari and firefox )

here is my full code

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