Video SDK integration, renderVideo not working

hello im using @zoom/videosdk 1.10.8 for my project. I’ve started integrating from sample app and documentation, and i have not been able to render video of connecting participant. My code is like below

 const onUserUpdated = useCallback(async (payload :Array<any>) => {
    payload.forEach(async d => {
      console.log("d", d)
      if(d.bVideoOn && d.userId !== zmClient.getSessionInfo().userId){
        console.log("rendering d", d)
        await mediaStream?.startVideo();
        await mediaStream?.renderVideo(document.querySelector('#self-video') as HTMLCanvasElement,
        d.userId, 960, 540, 960, 540, 3);
      else if(d.bVideoOn === false && d.userId !== zmClient.getSessionInfo().userId){
        await mediaStream?.stopRenderVideo(document.querySelector('#self-video') as HTMLCanvasElement,
  }, [zmClient]);

  useEffect(() => {
    zmClient.on('connection-change', onConnectionChange);
    zmClient.on('media-sdk-change', onMediaSDKChange);
    // zmClient.on('peer-video-state-change', onPeerVideoStateChange)
    zmClient.on('user-updated', onUserUpdated)
    return () => {'connection-change', onConnectionChange);'media-sdk-change', onMediaSDKChange);'user-updated', onUserUpdated)
      //'peer-video-state-change', onPeerVideoStateChange);

and my canvas is

the thing is, second connecting user can see the first user, but first user cant see second user.
if its easier i can try to integrate videosdk-uikit too but i dont know what im doing wrong with this.

by the way at this mediaStream?.startVideo() line is not here originally, it works when i connect to page.

Do you have any errors or anything in the console?

Any chance you can share the full app code that you have so far? It appears as though the #self-video is being populated if it’s not the current user, and I would like to know more about the rest of the app to get a better picture.

i’ve actually solved it, my mediastream object was null inside my callback.
In my app only 2 people can join a meeting, and i tried peer video state change but it did not do anything in my app, probably because mediastream was null, and i’ve used user-updated for rendering videos.
I’ll try if peer-video-state-change works normally now and continue with that, but if you have any suggestions im here to listen

1 Like

Ok - good - just making sure this was solved.

With peer-video-state-change event - you will see when a user has started or stopped the video stream, however user-updated will fire after to alert you to the change in the bVideoOn property changing to true or false.

You could programatically show then show that a user is connecting, and then show the video when it’s on.

You can also use 'video-active-change for an active/inactive state. You can log them to your console to determine how you might want to use them when someone joins.

Hope this helps!

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.