# Video SDK integration, renderVideo not working

**URL:** <https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543>\
**Category:** Web\
**Created:** [March 26, 2024, 1:01pm UTC](https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543 "2024-03-26T13:01:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalparslantufek](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kalparslantufek/32/56158_2.png) [@kalparslantufek](https://devforum.zoom.us/u/kalparslantufek)\
**Post date:** [March 26, 2024, 1:01pm UTC](https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543/1 "2024-03-26T13:01:47Z")

</div>

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

```auto
 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.

---

<div class="post-metadata">

**Author:** ![kalparslantufek](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kalparslantufek/32/56158_2.png) [@kalparslantufek](https://devforum.zoom.us/u/kalparslantufek)\
**Post date:** [March 26, 2024, 2:07pm UTC](https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543/2 "2024-03-26T14:07:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kellyjandrews](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kellyjandrews/32/51599_2.png) [@kellyjandrews](https://devforum.zoom.us/u/kellyjandrews)\
**Post date:** [March 27, 2024, 4:12pm UTC](https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543/3 "2024-03-27T16:12:39Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![kalparslantufek](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kalparslantufek/32/56158_2.png) [@kalparslantufek](https://devforum.zoom.us/u/kalparslantufek)\
**Post date:** [March 28, 2024, 12:26pm UTC](https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543/4 "2024-03-28T12:26:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kellyjandrews](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/kellyjandrews/32/51599_2.png) [@kellyjandrews](https://devforum.zoom.us/u/kellyjandrews)\
**Post date:** [March 28, 2024, 2:44pm UTC](https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543/5 "2024-03-28T14:44:39Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/3X/6/1/614bdd549b610bbaa46ff934617683a02bdaa03c.png) [@system](https://devforum.zoom.us/u/system)\
**Post date:** [April 28, 2024, 12:45am UTC](https://devforum.zoom.us/t/video-sdk-integration-rendervideo-not-working/106543/6 "2024-04-28T00:45:20Z")

</div>

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