Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getUserMedia')

Problem:

useEffect(() => {
        const getPopWindow = async () => {
            if (!popup) {
                try {
                    await navigator.mediaDevices.getUserMedia({ video: true }).then(
                        function success(stream) {
                        
                        })
                        .catch(function (error) {
                            console.log(error);
                        }
                        )
                } catch (error) { console.log(error) }
            }
        }
        getPopWindow()
    }, [popup])

위와 같은 코드를 실행하였을 때 제목과 같은 에러 메시지가 뜬다.

Attempts:

내가 시도해 본 것은 다음과 같지만 오류는 그대로였다.

• chrome://flags -> Insecure origins treated as secure 란에 해당 웹 주소 입력하기.
• https로 웹 접속.
• 브라우저 캐시 삭제

Solution:

await navigator.mediaDevices.getUserMedia({ video: true })...

위 코드블락의 mediaDevices 부분을 삭제하고 다시 썼더니 오류가 해결되었다. 아마 코드 에디터 내의 캐시 문제가 아니였을까 싶다.