# Angularjs integration with Zoom web SDK

**URL:** <https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093>\
**Category:** Web\
**Created:** [May 4, 2020, 10:25pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093 "2020-05-04T22:25:07Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![infinitizon](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/infinitizon/32/7549_2.png) [@infinitizon](https://devforum.zoom.us/u/infinitizon)\
**Post date:** [May 4, 2020, 10:25pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/1 "2020-05-04T22:25:07Z")

</div>

**Description**  
I am trying to integrate the Zoom web sdk in my angularjs project but I’ve been having all sorts of errors.

**Error**

- I can’t click on the"Join with computer audio". Nothing happens when I click on it.
- ! get the error “ _Cannot detect your camera, please check the device and connection and try again._ ” for my video. As seen in screenshot attached, video icon is disabled
- I also get an Invalid URL message along with other errors in the console as seen in the attached below

**Which version?**  
I am using the 1.7.6 version of the SDk.

**To Reproduce(If applicable)**  
Steps to reproduce the behavior:

1. Add the CSS to the HTML as such

> \<link type=“text/css” rel=“stylesheet” href=“[https://source.zoom.us/1.7.6/css/bootstrap.css](https://source.zoom.us/1.7.6/css/bootstrap.css)”/\>  
> \<link type=“text/css” rel=“stylesheet” href=“[https://source.zoom.us/1.7.6/css/react-select.css](https://source.zoom.us/1.7.6/css/react-select.css)”/\>

1. Add the scripts

> 

```
<script src="https://source.zoom.us/1.7.6/lib/vendor/react.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/react-dom.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/redux.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/redux-thunk.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/jquery.min.js"></script>
<script src="https://source.zoom.us/1.7.6/lib/vendor/lodash.min.js"></script>

<script src="https://source.zoom.us/zoom-meeting-1.7.6.min.js"></script>

```

1. Add the angularjs directive

> var myAppModule = angular.module(‘myApp’,);  
> myAppModule.controller(‘zoomController’, function($scope) {  
> }).directive (‘zoom’, function(){  
> return {  
> restrict: ‘A’,  
> link: function(scope, element, attrs) {  
> console.log(‘checkSystemRequirements’);  
> console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));  
> ZoomMtg.preLoadWasm();  
> ZoomMtg.prepareJssdk();  
> const API\_KEY = ‘…’;  
> const API\_SECRET = ‘…’;  
> const meetConfig = {  
> apiKey: API\_KEY,  
> apiSecret: API\_SECRET,  
> meetingNumber: \*\*\*\*\*\*\*\*\*\*\*,  
> userName: ‘infinitizon’,  
> passWord: ‘’,  
> leaveUrl: ‘[https://zoom.us](https://zoom.us)’,  
> role: 0  
> };  
> ZoomMtg.generateSignature({  
> meetingNumber: meetConfig.meetingNumber,  
> apiKey: meetConfig.apiKey,  
> apiSecret: meetConfig.apiSecret,  
> role: meetConfig.role,  
> success(res) {  
> console.log(‘signature’, res.result);  
> ZoomMtg.init({  
> debug: true,  
> leaveUrl: ‘[http://www.zoom.us](http://www.zoom.us)’,  
> showMeetingHeader: true,  
> screenShare: true,  
> disableJoinAudio: false,  
> audioPanelAlwaysOpen: true, //optional  
> isSupportAV: true, //optional,  
> isSupportCC: false, //optional,  
> videoHeader: true, //optional,  
> success() {  
> ZoomMtg.join(  
> {  
> meetingNumber: meetConfig.meetingNumber,  
> userName: meetConfig.userName,  
> signature: res.result,  
> apiKey: meetConfig.apiKey,  
> userEmail: ‘emal@gmail.com’,  
> passWord: meetConfig.passWord,  
> success() {  
> console.log(‘join meeting success’);  
> },  
> error(res) {  
> console.log(res);  
> }  
> }  
> );  
> },  
> error(res) {  
> console.log(res);  
> }  
> });  
> }  
> });  
> }  
> }  
> });

1. Add directive to HTML

> \<div id=“zmmtg-root” zoom\>\</div\>

**Screenshots**

 ![screenshot](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/3/3a1c4de584a2e8262392478da43cc37f0fa35c0f.png)

**Smartphone (please complete the following information):**

- I’m testing on Google Chrome Version 81.0.4044.129 (Official Build) (64-bit)

HELP!!!

\*This post has been edited to remove any meeting / webinar IDs

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 6, 2020, 8:42pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/2 "2020-05-06T20:42:21Z")

</div>

Hey @infinitizon,

The issue is you are not serving your site over `https`.

Please try using `https` and let me know if that works. 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![infinitizon](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/infinitizon/32/7549_2.png) [@infinitizon](https://devforum.zoom.us/u/infinitizon)\
**Post date:** [May 7, 2020, 9:40am UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/3 "2020-05-07T09:40:53Z")

</div>

Thanks Tommy,

I was about to reply also that I discovered indeed that it should have been https instead of http.

So, I noticed that I was getting the error when I was running the test on my local machine using a subdomain on xampp serve like so: , but when I changed it to [http://127.0.0.1](http://127.0.0.1), it went well. That was when I discovered the problem was with the domain.

So, yes, I eventually moved it to a production environment where I had https and saw it went well.

Thanks again Tommy.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [May 12, 2020, 8:16pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/4 "2020-05-12T20:16:22Z")

</div>

Happy to hear you got it working! 🙂

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![rackermann](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rackermann/32/12903_2.png) [@rackermann](https://devforum.zoom.us/u/rackermann)\
**Post date:** [August 17, 2020, 3:55pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/5 "2020-08-17T15:55:04Z")

</div>

Hi ,

I’m trying to integrate zoom with an older angularjs app.

1 - I imported the required scripts

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/0/065fcd3ac92e4da2cfd374bc38aa60c5f7da8139.png)

2 - I created a new directive

module app.testing {

```
class ZoomCall implements ng.IDirective {
   
    constructor(private $timeout: ng.ITimeoutService) {
        ZoomCall.prototype.link = (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes): void => {

            var ZoomMtg: any;
            alert("checkSystemRequirements");
            console.log("checkSystemRequirements");
            console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));
        }
    }

    link: (scope: ng.IScope, element: ng.IAugmentedJQuery, attrs: ng.IAttributes) => void;
    restrict: string = "E";
    templateUrl: string = SitePrefix + '/AngularTemplates/ZoomCall.html'; //this is just a div

    static Factory(): ng.IDirectiveFactory {
        var directive = ($timeout: ng.ITimeoutService) => {
            return new ZoomCall($timeout);
        }
        directive.$inject = ['$timeout'];

        return directive;
    }
}

angular.module('app.testing').directive("zoomCall", ZoomCall.Factory());

```

}

Unfortunatelly i’m getting this error

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/8/806b9bea9636d71b492492c853123611dd77224e.png)

Any idea what i can do to make this work?

Thank you.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 19, 2020, 3:29am UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/6 "2020-08-19T03:29:36Z")

</div>

Hey @rackermann,

Can you please share your Web SDK init and join code snippet?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![rackermann](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rackermann/32/12903_2.png) [@rackermann](https://devforum.zoom.us/u/rackermann)\
**Post date:** [August 19, 2020, 10:33am UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/7 "2020-08-19T10:33:48Z")

</div>

Hi @tommy,

Thanks for replying. I’m using the same code snippet that it is working just fine in the angular 8 sample app [https://github.com/zoom/websdk-sample-angular](https://github.com/zoom/websdk-sample-angular)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/zoomdeveloper/original/2X/9/97c49a354384c60b71e40717d61dbdcf2ae5d035.png)

But i don’t think the library is loading properly in the angular js app and i can’t find the reason why.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 19, 2020, 10:07pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/8 "2020-08-19T22:07:43Z")

</div>

Hey @rackermann,

The issue is because you have left out the required `leaveUrl` property in the init function.

[https://zoom.github.io/sample-app-web/ZoomMtg.html#init](https://zoom.github.io/sample-app-web/ZoomMtg.html#init)

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![rackermann](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rackermann/32/12903_2.png) [@rackermann](https://devforum.zoom.us/u/rackermann)\
**Post date:** [August 20, 2020, 4:27am UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/9 "2020-08-20T04:27:25Z")

</div>

Hi @tommy,

I tried this too but i’m getting the same error.

"  
…  
ZoomMtg.init({  
leaveUrl: ‘[http://www.zoom.us](http://www.zoom.us)’,  
isSupportAV: true,  
success: (success) =\> {  
console.log(success);  
…"

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [August 20, 2020, 5:22pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/10 "2020-08-20T17:22:38Z")

</div>

Hey @rackermann,

Can you share your github repo or a sample github repo with the issue so I can debug locally?

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![rackermann](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/rackermann/32/12903_2.png) [@rackermann](https://devforum.zoom.us/u/rackermann)\
**Post date:** [September 4, 2020, 6:09am UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/11 "2020-09-04T06:09:25Z")

</div>

Hi @tommy,

Sorry for replying so late. Is there any way to privately share the code?

Thank you.

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [September 8, 2020, 10:53pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/12 "2020-09-08T22:53:45Z")

</div>

Hey @rackermann,

Yes, please email it with instructions on how to run it, and a link to this thread to [developersupport@zoom.us](mailto:developersupport@zoom.us).

Thanks,  
Tommy

---

<div class="post-metadata">

**Author:** ![juananmp](https://avatars.discourse-cdn.com/v4/letter/j/9de053/32.png) [@juananmp](https://devforum.zoom.us/u/juananmp)\
**Post date:** [September 29, 2020, 1:32pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/13 "2020-09-29T13:32:23Z")

</div>

Hi, I’m trying to integrate in angular 10. I have no compilations error but whe i try to join can’t connect.  
(upload://jCAMpApQr5IObvRCvWJJeumI5ie.jpeg)

---

<div class="post-metadata">

**Author:** ![tommy](https://sea2.discourse-cdn.com/flex016/user_avatar/devforum.zoom.us/tommy/32/72769_2.png) [@tommy](https://devforum.zoom.us/u/tommy)\
**Post date:** [October 1, 2020, 6:25pm UTC](https://devforum.zoom.us/t/angularjs-integration-with-zoom-web-sdk/16093/14 "2020-10-01T18:25:58Z")

</div>

Hey @juananmp,

Please create a new topic: #web-sdk and fill out the post template so we can assist! 🙂

Thanks,  
Tommy