CODEWITHSUNDEEP
reactjsnext.jsvideo-streaming
Haksatrya Bhaswara
Haksatrya Bhaswara

Reputation: 237

TypeError: srcObject is undefined

good day everyone! hope you guys have a good day! i'm working on my webcam video project, using video, i've some obstacle, didn't know why, but this pretty annoying,

I have <video> wrap with ref, looks like this

<div className="">
   <video className="h-52 w-full" ref={userVideo} />
</div>

and this is my const ref

const userVideo = useRef();

then, in my useEffect, i want to put mediaDevices.getUserMedia inside ref

 navigator.mediaDevices
  .getUserMedia({ audio: true, video: true })
  .then((stream) => {
    console.log(stream);
    userVideo.current.srcObject = stream;

and why i got this error?

TypeError: userVideo.current is undefined

I'm using NextJS for this project, please someone help :(

/* EDIT */

here's my code

import React, { useState, useEffect, useRef } from "react";

export default function page() {
  const userVideo = useRef();
  useEffect(() => {
    socket = io(ENDPOINT);
    navigator.mediaDevices
      .getUserMedia({ audio: true, video: true })
      .then((stream) => {
        console.log(stream);
        userVideo.current.srcObject = stream;
      });
  });
  return (
    <div>
      <video className="h-52 w-full" ref={userVideo} />
    </div>
  );
}

Upvotes: 0

Views: 724

Answers (1)

&#214;zg&#252;r Polat
&#214;zg&#252;r Polat

Reputation: 19

Try changing this:

userVideo.current.srcObject = stream

to this:

userVideo.srcObject = stream

Upvotes: 0

Related Questions