Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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" />
navigator.getUserMedia() is deprecated, please use navigator.mediaDevices.getUserMedia() instead.
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
Navigator.getUserMedia() is deprecated. use navigator.mediaDevices.getUserMedia() instead
Read this
This is the docs for navigator.mediaDevices.getUserMedia()
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.