Zoom meeting sdk view button not showing

Description
I have embedded zoom meeting sdk in my website. i render the meeting page into an iframe. when I start the meeting i can not see the view button to change the view. here showing full screen button. If not embedded meeting page into an iframe same issue happen i can not find the view button.

Browser Console Error
Console showing no error

Which Web Meeting SDK version?
I have used version 2.18.2

Meeting SDK Code Snippets

<script>
                        ZoomMtg.setZoomJSLib('https://source.zoom.us/2.18.2/lib', '/av');

                        ZoomMtg.preLoadWasm();
                        ZoomMtg.prepareWebSDK();
                        // loads language files, also passes any error messages to the ui
                        ZoomMtg.i18n.load('en-US');
                        ZoomMtg.i18n.reload('en-US');

                        var authEndpoint = '/api/zoom_signature';
                        var sdkKey = 'isNISQDGRmyneq9LYUgitA';
                        var registrantToken = '';
                        var zakToken = '';
                        var leaveUrl = 'https://agm.spiralworld.biz/agm-board';

                        var meetingNumberInput = document.getElementById('meetingNumberInput');
                        var UserNameInput = document.getElementById('UserInput');
                        var passWordInput = document.getElementById('passWordInput');
                        var userEmailInput = document.getElementById('EmailInput');

                        var meetingNumber = meetingNumberInput.value;
                        var passWord = passWordInput.value;
                        var userName = UserNameInput.value;
                        var userEmail = userEmailInput.value;

                        console.log(meetingNumber, passWord, userName, userEmail);

                        function getSignature() {
                        var joinMeetingBtn = document.getElementById('joinMeetingBtn');
                        joinMeetingBtn.style.display = 'none';

                        // Dynamically determine the role based on the user information
                        var staticUsername = 'AGM';
                        var userRole = (userName === staticUsername) ? 1 : 0;

                        fetch(authEndpoint, {
                        method: 'POST',
                        headers: {
                        'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                        meetingNumber: meetingNumber,
                        role: userRole
                        })
                        }).then((response) => {
                        return response.json();
                        }).then((data) => {
                        console.log(data);
                        var signature = data.result.signature;
                        startMeeting(signature);
                        }).catch((error) => {
                        console.log(error);
                        });
                        }

                        function startMeeting(signature) {
                        document.getElementById('zmmtg-root').style.display = 'block';

                        ZoomMtg.init({
                        leaveUrl: leaveUrl,
                        success: (success) => {
                        console.log(success);
                        ZoomMtg.join({
                        signature: signature,
                        sdkKey: sdkKey,
                        meetingNumber: meetingNumber,
                        passWord: passWord,
                        userName: userName,
                        userEmail: userEmail,
                        tk: registrantToken,
                        zak: zakToken,
                        success: (success) => {
                        console.log(success);
                        },
                        error: (error) => {
                        console.log(error);
                        },
                        });
                        },
                        error: (error) => {
                        console.log(error);
                        }
                        });
                        }
                    </script>

Screenshots

Device (please complete the following information):

  • Device: Pc
  • OS: Windows
  • Browser:Chrome
  • Browser Version: Version 120.0.6099.110 (Official Build) (64-bit)

@zoom78 ,

This should be working fine, I’m using iFrame with this specific sample code, and following these best practices

@chunsiong.zoom
Is there any problem with my js?
here is my full meeting page

<?xml version="1.0" encoding="utf-8"?>
<odoo>
    <data>
        <template id="spiralworld_agm_meeting" name="SpiralWorld AGM demo">
            <div>
                <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.18.2/css/bootstrap.css"/>
                <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.18.2/css/react-select.css"/>
                <link rel="stylesheet" href="\spiralworld_agm_webinar\static\src\css\style.css"/>
                <body>
                    <main>
                        <h1>Zoom Meeting SDK Sample JavaScript</h1>

                        <div id="meetingSDKElement">
                            <!-- Zoom Meeting SDK Rendered Here -->
                        </div>

                        <button onClick="getSignature()">Join Meeting</button>
                    </main>
                    <script src="https://source.zoom.us/2.18.2/lib/vendor/react.min.js"></script>
                    <script src="https://source.zoom.us/2.18.2/lib/vendor/react-dom.min.js"></script>
                    <script src="https://source.zoom.us/2.18.2/lib/vendor/redux.min.js"></script>
                    <script src="https://source.zoom.us/2.18.2/lib/vendor/redux-thunk.min.js"></script>
                    <script src="https://source.zoom.us/2.18.2/lib/vendor/lodash.min.js"></script>
                    <script src="https://source.zoom.us/zoom-meeting-2.18.2.min.js"></script>

                    <script type="text/javascript">
                        ZoomMtg.setZoomJSLib('https://source.zoom.us/2.18.2/lib', '/av');
                        ZoomMtg.preLoadWasm();
                        ZoomMtg.prepareWebSDK();
                        ZoomMtg.i18n.load('en-US');
                        ZoomMtg.i18n.reload('en-US');

                        var authEndpoint = '/api/zoom_signature';
                        var sdkKey = 'isNISQDGRmyneq9LYUgitA';
                        var meetingNumber = '89629417469';
                        var passWord = 'nQL9JCMtFXc3j8rMtVYjjUiez0Jn7y.1';
                        var role = 0;
                        var userName = 'JavaScript';
                        var userEmail = 'zoom@spiralworld.biz';
                        var registrantToken = '';
                        var zakToken = '';
                        var leaveUrl = 'https://zoom.us';

                        function getSignature() {
                        fetch(authEndpoint, {
                        method: 'POST',
                        headers: {
                        'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({
                        meetingNumber: meetingNumber,
                        role: role
                        })
                        }).then((response) => {
                        return response.json();
                        }).then((data) => {
                        var signature = data.result.signature;
                        console.log('Signature fetched:', signature);
                        startMeeting(signature);
                        }).catch((error) => {
                        console.log('Error fetching signature:', error);
                        });
                        }

                        function startMeeting(signature) {
                        document.getElementById('zmmtg-root').style.display = 'block';

                        ZoomMtg.init({
                        leaveUrl: leaveUrl,
                        success: (success) => {
                        console.log('Init success:', success);
                        ZoomMtg.join({
                        signature: signature,
                        sdkKey: sdkKey,
                        meetingNumber: meetingNumber,
                        passWord: passWord,
                        userName: userName,
                        userEmail: userEmail,
                        tk: registrantToken,
                        zak: zakToken,
                        success: (success) => {
                        console.log('Join success:', success);
                        },
                        error: (error) => {
                        console.log('Join error:', error);
                        },
                        });
                        },
                        error: (error) => {
                        console.log('Init error:', error);
                        }
                        });
                        }
                    </script>

                </body>
            </div>

        </template>
    </data>
</odoo>

console log:


image

i can not find any problem but view button not showing here.

@zoom78 ,

please do take a look at the code here and here

@chunsiong.zoom
i have implemented same code but view button not showing please look my code.

@zoom78 can you try without your specific css stylesheet?
<link rel="stylesheet" href="\spiralworld_agm_webinar\static\src\css\style.css"/>

@chunsiong.zoom
Thank you for your time i resolve the issue by enabling sharedarraybuffer.
But In meeting i can not add background here i saw only zoom default imgae i can not add new image. If i add new image from zoom account setting it will not add in meeting sdk.
My question is does meeting sdk support adding virtual background?

@zoom78 yes setting virtual background is supported on Meeting SDK for Web
If necessary, please open a new thread for this