Question

我正在构建用于移动设备的Web应用程序。我正在尝试使用Google Chrome中的getUserMedia访问摄像机。

我的应用程序内置在react中，尝试此操作时遇到问题，给我以下错误。

错误：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()函数，并且控制台日志就是您在上面的错误引用中看到的内容。 / p>

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

Answer 1

错误：DOMException

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

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

使用React调用getUserMedia时出现DOMException

1 个答案: