Unable to display self video with Angular

Video SDK Web
1

Hi,
I’m trying to integrate the Zoom video SDK in my Angular app.
I turned the purejs demo into Angular to run the SDK in my app.
I have two Canvas :

  • One to display my own video
  • One to display participants video

The video from participants is well displayed in the targeted canvas but my video is not visible in the other one while other participants can see mine.
I tried to add the following in index.html, but this not solved the issue :
<meta http-equiv="origin-trial" content="TOKEN">

Then I tried to add in my angular.json :

"headers": {
  "Cross-Origin-Opener-Policy":"same-origin",
  "Cross-Origin-Embedder-Policy":"require-corp"
}

But that still doesn’t solve the problem

Any idea ?

2

Hey @ALanois ,

Checkout my reply to you here:

Thanks,
Tommy

3

Hello,
It return true

4

Thanks @ALanois .

Can you please share screenshots and code snippets of the issue? We can assist further if you give us some more details and steps to reproduce. :slight_smile:

-Tommy

5

It seems that I can’t add media file in reply so I’ll describe the content :sweat_smile:
I have my two Canvas with one supposed to contain my video (blank) and one with participant video (filled).
In my console :

  • [Deprecation] SharedArrayBuffer will require cross-origin isolation as of M92, around July 2021. See for more details.
  • typeof SharedArrayBuffer ===‘function’
    true

And parts of the code :

this.meCanvas = document.getElementById('me-canvas');
await this.zoomCli.join('VideoSDK', sessionToken, 'User', '1234ABC');
this.myId = this.zoomCli.getSessionInfo().userId;

private async toggleSelfVideo(isVideoOn){
        if (typeof this.isStartedVideo !== 'boolean' || this.prevIsSelfVideoOn === isVideoOn) {
            return;
        }
        if (isVideoOn) {
            await this.mediaStream.startVideo();
            await this.mediaStream.renderVideo(
                this.meCanvas,
                this.myId,
                1280 / 2,
                640,
                1280 / 2,
                0,
                2,
            ); 
            
        } else {
            await this.mediaStream.stopVideo();
            await this.mediaStream.stopRenderVideo(this.meCanvas, this.zoomCli.getSessionInfo().userId);
            await this.mediaStream.clearVideoCanvas(this.meCanvas);
        }
        this.prevIsSelfVideoOn = isVideoOn;
    }

<canvas id="me-canvas" class="video-canvas" width="640" height="320"></canvas>

By the way, when I add the token, participant’s video is not centered anymore.

Thanks by advance

6

still not working for me…!!!

7

I solved the issue.
In fact the problems were the dimensions sent in parameters of renderVideo which were to high compared to the canvas’s dimension.
But we still need to add the tag with the token.

1 Like
8

Thanks for sharing your solution @ALanois . :slight_smile:

@bradleywillis891 , can you share some more details about the issue you are experiencing?

-Tommy

9

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