Video SDK integration, renderVideo not working

Video SDK Web
1

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,
        d.userId
        );
      }
    });
  }, [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 () => {
      zmClient.off('connection-change', onConnectionChange);
      zmClient.off('media-sdk-change', onMediaSDKChange);
      zmClient.off('user-updated', onUserUpdated)
      // zmClient.off('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.

2

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

3

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.

4

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
5

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
6

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