Query for Web SDK Integration with Angular 7

Hi @tommy,
Please check my attached screenshot and using iframe code.

Thanks,
Gourav Pal

Hey @gourav,

Please share your iFrame code so I can debug.

I believe the issue is you have success in front of your iFrame url like https://success.zoom.us. If so remove the success sub domain and make sure your url looks like this:

https://zoom.us/wc/meetindId/join?prefer=1&un=asdf

Thanks,
Tommy

Hi @tommy,
I am not able to join meeting useing role = 0 in meetConfig, always receiving fail pop up on screen. In browser console receiving “The meeting id is wrong”.
Please suggest.
Thanks
Gourav Pal

Hi @gourav,

What is the meeting ID? Since it’s 0, that means that you are the attendee, is the meeting already started or have join before host enabled?

Thanks

1 Like

Hi gourav, I am new to Angular , I would be grateful if you could provide me your sample source code . I am looking to integrate my angular web application with zoom,
thanks

Hey @digsoftech9,

Checkout my post on how to use the Zoom Web SDK with Angular:

Thanks,
Tommy

Hi @tommy ,
When i am using “npm i jQuery@npm:jquery” on local environment, its working fine. But when i build the same on dev environment always getting below error and my build is failed
npm ERR! Invalid dependency type requested: alias
npm ERR! Unsupported URL Type “npm:”: npm:jquery@^3.4.1
Please suggest.

Hey @gourav,

What version of NPM are you using?

Thanks,
Tommy

Hi @tommy,
After updating npm version on dev server jQuery error is resolved. But when we call meeting page url in browser and getting below error on browser console.
ERROR Error: Uncaught (in promise): TypeError: Super expression must either be null or a function, not undefined
TypeError: Super expression must either be null or a function, not undefined

Please suggest.

Hey @gourav,

Check out this answer on stackoverflow, sounds like a react version issue:

Thanks,
Tommy

Hi @tommy,
I have implemented zoom web client SDK with angular, not using in react. I think react is using in your library. But error occurred on local/dev apache server.

Steps:

  1. Creating project ng build --prod.
  2. Move dist file on an local apache server.
  3. Run project normally on browser using localhost and getting below error on browser console.

Please suggest as soon as possible.

Hey @gourav,

Can you please share your package.json file.

Also we are working to have the jQuery issue fixed in one of our upcoming releases. (JIRA: DEVELOPERS-569)

Thanks,
Tommy

Hi @tommy,
I’m not able attach package.json file. Please check below my package.json content.

{
“name”: “test”,
“version”: “0.0.0”,
“scripts”: {
“ng”: “ng”,
“start”: “ng serve”,
“build”: “ng build”,
“test”: “ng test”,
“lint”: “ng lint”,
“e2e”: “ng e2e”
},
“private”: true,
“dependencies”: {
@angular/animations”: “^7.2.6”,
@angular/cdk”: “^6.4.7”,
@angular/common”: “^7.2.7”,
@angular/compiler”: “^7.2.6”,
@angular/core”: “^7.2.6”,
@angular/forms”: “^7.2.6”,
@angular/platform-browser”: “^7.2.6”,
@angular/platform-browser-dynamic”: “^7.2.6”,
@angular/router”: “^7.2.6”,
@fortawesome/fontawesome-free”: “^5.7.2”,
@ng-bootstrap/ng-bootstrap”: “^4.0.4”,
“angular-modal-gallery”: “^5.7.1”,
“annyang”: “^2.6.1”,
“blueimp-canvas-to-blob”: “^3.14.0”,
“bootstrap”: “^4.3.1”,
“core-js”: “^2.5.4”,
“fuse.js”: “^3.4.5”,
“jQuery”: “npm:jquery@^3.4.1”,
“js-sha512”: “^0.8.0”,
“moment”: “^2.24.0”,
“ng-http-loader”: “^5.0.1”,
“ng-pick-datetime”: “^7.0.0”,
“ng2-img-max”: “^2.1.18”,
“ngx-barcodeput”: “^1.0.7”,
“ngx-bootstrap”: “^5.1.0”,
“ngx-crystal-gallery”: “^1.1.5”,
“ngx-device-detector”: “^1.3.5”,
“ngx-speech”: “0.0.8”,
“ngx-swiper-wrapper”: “^8.0.1”,
“recordrtc”: “^5.5.8”,
“rxjs”: “~6.3.3”,
“speech-synth”: “^1.0.1”,
“tslib”: “^1.9.0”,
“video.js”: “^7.5.4”,
“zone.js”: “~0.8.26”,
“zoomus-jssdk”: “^1.6.1”
},
“devDependencies”: {
@angular-devkit/build-angular”: “^0.13.2”,
@angular/cli”: “^7.3.2”,
@angular/compiler-cli”: “^7.2.6”,
@angular/language-service”: “^7.2.6”,
@types/jasmine”: “~2.8.8”,
@types/jasminewd2”: “~2.0.3”,
@types/node”: “~8.9.4”,
“codelyzer”: “~4.5.0”,
“jasmine-core”: “~2.99.1”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~3.1.1”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “^2.0.5”,
“karma-jasmine”: “~1.1.2”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.4.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.11.0”,
“typescript”: “~3.2.2”
}
}

Thanks for posting this @gourav,

Can you send me the link to your app on github so I can clone it and test it on my machine?

Thanks,
Tommy

Hi @tommy,
Below is my github app link.
Zoom Angular Remote Access

Thanks,
Gourav

Hey @gourav,

Thanks for posting your code! :slight_smile:

Good news! I got it to work! I think the issue was you were importing the Web SDK via the CDN version 1.6.0 and Local version 1.6.1 methods. I have changed your code to only use the CDN method on version 1.6.1 (although if you want to use the local method (NPM), feel free to change my code)

Here is the link to the updated code:

I have also made a pull request to the repo you shared:

Thanks,
Tommy

@tommy,
Thanks for posting your code!:+1:
It’s working on my https url. I’m able start meeting and join meeting. But i am not able to remote control access.
Please share steps, if you able.

Thanks,

Hey @gourav, happy to hear it is working! :slight_smile:

Please provide more info on what is going wrong with remote control access.

What device are you using and trying to control? Are their errors?

Thanks,
Tommy

Hi @tommy,
Simple i’m start and join meeting on chrome browser on desktop. Meeting is started, but there is no option for request remote control/remote control.

Thanks,
Gourav

Hey @gourav,

I just tested and it worked.

Make sure the user who’s computer you want to control is sharing their screen.

Here are the steps:

Thanks,
Tommy