The Web Meeting SDK integrates seamlessly into any frontend framework.
Step 1.
To embed Zoom Meetings and Webinars into an Angular project, install the Web Meeting SDK via NPM:
$ npm install @zoomus/websdk --save
Step 2.
Import the Web Meeting SDK at the top of the desired component file:
;
ZoomMtg;
ZoomMtg;
Step 3.
Define the Meeting / Webinar settings and Web Meeting SDK credentials variables:
// setup your signautre endpoint here: https://github.com/zoom/websdk-sample-signature-node.js
signatureEndpoint = ''
apiKey = ''
meetingNumber = ''
role = 0
leaveUrl = 'http://localhost:4200'
userName = 'Angular'
userEmail = ''
passWord = ''
Step 4.
Generate the Web Meeting SDK Signature (API request to Signature Server):
getSignature() {
this.httpClient.post(this.signatureEndpoint, {
meetingNumber: this.meetingNumber,
role: this.role
}).toPromise().then((data: any) => {
if(data.signature) {
console.log(data.signature)
this.startMeeting(data.signature)
} else {
console.log(data)
}
}).catch((error) => {
console.log(error)
})
}
Step 5.
Init and Join the Zoom Meeting / Webinar, pass in the Web Meeting SDK Signature:
startMeeting(signature) {
ZoomMtg.init({
leaveUrl: this.leaveUrl,
isSupportAV: true,
success: (success) => {
console.log(success)
ZoomMtg.join({
signature: signature,
meetingNumber: this.meetingNumber,
userName: this.userName,
apiKey: this.apiKey,
userEmail: this.userEmail,
passWord: this.passWord,
success: (success) => {
console.log(success)
},
error: (error) => {
console.log(error)
}
})
},
error: (error) => {
console.log(error)
}
})
}
Step 6. (IMPORTANT)
Bundle the required files in angular.json:
...
'options': {
...
'assets': [
...
{
'glob': '**/*',
'input': './node_modules/@zoomus/websdk/dist/lib/',
'output': './node_modules/@zoomus/websdk/dist/lib/'
}
],
'styles': [
'node_modules/@zoomus/websdk/dist/css/bootstrap.css',
'node_modules/@zoomus/websdk/dist/css/react-select.css',
...
],
'scripts': [
],
'allowedCommonJsDependencies': [
'@zoomus/websdk'
]
},
...
Step 7.
Serve the project:
$ ng serve --open
Considerations
- By default, the Web Meeting SDK takes over the whole web page once imported. Checkout the sample app for an example of hiding and showing the Web Meeting SDK when desired. This will be improved in a future Web Meeting SDK release. Stay up to date here.
- The Web Meeting SDK ships with default global styles that may conflict with existing styles. To avoid styles being overwritten or conflicted, host the Web Meeting SDK on a separate path or sub domain. Navigate to the location of the Web Meeting SDK for the Meeting / Webinar. Then after the meeting / webinar, navigate back to the main website using the leaveUrl. This will be improved in a future Web Meeting SDK release. Stay up to date here.