使用 React 调用 getUserMedia 时出现 DOMException

Question

我正在构建移动网络应用程序。我正在尝试使用 google chrome.

中的 getUserMedia 访问相机

我的应用程序是在 React 中构建的，我在尝试此操作时遇到问题，出现以下错误。

Error: DOMException

import React, { Component } from 'react'
import "./LiveFace.scss";
import Grid from '@material-ui/core/Grid';
import faceimage from "./../../../images/face.png";
import { Button } from '@material-ui/core';
import { updateFace } from "./../actions";
import { connect } from "react-redux";
import LinearProgress from '@material-ui/core/LinearProgress';


export class LiveFace extends Component {

    constructor() {
        super();

        this.state = {
            loading: false,
            progress: 0,
        }
    }


    continue = async (e) => {

    }

    componentDidMount = () => {

        const constraints = { video: { facingMode: 'user' } };

        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            navigator.mediaDevices.getUserMedia(constraints)
                .then(this.handleSuccess.bind(this)).catch(this.handleError.bind(this));
        }

    }

    handleSuccess = (stream) => {

        console.log(this.refs);
        this.track = stream.getTracks()[0];
        this.refs.video.srcObject = stream;
        this.started = true;

    }

    handleError = (error) => {
        console.error('Error: ', error);
    }

    render() {
        const { handleChange } = this.props;
        return (
            <div id="live">
                <div className="videoContainer">
                        <video ref="video" autoPlay playsInline muted></video>
                    </div>
                    <br />
                    <div className="live-footer">

                        <Button className="live-button" type="submit" variant="contained" onClick={this.start} color="primary">
                                Start Live Face Capture
                        </Button>
                        <br />
                    <LinearProgress variant="determinate" className="progress-bar" value={this.state.progress} />

                    </div>

                <canvas ref="canvas" className="screenshotCanvas"></canvas>

            </div>
        )
    }
}

const mapStateToProps = state => ({
});

export default connect(mapStateToProps, {updateFace})(LiveFace);

我在挂载组件时请求权限，它在此行失败 navigator.mediaDevices.getUserMedia(constraints) 然后抛出一个错误触发 handleError() 函数，控制台日志是您在上面的错误引用中看到的内容.

它没有提供更多细节，有人可以告诉我这里发生了什么吗？

Answer 1

Error: DOMException

在某些情况下会出现此错误，例如您没有将相机与系统连接或系统中未安装驱动程序。

另一种情况需要安全连接。

使用 React 调用 getUserMedia 时出现 DOMException

DOMException when calling getUserMedia using React

getusermedia

reactjs