CODEWITHSUNDEEP
reactjshtml5-videowebcam
Sergio Ivanuzzo
Sergio Ivanuzzo

Reputation: 1922

React - can't stream video from webcam

I'm trying to fix my Component to streaming data from webcam. It renders successfully and successfully gets access to webcam. But I have no idea why video tag do not plays anything. How to fix this? What am I missing?

export class WebcamStream extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            src: null
        }
        this.videoRef = React.createRef()
    }

    componentDidMount() {
        // getting access to webcam
        navigator.mediaDevices
            .getUserMedia({video: true})
            .then(stream => this.setState({src: stream}))
            .catch(console.log);
    }

    render() {
        return <video id={this.props.id}
                      ref={() => this.videoRef.srcObject = this.state.src}
                      width={this.props.width}
                      height={this.props.height}
                      autoPlay="autoplay"
                      title={this.props.title}></video>
    }
}

Upvotes: 0

Views: 5683

Answers (4)

Jorge Santos Neill
Jorge Santos Neill

Reputation: 1785

The component that worked for me is the following

import React, { useState, useEffect } from 'react';

export default function ModalVideo(props) { 
    const [video,]=useState(React.createRef());

    const videoError=(error)=>{
        console.log("error",error);
    }

    const handleVideo=(stream)=>{
        video.current.srcObject = stream;
    }

    useEffect(() => {
        navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
        if (navigator.getUserMedia) {
            navigator.getUserMedia({video: true}, handleVideo, videoError);
        }
    });

    return (
        <div>
            <video ref={video}  autoPlay={true} />
        </div>
    )
}

Upvotes: 1

khushahal sharma
khushahal sharma

Reputation: 1

i am also facing same error when using same above code it is showing " _this2.video is undefined; can't access its "current" property" and All things is right , take vedio permission but it is not showing vedio in my page.

Upvotes: 0

Sergio Ivanuzzo
Sergio Ivanuzzo

Reputation: 1922

Well, I have found what was wrong. According to docs I need to use current property to make the node accessible. So, the full working example of my Webcam component:

export class WebcamStream extends React.Component {
    constructor(props) {
        super(props);
        this.videoTag = React.createRef()
    }

    componentDidMount() {
        // getting access to webcam
       navigator.mediaDevices
            .getUserMedia({video: true})
            .then(stream => this.videoTag.current.srcObject = stream)
            .catch(console.log);
    }

    render() {
        return <video id={this.props.id}
                      ref={this.videoTag}
                      width={this.props.width}
                      height={this.props.height}
                      autoPlay
                      title={this.props.title}></video>
    }
}

this.setState was removed in prior of direct srcObject changing from promise, but I'm not sure if this React way. Maybe, more correctly is moving this.videoTag.current.srcObject = stream code as setState callback?

Upvotes: 5

Xizario
Xizario

Reputation: 501

The ref is not correctly used in this line: 

ref={() => this.videoRef.srcObject = this.state.src}

As in your code just sets the src to the videoRef which is not initialized so it never gets to the video tag.

You may try: 

ref={this.videoRef.srcObject}

And in the componentDidMount:

.then(stream => {this.videoRef.srcObject = stream})

Or simply:

ref={(e) => e.srcObject = this.state.src}

Upvotes: 1

Related Questions