Angularjs integration with Zoom web SDK

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”/>
<link type=“text/css” rel=“stylesheet” href=“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: ‘8ePWKv’,
leaveUrl: ‘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’,
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

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

Hey @infinitizon,

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

Please try using https and let me know if that works. :slight_smile:

Thanks,
Tommy

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: http://school.edugate.loc, but when I changed it to 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.

1 Like

Happy to hear you got it working! :slight_smile:

Thanks,
Tommy

Hi ,

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

1 - I imported the required scripts

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

Any idea what i can do to make this work?

Thank you.

Hey @rackermann,

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

Thanks,
Tommy

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

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

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

Thanks,
Tommy

Hi @tommy,

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

"

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

Hey @rackermann,

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

Thanks,
Tommy

Hi @tommy,

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

Thank you.

Hey @rackermann,

Yes, please email it with instructions on how to run it, and a link to this thread to developersupport@zoom.us.

Thanks,
Tommy

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)

Hey @juananmp,

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

Thanks,
Tommy