title: TypeError: srcObject is undefined
body: <p>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,</p>
  <p>I have <code>&lt;video&gt;</code> wrap with ref, looks like this</p>
  <pre><code>&lt;div className=&quot;&quot;&gt;
     &lt;video className=&quot;h-52 w-full&quot; ref={userVideo} /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and this is my const <code>ref</code></p>
  <pre><code>const userVideo = useRef();
  </code></pre>
  <p>then, in my <code>useEffect</code>, i want to put <code>mediaDevices.getUserMedia</code> inside ref</p>
  <pre><code> navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) =&gt; {
      console.log(stream);
      userVideo.current.srcObject = stream;
  </code></pre>
  <p>and why i got this <code>error</code>?</p>
  <pre><code>TypeError: userVideo.current is undefined
  </code></pre>
  <p>I'm using <code>NextJS</code> for this project, please someone help :(</p>
  <p>/* EDIT */</p>
  <p>here's my <code>code</code></p>
  <pre><code>import React, { useState, useEffect, useRef } from &quot;react&quot;;
  
  export default function page() {
    const userVideo = useRef();
    useEffect(() =&gt; {
      socket = io(ENDPOINT);
      navigator.mediaDevices
        .getUserMedia({ audio: true, video: true })
        .then((stream) =&gt; {
          console.log(stream);
          userVideo.current.srcObject = stream;
        });
    });
    return (
      &lt;div&gt;
        &lt;video className=&quot;h-52 w-full&quot; ref={userVideo} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>