ReactJS with Zoom WebSDK_Component view_ Integration

Hello!
I would like to display a Zoom component view (web) at the same time as a React component (sidebar, etc.) that I have created. I tried to do this by referring to a Youtube video, which explained that the problem can be solved by writing the following in the css file, but this time the screen went completely blank.

#zmmtg-root {
display: none;
}

If anyone has had a similar problem in the past and knows how to solve it, I would appreciate your advice.
(It would also be helpful if you could show us some sample jsx code, etc.)

Thank you.

import { useEffect } from ‘react’;
import router from ‘next/router’;

const axios=require(‘axios’);
import MeetingStyles from “…/styles/zoom.module.css”;

const Meeting=()=>{

useEffect(()=>{
    return async ()=>
    {
        new Promise(async (resolve, reject)=>{
            const ZoomEmbed=await(await import('@zoomus/websdk/embedded')).default;

            resolve(ZoomEmbed.createClient())
        }).then(async (client)=>{
            let meetingSDKElement=document.getElementById('meetingSDKElement');

            client.init({
                language:'en-US',
                zoomAppRoot:meetingSDKElement,
                customize:{
                    video:{
                        viewSizes:{

                        }
                    },
                    chat:{
                        popper:{
                            placement:'right',
                            height:300,
                            width:300
                        },
                        ribbon:{
                            width:400
                        }
                    }
                }
            });

            let payload=router.query;

            const {data}=await axios({
                url:'/api/Zoom',
                method:'post',
                data:payload
            }).then(response=>{
                return response;
            }).catch(error=>{
                console.log('-- signature axios request error-->', error);
            });
            client.join({
                meetingNumber:payload.meetingNumber,
                signature:data.signature,
                sdkKey:data.sdkKey,
                userName:payload.userName,
                password:payload.password,
                tk:''
            });
        }).catch(error=>{
            console.log('Error inside useEffect -->', error);
        });
    }
});

return (<div className={MeetingStyles.container}>
    <div className={MeetingStyles.meetingSDKElement} id='meetingSDKElement'></div>
    <div className={MeetingStyles.content}>Content</div>
</div>)

}

Meeting.displayName=‘Zoom Component View’;

export default Meeting;

Created by Next.js. I would like to change this to work with react, but if I substitute the import router from ‘next/router’; part with react, I would like to know which module I need to import.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.