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: 77086865400,
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!!!

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