Pfthb

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?