TypeError: navigator.getUserMedia is not a function

Question

I am trying to build a video app peer to peer chat but anytime i open the app in firefox it throws the error

TypeError: navigator.getUserMedia is not a function

It works fine in google chrome but firefox halts and throws an error

Below is my code

import React, { Component } from 'react'
import './video.css'
import MicOutlined from '@material-ui/icons/MicOutlined'
import VideoCall from '@material-ui/icons/VideoCall'
export default class Video extends Component {
    componentDidMount = () => {
        const localStream = document.querySelector("video.localStreamVideo")

        const browserSupportsMedia = () => {
            return navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.mzGetUserMedia
        }

        const fetchLocalStream = () => {
            let constraints = { video: true, audio: false }
            navigator.getUserMedia(
                constraints,
                (stream) => {
                    localStream.srcObject = stream
                    localStream.addEventListener("loadedmetadata", () => localStream.play())
                },
                (error) => {
                    console.log(error.name)
                }
            )
        }



        browserSupportsMedia() && fetchLocalStream()

    }
    render() {
        return (
            <div className='video_container'>
                <video muted={this.state.video.localVideo.audio_mute} controls autoPlay className='video localStreamVideo'>

                </video>
                <div className='localStreamVideoControls'>
                    <MicOutlined onClick={() => this.toggleLocalVideoMuteState()} className='mic_normal controls' />
                    <VideoCall className="video_normal controls" />
                </div>
            </div>
        )
    }
}

Answer 1

navigator.getUserMedia() is deprecated, please use navigator.mediaDevices.getUserMedia() instead.

Try:

const browserSupportsMedia = () => {
    return navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.mzGetUserMedia
}

const fetchLocalStream = () => {
    let constraints = { video: true, audio: false }
    navigator.mediaDevices.getUserMedia(
        constraints,
        (stream) => {
            localStream.srcObject = stream
            localStream.addEventListener("loadedmetadata", () => localStream.play())
        },
        (error) => {
            console.log(error.name)
        }
    )
}

Read more over here : https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia