Intergrate reactjs with zoom meeting

hello everyone

this is my first time working with zoom , i have react Js website it an educational website , what i want to do is if user’s want to attend lecture for example next week at specific time i want to an email to be sent for them in the day of the session with zoom link and password , this what am thinking to do but i dont know where and how to start am a front-end developer :slight_smile:

any help please ???

@marwa.y.salih Hope you will be fine.

Please watch the session here about how to integrate Zoom WebSDK using ReactJS?

If still any query feel free to reply/ask here.

Thanks

any documention on how to fill the bulid app fields like redirect url and scopes ??

@marwa.y.salih

Yes Create an OAuth app

Here is about OAuth2.0 Integrations (OAuth apps)

am facing 2 issues when i first start and run the component it says Uncaught runtime errors:

ERROR

The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission. PS am testing in local env “localhost:3000” and when try to join meeting it says signature is not valid !! here is the meeting component code `import React , {useEffect , Fragment} from “react”;

const Meeting=({playload})=>{

useEffect(async ()=>{

const {ZoomMtg}= await import(“@zoomus/websdk”);
ZoomMtg.setZoomJSLib(‘https://source.zoom.us/lib’, ‘av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.generateSDKSignature(
{
meetingNumber:playload.meetingNumber,
role:playload.role,
sdkKey:playload.sdkKey,
sdkSecret:playload.sdkSecret,
success:function(signature)
{
ZoomMtg.init({
leaveUrl:playload.leaveUrl,
success:function(data)
{
ZoomMtg.join({
meetingNumber:playload.meetingNumber,
signature:signature.result,
sdkKey:playload.sdkKey,
userName:playload.userName,
userEmail:playload.userEmail,
passWord:playload.passWord,
tk:‘’,
success:function()
{
console.log(’ --joined–')
},
error:function(error)

    {
        console.log(error)
    }
    })
}

})
},
error:function(error)
{
console.log(error);
}
}
)
} ,);
return();
}

`

here is the playload : let playload={

meetingNumber:‘’, //meeting id
Role:0,
sdkKey:‘‘,
sdkSecret:’
’,
password:‘*****’, // meeting passcode
userName:‘test’,
userEmail:‘’,
leaveUrl:‘http://localhost:3000/meeting
}

@marwa.y.salih

Please don’t share your app secret any where. Keep app secret secret.

Thanks

this is only for testing , i edited it