Xtykutl

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>

    }

}

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}

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?

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.