DOMException when calling getUserMedia using React

Question

I am building a web application for mobile. I am trying to access the camera using getUserMedia in google chrome.

My application is built in react and i am having issues when trying this, giving me the following error.

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

I request permission when the component is mounted it fails on this line navigator.mediaDevices.getUserMedia(constraints) and then throws an error which triggers handleError() function and the console log is what you can see in the above error quote.

Its not giving any more details, can someone tell me what is happening here?

https://developers.google.com/web/updates/2017/06/play-request-was-interrupted go to this link , it may help — Kishan Jaiswal, Apr 23 '19 at 13:29

score 1 · Accepted Answer · answered Apr 23 '19 at 13:32

1

Error: DOMException

this error comes in some case like, you have not connected the camera with the System or driver are not installed in your system.

another case it would require a secure connection.

answered Apr 23 '19 at 13:32

Narendra Chouhan

2,291
1
15
24

Even on my laptop it is not working which has a camera – Kay Apr 23 '19 at 13:33
than you tried by allow the site permission allow camera just like we allow microphone for website to record – Narendra Chouhan Apr 23 '19 at 13:34
Ye i can see in chrome the setting is set to Allow, there are 2 other options block and ask. So my browser is defiantly allowed it. – Kay Apr 23 '19 at 13:35
if on local that doesn't work you can create a small demo and create a build and host on now server , NOW provide you a easy way to host and give you a https secure connection and gives you a url https://zeit.co/now – Narendra Chouhan Apr 23 '19 at 13:36
Im already hosting it on https connect and it doesen't work there either. – Kay Apr 23 '19 at 13:40
This should work using localhost, because i have a html only page (no react) that is working. – Kay Apr 23 '19 at 13:40
can you call a function on a button click and than check by palcing this into the function `navigator.mediaDevices.getUserMedia(constraints)` – Narendra Chouhan Apr 23 '19 at 13:48
So in the end it turned out that my camera on mac laptop crashed. Chrome silently errors but firefox throws an actual telling me it can't find the device. – Kay Apr 23 '19 at 14:10
great to hear that we caught the problem you can upvote it if you feel its helps you , – Narendra Chouhan Apr 23 '19 at 14:11

DOMException when calling getUserMedia using React

1 Answers1