Web Meeting SDK version 1.9.9, not able to view host video and Gallery view

vbhosale · October 9, 2021, 11:53am

Description
I have downloaded and run the application,
Link : GitHub - zoom/meetingsdk-sample-angular: Use the Zoom Meeting SDK in an Angular App
In above application contains web meeting sdk version is 1.9.9 and I’m facing couple of issue.
Issue mention below,
One is no host video and another is Gallery View missing.

Error

No host Video is there.
There is no option to view ‘Gallery View’.

Which Web Meeting SDK version?

Web Meeting SDK version 1.9.9

To Reproduce(If applicable)
Steps to reproduce the behavior:

download the app from link, GitHub - zoom/meetingsdk-sample-angular: Use the Zoom Meeting SDK in an Angular App
Run the application.
Add multiple participants.
See issue, Missing host video and Gallery View

Screenshots

Device (please complete the following information):

Device: Laptop
OS: Windows
Browser: Chrome
Browser Version 94.0.4606.71 (Official Build) (64-bit)

@tommy
Help me with there is production issue and I have to resolve it.

DeniJSa · October 10, 2021, 8:46am

You have to enable web cross-origin isolation, you can follow the step in here https://marketplace.zoom.us/docs/sdk/overview/improve-performance

vbhosale · October 10, 2021, 4:08pm

@ DeniJSa
But I’m using web sdk, so where can I Implementing Cross-Origin Isolation as mention in link given by you.
Any specific code and where to add.
It will helpful.

DeniJSa · October 10, 2021, 11:19pm

you cant put it in file index.html, inside src folder

vbhosale · October 11, 2021, 7:03am

If you share some code snippets it will helpful.
As a I mention I’m using WEB SDK so there is some confusion please help me out.

vbhosale · October 11, 2021, 1:51pm

@donte.S Can you help me with this.

vbhosale · October 11, 2021, 2:11pm

Hey @agus.wiranata I saw your post Getting Blank screen on self Video and looks closed.

I’m facing the same issue if possible to can you help me to figure it out, How you did Cross-Origin Isolation your webpage.

Thank you in advance.

agus.wiranata · October 11, 2021, 4:12pm

Hey @vbhosale,

as you read in the post, I solved it by adding some response headers related to cross origin access in the web config.

if you are using the iis web server, then just follow the steps I explained in the post.

For a more detailed explanation, you can read here : https://web.dev/coop-coep/

vbhosale · October 11, 2021, 4:37pm

Hey @agus.wiranata thanks for the reply.

For IIS I got this, but my concern is for any html file or as you mention web config, can you please provide the code snippets for this.

I’ve created angular application for this.

agus.wiranata · October 11, 2021, 4:43pm

@vbhosale

I hope this fulfills what you expect

tommy · October 11, 2021, 6:10pm

Hey @vbhosale ,

Here is where you can place your SharedArrayBuffer token:

github.com

zoom/meetingsdk-sample-angular/blob/master/src/index.html#L13

    
      
          <head>
            <meta charset="utf-8">
            <title>Zoom Meeting SDK Sample Angular</title>
            <base href="/">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="icon" type="image/x-icon" href="favicon.ico">
          
          
  <!-- Origin Trials to improve SDK performance on Chrome -->
            <!-- More Info: https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation -->
            <!-- SharedArrayBuffers in non-isolated pages on Desktop platforms -->
            <meta http-equiv="origin-trial" content="">
            <!-- WebAssembly SIMD -->
            <meta http-equiv="origin-trial" content="">
          </head>
          <body>
            <app-root></app-root>
          </body>
          </html>

Thanks for your suggestions @agus.wiranata , @DeniJSa !

Let me know if you have any questions!

-Tommy

vbhosale · October 12, 2021, 1:17pm

@agus.wiranata thanks for this I’ll implement and check it.

vbhosale · October 12, 2021, 1:20pm

@tommy thanks for this this is temporary solution right? and I want to fix this permanently by Isolation web page.
@agus.wiranata has provided one solution I’ll update here accordingly.

tommy · October 12, 2021, 4:06pm

Hey @vbhosale ,

Yes, Cross Origin Isolation would be the permanent fix.

Thanks,
Tommy

vbhosale · October 13, 2021, 1:46pm

@agus.wiranata , thanks for web config code snippets it works fine for me. Thanks once again.
But there is one issue, I’m using IFrame there so in normal window it is working totally fine, but when same application opens with/ from IFrame Gallery View and Host video is visible.
If possible can you help me with this.

vbhosale · October 13, 2021, 1:54pm

@tommy Thanks for the replay and info.

I’m using IFrame there so in normal window it is working totally fine, but when same application opens with/ from IFrame Gallery View and Host video is visible.
If possible can you help me with this.

vbhosale · October 13, 2021, 2:09pm

@tommy for “Cross Origin Isolation” do we need to set SharedArrayBuffer to true, if yes can you tell me where and how to set

tommy · October 13, 2021, 9:18pm

Hey @vbhosale ,

You can use one or the other. Not both.

Unfortunately embedding the Web SDK’s into an iFrame is not currently supported.

Thanks,
Tommy

merrysmithr · October 16, 2021, 10:20pm

Got this same issue and tried this method too but not working . I attach this link to my website and user join the meeting from there.

MaxM · October 19, 2021, 9:50pm

Hey @merrysmithr,

Thanks for following up on this! When you follow our guide on Improving Web SDK Performance what does the SharedArrayBuffer verification step return?

typeof SharedArrayBuffer ==='function'

Thanks,
Max