TypeError: navigator.getUserMedia不是函数

Question

我正在尝试构建一个点对点聊天的视频应用程序，但每当我在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() && 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()已弃用。改用navigator.mediaDevices.getUserMedia()

Read this

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

Answer 2

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