Issues with Zoom Video SDK Integration in Angular 17 Application

[cinar (Hüseyin)]

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:

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

In the component, I get it like this:

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

I create the zoomClient in the ngAfterViewInit part as follows:

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

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

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:

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);

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.

[cinar (Hüseyin)]

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>

  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);
          });
        }
      });