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. use navigator.mediaDevices.getUserMedia() instead

Read this

This is the docs for navigator.mediaDevices.getUserMedia()