# Issues with Zoom Video SDK Integration in Angular 17 Application

**URL:** <https://devforum.zoom.us/t/issues-with-zoom-video-sdk-integration-in-angular-17-application/114714>\
**Category:** Web\
**Tags:** video-sdk\
**Created:** [July 31, 2024, 9:10am UTC](https://devforum.zoom.us/t/issues-with-zoom-video-sdk-integration-in-angular-17-application/114714 "2024-07-31T09:10:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cinar](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@cinar](https://devforum.zoom.us/u/cinar)\
**Post date:** [July 31, 2024, 9:10am UTC](https://devforum.zoom.us/t/issues-with-zoom-video-sdk-integration-in-angular-17-application/114714/1 "2024-07-31T09:10:14Z")

</div>

Hello,

I have developed an application using Angular 17. Initially, I used the UI Toolkit. Most of our meetings were conducted without any issues, but occasionally, we faced connection problems. Additionally, we want the video recordings to appear in gallery view or focus entirely on one user. We realized that we couldn’t achieve some features with the UI Toolkit and decided to continue with the **`@zoom/videosdk`** package.

In our meetings, there are only two users. Our user connects via the web interface, and the other user connects through our Android or iOS application. We don’t actually need the camera of our user connecting through the web interface (host). We couldn’t achieve this with the UI Toolkit, but we believe we can customize it here.

For the user video in the interface, I have added the following:

```auto
<canvas #participantVideoCanvas id="participantVideoCanvas" class="participant-video-canvas"></canvas>

```

In the component, I get it like this:

```auto
@ViewChild('participantVideoCanvas') participantVideoCanvas!: ElementRef<HTMLCanvasElement>;

```

I create the `zoomClient` in the `ngAfterViewInit` part as follows:

```auto
ngAfterViewInit() {
  this.zoomClient = ZoomVideo.createClient();
}

```

After handling the token and other parts, I use the following method to join the session:

```auto
initZoomClient(config: { videoSDKJWT: string; sessionName: string; userName: string; features: string[]; }) {
  this.ngZone.runOutsideAngular(() => {
    this.zoomClient.init('en-US', 'Global', { patchJsMedia: true }).then(() => {
      this.zoomClient
        .join(config.sessionName, config.videoSDKJWT, config.userName, '')
        .then(() => {
          this.videoStream = this.zoomClient.getMediaStream();
          this.zoomClient.getAllUser().forEach((usr: any) => {
            if (!usr.isHost && usr.bVideoOn) {
              console.log('Participant:', usr);
              this.videoStream.startVideo().then(() => {
                this.videoStream.renderVideo(this.participantVideoCanvas.nativeElement, usr.userId, 960, 540, 0, 0, 3);
              }).catch((error: any) => {
                console.error('Error starting video:', error);
              });

              this.startCallDurationTimer(); // Start the call duration timer

              // Update the call state
              this.store.dispatch(startCall({ sessionId: this.sessionId! }));
              this.websocketService.sendMessageToGroup(this.topic!, this.config.userName);
            }
          });
        });
    });
  });
}

```

There doesn’t seem to be an issue with our user in the mobile app, but on the assistant side connecting via the web, the user’s camera (app users, not the host) is not visible. There are different behaviors on Firefox and Chrome.

I see the following error in the console on Chrome:

```auto
Error: video dom node not provided!
    at e.value (js_media.min.js:1:569243)
    at js_media.min.js:1:624507
    at new ZoneAwarePromise (zone.js:2611:25)
    at e.Start_Video_Capture (js_media.min.js:1:624077)
    at js_media.min.js:1:652984
    at p (js_media.min.js:1:118238)
    at Generator.<anonymous> (js_media.min.js:1:119575)
    at Generator.next (js_media.min.js:1:118601)
    at r (js_media.min.js:1:75921)
    at s (js_media.min.js:1:76132)

```

But i can see the canvas control when i log the  
console.log(‘Video element:’, this.participantVideoCanvas);

```auto
Video element:
_ElementRef {nativeElement: video#participantVideoCanvas.participant-video-canvas}

```

I am unable to figure out the issue. I’m  
Could you please assist us in resolving this problem?

Thank you.

---

<div class="post-metadata">

**Author:** ![cinar](https://avatars.discourse-cdn.com/v4/letter/c/b9bd4f/32.png) [@cinar](https://devforum.zoom.us/u/cinar)\
**Post date:** [July 31, 2024, 5:00pm UTC](https://devforum.zoom.us/t/issues-with-zoom-video-sdk-integration-in-angular-17-application/114714/2 "2024-07-31T17:00:29Z")

</div>

I solved when I rendered the video in a canvas with a certain width and height.

`<canvas id="participant-videos-canvas" width="1920" height="1080"></canvas>`

```auto
  this.zoomClient.on('peer-video-state-change', (payload: any) => {
        console.log('Peer video state change:', payload);
        var videoElement = document.querySelector('#participant-videos-canvas');
        console.log('videoElement:', videoElement);
        if (payload.action === 'Start') {
          this.videoStream.renderVideo(
            videoElement,
            payload.userId, 1920, 1080, 0, 0, 3
          ).then(() => {
            console.log(`Video started for user ${payload.userId}`);
          }).catch((error: any) => {
            console.error(`Error starting video for user ${payload.userId}:`, error);
          });
        } else if (payload.action === 'Stop') {
          this.videoStream.stopRenderVideo(
            videoElement,
            payload.userId
          ).then(() => {
            console.log(`Video stopped for user ${payload.userId}`);
          }).catch((error: any) => {
            console.error(`Error stopping video for user ${payload.userId}:`, error);
          });
        }
      });

```

---

<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:** [August 31, 2024, 3:00am UTC](https://devforum.zoom.us/t/issues-with-zoom-video-sdk-integration-in-angular-17-application/114714/3 "2024-08-31T03:00:47Z")

</div>

Closed on August 31, 2024, 3:00am UTC

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