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:
- 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”/>
- 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>
- 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’,
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);
}
});
}
});
}
}
});
- 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
