View button is missing

[Anusha (Anusha Gurajapu)]

Description
View Button is missing sometimes through which we can switch between speaker and gallery view

Error
The full error message or issue you are running into.

Which Web Client SDK version?
1.9.5

To Reproduce(If applicable)
Join or start a meeting from client sdk

Screenshots

Device (please complete the following information):

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

Additional context
View Button is visible in some devices and missing in some.
Please help me out

[MaxM]

Hey @Anusha,

Thank you for reaching out to the Zoom Developer Forum. It looks like there are some issues importing dependencies or there is some custom CSS that is conflicting with the default style.

Are you able to provide a code snippet of how you’re importing dependencies?

Thanks,
Max

[Anusha (Anusha Gurajapu)]

Thanks @MaxM for your quick reply. Here below is my code snippet

const showZoomDiv = () => {
document.getElementById(‘zmmtg-root’).style.display = ‘block’;
};

const initiateMeeting = () => {
ZoomMtg.init({
leaveUrl: meetingInfo.leaveUrl,
isSupportAV: true,
disableInvite: true,
showMeetingHeader: false,
success: success => {
console.error(‘zoom success’, success);
ZoomMtg.join({
signature: meetingInfo.signature,
meetingNumber: meetingInfo.id,
userName: meetingInfo.userName,
apiKey: meetingInfo.apiKey,
passWord: meetingInfo.password,
success: successs => {
console.error(‘zoom join success’, successs);
},
error: error => {
console.error(‘zoom join error’, error);
},
});
},
error: error => {
console.error(error);
},
});
};

[MaxM]

Hey @Anusha,

Thank you for providing that. First, I would try using our Sample React App as a reference when building out your application. You can also use it for testing on the latest version (1.9.7) to confirm if any issues you’re seeing there are resolved.

Just to confirm, the main issue here is that you don’t have a button to switch Gallery View on Chrome, correct? If that’s the case, please see our guide on Web Isloation with Chrome 92 as well as this post:

Gallery View Button not showing in Chrome Browser

Is your app running in Web Isolation or using the SharedArrayBuffer Origin Trial? That looks like one of the features that get disabled when the SDK has no access to the SharedArrayBuffer, which is no longer accessible in the latest Chrome update unless running in Web Isolation or using the Origin Trial. For reference:

Let me know if that helps.

Thanks,
Max

[Anusha (Anusha Gurajapu)]

Thank you for the reply @MaxM

Our Application is using the SharedArrayBuffer.
Ours is React.js Application. We use only .js files but not .html
Could you please tell us how we can implement web-isolation in React.js Application (https://marketplace.zoom.us/docs/sdk/native-sdks/web/advanced/web-isolation)

[MaxM]

Hey @Anusha

I don’t have the exact steps when it comes to a React site but for the most part you would be adding the origin trial tokens to the frontend. This likely involves adding them to the singular index.html file that I expect is in your project.

Then, on the back-end, you would configure web isolation.

Let me know if that helps.

Max

[Anusha (Anusha Gurajapu)]

Hi @MaxM ,

WebCodecs Chrome 92 - #32 by MaxM I hope helloparent is having issue similar to us and I can see some progress there. If you can find the solution for them, could you please share with us also.

[MaxM]

Hey @Anusha,

Along with the SharedArrayBuffer Origin Trial, I would make sure that you are sending the headers outlined in the Web Isolation guide.

Also, please run the code snippet to verify if SharedArrayBuffer is running on the page:

Web Cross-Origin Isolation - Advanced Guides - Web - Meeting SDKs - Zoom...

Let me know what that returns.

Thanks,
Max

[helloparent (Hello)]

hi @Anusha : were you able to resolve this?

[Anusha (Anusha Gurajapu)]

Hi @helloparent ,

This issue is not yet resolved for us. We need to implement web isolation, waiting for the exact steps to implement web isolation with React.js application.

[vsandoria (Vinesh)]

Hi @MaxM

We are not getting breakthrough on the ReactJS app, tried all the possible ways for

1. Chrome Origin Trial
   (error: SharedArrayBuffer is undefined & typeof SharedArrayBuffer ===‘function’ rerturns false )
   )
2. Web Isolation
   unable to get how to add these headers on ReactJS code where we have .js file, not the meeting.html file.

location /meeting.html {
add_header ‘cross-origin-resource-policy’ ‘*’;
add_header ‘Cross-Origin-Embedder-Policy’ ‘require-corp’;
add_header ‘Cross-Origin-Opener-Policy’ ‘same-origin’;
}

This is for server-side where our code is on reactJs only. 

Can you please help our with the possible solution?

Thanks 
Vinesh

[vsandoria (Vinesh)]

@Anusha I assume, you are facing the same challenges to resolve this on reactJS code.

[tommy (Tommy Gaessler)]

Hey @vsandoria , @Anusha , @helloparent ,

What version of the Web Meeting SDK are you all on?

I see @Anusha is using 1.9.5 and we have made many improvements since then.

https://marketplace.zoom.us/docs/changelog#labels/meeting-sdk-web

Thanks,
Tommy

[helloparent (Hello)]

1.9.8 version of Zoom web sdk

[MaxM]

@vsandoria @Anusha @helloparent

From here, I recommend testing with the latest version 1.9.9 with all of the origin trials mentioned in our Web Isolation guide enabled.

The best method to test is to clone the Sample Web App and test with that before upgrading your implementation.

If that’s not helpful, please update us here with the following information:

Web SDK Version:
OS Version:
Browser Version:

Thanks,
Max