Unhandled Rejection (TypeError): myVideo.current is undefined

[wasim2725]

C:/Users/mohdw/Desktop/WebRTC/client/src/SocketContext.js:26

.then((currentStream) => {
setStream(currentStream);

        myVideo.current.srcObject = currentStream;
    });

[adarsh-chakraborty]

Did you find any solution?

[dynamo58]

Don't know if this is still relevant, but this worked for me:

With the default boilerplate generated by create-react-app I had something like this in my index client file

import ReactDOM from 'react-dom/client';
import './styles/index.css';
import App from './App';
import { ContextProvider } from './Context';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <ContextProvider>
    <App />
  </ContextProvider>
);

I changed this to match the video and turned it into

import ReactDOM from 'react-dom';
import './styles/index.css';
import App from './App';

import { ContextProvider } from './Context';

ReactDOM.render(
  <ContextProvider>
    <App />
  </ContextProvider>,
  document.getElementById('root') as HTMLElement
);

I am absolutely oblivious as to why this fixes the issue, but it did for me.

[OkezeKingsley]

I'm currently facing as issue with this. The project isn't working because of this, I've tried multiple ways, but still haven't gotten a better solution.😤

[gihev72]

try this, it may help🫥

`
useEffect(()=>{

const getMd = async () => {
    const currentStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
    setStream(currentStream);
    myVideo.current.srcObject = currentStream;
}

(async ()=> await getMd())();
// getMd()

socket.on("me", (id)=> setMe(id))

socket.on("calluser", ({from, name:callerName, signal})=>{
  setCall({isReceiveCall: true, from, name: callerName, signal})
})

}, []);
`

[OkezeKingsley]

Ok, I'd get back to you.

…

On Wed, Nov 9, 2022, 10:47 PM gihev72 ***@***.***> wrote: try this, it may help🫥 ` useEffect(()=>{ const getMd = async () => { const currentStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true}); setStream(currentStream); myVideo.current.srcObject = currentStream; } (async ()=> await getMd())(); // getMd() socket.on("me", (id)=> setMe(id)) socket.on("calluser", ({from, name:callerName, signal})=>{ setCall({isReceiveCall: true, from, name: callerName, signal}) }) }, []); ` — Reply to this email directly, view it on GitHub <#7 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AXDOLURGO3EYYOO4LLPDZETWHQLXTANCNFSM5FGVH53A> . You are receiving this because you commented.Message ID: ***@***.***>