View button is missing

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

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

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

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:

Let me know if that helps.

Thanks,
Max

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)

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

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.

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:

Let me know what that returns.

Thanks,
Max

hi @Anusha : were you able to resolve this?

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.

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

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