Right side video not coming

[akashgreninja]

I have tested a lot with even myvideo but the right side video does not seem to appear I have tried everything I also wrote a js statement to see if the uservideo exists which comes out to be true

I am not able to view myvideo as well right side it only appears if I refresh the page

[praveenrambalu]

Yes I have also tested even with your code and I followed along with your tutorials I have created from scratch both are same but rightside video is not working

[DaveSimoes]

Hi Everyone. It´s work for me : Please try run "nodemon index.js" on root file of project , start again and write your name, copy ID and Paste on ID to Call.

I really hope have helped. ...

[xlgabriel]

Hi there! I noticed you're experiencing issues with the video ref not updating properly in React 18. This is a common issue due to the new concurrent features in React 18, which can affect how updates to the DOM are handled, especially for media streams. I've encountered a similar problem and found a solution that worked well for me. Here's how you can approach it:

The key is to use useEffect to handle the assignment of the stream to your video element (myVideo and userVideo in your case) whenever the stream changes. This ensures that any change in the stream is promptly reflected in the video element.

Here's an example based on the original code from this repo:

useEffect(() => {
  if (myVideo.current && stream) {
    myVideo.current.srcObject = stream;
  }
}, [myVideo, stream]);

useEffect(() => {
  if (userVideo.current && stream) {
    userVideo.current.srcObject = stream;
  }
}, [userVideo, stream]);

This code will effectively update the srcObject of your video elements whenever the stream changes or the ref to the video element is set.

Explanation: useEffect and Dependencies: The useEffect hook runs whenever its dependencies (myVideo, userVideo, stream) change. This means whenever you get a new stream or when the video element's ref is initialized, useEffect re-runs, updating the srcObject.

Handling Stream Changes: By managing the stream with useEffect, you ensure that the video element always has the latest stream assigned to its srcObject. This is crucial for applications handling real-time media streams.

Implementing this change should help in ensuring that updates to your stream are consistently reflected in your video elements, addressing the issue you're facing in React 18.

Hope this helps! Let me know if you have any more questions or issues.