Cannot set properties of undefined (setting 'srcObject')

Question

I am trying to stream a video, but when i set 'myVideo.current.srcObject = currentStream' as in the code below, I recieve an error 'Cannot set properties of undefined (setting 'srcObject')'

const myVideo = useRef({});  
const userVideo = useRef({});  
const connectionRef = useRef();  
useEffect(() => {  
  navigator.mediaDevices  
    .getUserMedia({ video: true, audio: true })  
    .then((currentStream) => {  
      setStream(currentStream);  
      myVideo.current.srcObject = currentStream;  
    });  
  socket.on("me", (id) => {  
    setMe(id);  
  });socket.on("callUser", ({ from, callerName, signal }) => {  
    setCall({ isReceivedCall: true, from, callerName, signal });  
  });  
}, []);```




  

Answer 1

When using const myVideo = useRef(), the value of myVideo.current may be undefined until the ref has been attached to something.

You may need to check that myVideo.current exists before doing any operations on it.

You could do this with if statements or optional chaining

if

if (myVideo.current) {
  // do something
  myVideo.current.srcObject = currentStream;
}

optional chaining

myVideo.current?.srcObject = currentStream;

Both will only execute once the myVideo.current has a value