CODEWITHSUNDEEP
javascripthtmlreactjswebvideo-streaming
Raphael Inyang
Raphael Inyang

Reputation: 197

Viewing video feed from WebRTC in react

Here is the HTML code

<video ref={videos}  autoPlay ></video>

   <Button onClick={() => 
navigator.mediaDevices.getUserMedia({audio: true, video: true}).then((mediaStream) => {

  videos.srcObject = mediaStream;
  videos.onloadedmetadata = function(e) {
    videos.play();
  };
}
)}>Record</Button>

JS

const videos = createRef(null);

Error

Unhandled Rejection (TypeError): Cannot add property srcObject, object is not extensible

 353 |    <Button onClick={() => 
  354 | navigator.mediaDevices.getUserMedia({audio: true, video: true}).then((mediaStream) => {
  355 | 
> 356 |   videos.srcObject= mediaStream;
  357 |   videos.onloadedmetadata = function(e) {
  358 |     videos.play();
  359 |   };

Upvotes: 0

Views: 4554

Answers (1)

xom9ikk
xom9ikk

Reputation: 2289

After you create a ref to the video element, you must use the video.current property to access the DOM element. Your code should look like this:

<video ref={videos}  autoPlay ></video>
   <Button onClick={() => 
    navigator.mediaDevices.getUserMedia({audio: true, video: true})
    .then((mediaStream) => {
      videos.current.srcObject = mediaStream;
      videos.current.onloadedmetadata = function(e) {
      videos.current.play();
      };
    }
    )}>Record</Button>

This should fix the problem.

Upvotes: 3

Related Questions