Блог

Я пытаюсь создать видеоприложение для однорангового чата, но каждый раз, когда я открываю приложение в firefox, оно выдает ошибку

 TypeError: navigator.getUserMedia is not a function
  

Он отлично работает в Google Chrome, но firefox останавливается и выдает ошибку

Ниже приведен мой код

 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() amp;amp; 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>
        )
    }
}

  

navigator.getUserMedia() не рекомендуется, пожалуйста, используйте navigator.mediaDevices.getUserMedia() вместо этого.

Попробуйте:

 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)
        }
    )
}
  

Подробнее читайте здесь: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/getUserMedia

Navigator.getUserMedia() устарел. вместо этого используйте navigator.mediaDevices.getUserMedia()

Читать это

Это документы для navigator.mediaDevices.getUserMedia()