Customize Embedded Zoom Meeting SDK with Component View in 2.2.0

Question

When working with Embedded Zoom Component, the Zoom SDK return an element which you need to place it inside an html element the problem is how to resize and position the returned component inside my code after rendering

const client = ZoomMtgEmbedded.createClient();


function getSignature(e) {
    e.preventDefault();
    // ... some code to get the signature
    startMeetingZoomMtgEmbedded(response.signature);
}

function startMeetingZoomMtgEmbedded(signature) {
    let meetingSDKElement = document.getElementById('meetingSDKElement');

    client.init({
        debug: true,
        zoomAppRoot: meetingSDKElement,
        language: 'en-US',
        customize: {
            meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
            toolbar: {
                buttons: [
                    {
                        text: 'Custom Button',
                        className: 'CustomButton',
                        onClick: () => {
                            console.log('custom button');
                        }
                    }
                ]
            }
        }
    });

    client.join({
        apiKey: apiKey,
        signature: signature,
        meetingNumber: meetingNumber,
        password: passWord,
        userName: userName,
        userEmail: userEmail,
        tk: registrantToken,
        success: (success) => {
            console.log('success');
        },
        error: (error) => {
            console.log(error);
        }
    });
}

return (
    <div className="App">
        <main>
            <h1>Zoom Meeting SDK Sample React</h1>
            {/* For Component View */}
            <div id="meetingSDKElement"></div>
            <button onClick={getSignature}>Join Meeting</button>
        </main>
    </div>
);

So my question is how to modify the style and the position of the component before or after the rendering of the code by the Zoom SDK.

I'm facing the same problem. In the forum someone ask the same question, but no direct answer: https://devforum.zoom.us/t/resize-embedded-zoom-with-component-view-in-2-0-1/59566/9 — Marcos Mendes, Mar 01 '22 at 19:47

score 1 · Answer 1 · answered May 27 '22 at 06:37

1

For Resizing , You will find details in the following documentation link : Zoom Documentation for resizing component view

For Positioning, You will find details in the following documentation link : Zoom Documentation for positioning component view

answered May 27 '22 at 06:37

Khaled Awad

11
2

Examples would be better then links. They can break after a while and this answer will be useless then. – geertjanknapen May 27 '22 at 10:23
While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/31876152) – MD. RAKIB HASAN Jun 02 '22 at 05:11
I appreciate the links none the less – Jonathan Aug 05 '22 at 10:13

score 0 · Answer 2 · answered Mar 01 '22 at 20:23

The only way to resize camera view is editing #ZOOM_WEB_SDK_SELF_VIDEO id. So, you have to edit other classes also to make buttons, containers and etc resize like camera view does, but it is totally buggy and i don't think it is a good idea pay all this effort to a workaround, besides that, in next versions maybe they bring built in properties to do this job.

Just for example, this is the result when you change #ZOOM_WEB_SDK_SELF_VIDEO:

#ZOOM_WEB_SDK_SELF_VIDEO {
    width: 720%;
    height: 480%;
}

score 0 · Answer 3 · answered Sep 12 '22 at 17:30

In general way, you can modify the style and position of your component by using reactive CSS styling.
In zoom way you can use (zoom web meeting SDK)
(a) "popper: {}" properties for positioning elements
(b) "viewSizes: {}" properties for default meeting canvas size
(c) for styling use "id" and "class" for reactive CSS styling


popper use:
    client.init({
      ...
      customize: {
        video: {
          popper: {
            anchorElement: meetingSDKElement,
            placement: 'top'
          }
        },
      }
      ...
    })

viewSizes use:
    client.init({
      ...
      customize: {
        video: {
          viewSizes: {
            default: {
                width: 1000,
                height: 600,
            }
          }
        },
      }
      ...
    })

Customize Embedded Zoom Meeting SDK with Component View in 2.2.0

3 Answers3