CODEWITHSUNDEEP
javascriptreactjssafariwebrtcmicrosoft-edge
Ganich
Ganich

Reputation: 41

WebRTC Webcam not working on Safari and Microsoft Edge

I want to access the webcam and audio device to record video using WebRTC. However, it's only working on Chrome and Firefox.

Interestingly, it's not working on Edge and Safari. It asks for camera use permission, when we grant permission, the camera doesn't load and I get the following error in console.

ERROR Message on Safari and Edge

navigator.getUserMedia error: ReferenceError

My Code looks like this

async init(constraints) {
    try {
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            const stream = await navigator.mediaDevices.getUserMedia(constraints);
            this.handleSuccess(stream);
        } else {
            this.setState({
                error:
                    'Your Browser is not supported. Please use latest version of Chrome, Safari, Firefox or Edge.',
            });
        }
        if (!MediaRecorder) {
            this.setState({
                error:
                    'Your Browser is not supported. Please use latest version of Chrome, Safari, Firefox or Edge.',
            });
        }
    } catch (e) {
        this.setState({
            error:
                'We could not find any audio/video recording device. Please make sure you have given permission to use webcam and microphone.',
        });
        console.error('navigator.getUserMedia error:', e.name);
    }
}

Any suggestions to load the camera perfectly in all these browsers.

Upvotes: 0

Views: 2918

Answers (1)

Deepak-MSFT
Deepak-MSFT

Reputation: 11335

Looks like you are having the issue in the MS Edge legacy browser. Correct me if I am misunderstanding.

I try to test the official sample code in the MS Edge legacy browser (44.18362.449.0) and it works fine.

WebRTC samples getUserMedia

I suggest you can test this example in the MS Edge browser and let us know whether it worked or not.

If it works then you can modify your code based on the official sample from their Github page.

If you are using an older version of the MS Edge browser then I suggest you update with the latest version and again test the issue.

Upvotes: 1

Related Questions