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 : 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 ?

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.

Hey @ALanois , Checkout my reply to you here: [image] Unable to display self video Angular Web Hey @ALanois , What happens when you run typeof SharedArrayBuffer ==='function' in the browser console? Thanks, Tommy Thanks, Tommy

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

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; } By the way, when I add the token, participant’s video is not centered anymore. Thanks by advance

Thanks for sharing your solution @ALanois . :slight_smile: @bradleywillis891 , can you share some more details about the issue you are experiencing? -Tommy

Unable to display self video with Angular

Video SDK Web

tommy (Tommy Gaessler (PM VDI, Web, Linux, & Meeting SDK)) November 5, 2021, 11:05pm 2

Hey @ALanois ,

Checkout my reply to you here:

Thanks,
Tommy

Topic		Replies	Views
Unable to display self video Angular Web	1	1010	November 5, 2021
Cannot render self video Web	2	1366	February 23, 2022
Setting header in zoomapi call in web sdk Web webinar	1	610	August 31, 2021
Self Video is not visible Video SDK video-sdk	7	589	March 22, 2024
Cross Origin Isolation - Angular meetingsdk-sample-angular Web faq	3	1947	September 8, 2021

Unable to display self video with Angular

Related topics