DOMException при вызове getUserMedia с использованием React - PullRequest
Новая
       57

DOMException при вызове getUserMedia с использованием React

0 голосов
/ 23 апреля 2019

Я создаю веб-приложение для мобильных устройств.Я пытаюсь получить доступ к камере с помощью getUserMedia в Google Chrome.

Мое приложение встроено реагирует, и у меня возникают проблемы при попытке этого, сообщая мне следующую ошибку.

Ошибка: 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(), и вы можете увидеть журнал консоли.в приведенной выше цитате ошибки.

Это не дает больше подробностей, может кто-нибудь сказать мне, что здесь происходит?

1 Ответ

0 голосов
/ 23 апреля 2019

Ошибка: DOMException

эта ошибка возникает в некоторых случаях, например, если вы не подключили камеру к Системе или драйвер не установлен в вашей системе.

В другом случае потребуется безопасное соединение.

...