Black screen when trying to join meeting

Description
I am trying to implement zoom web sdk (tried with 1.8.3 as well as 1.8.1) but when I try to join then the screen becomes black and I cant find any error in console nor do I see anything on the screen.

Error
I am trying to join zoom meeting using zoom web sdk on angular. But while joining I only see a black screen and cant find any error in console except one warning “DevTools failed to load SourceMap: Could not load content for https://source.zoom.us/1.8.1/lib/webim.min.js.map: HTTP error: status code 403, net::ERR_HTTP_RESPONSE_CODE_FAILURE”

This is present in my other project too but there the meeting works fine (though it is admin panel so I pass role 1 there). On further investigation I put some logs in init success just before I can ZoomMtg.join() but I dont see that log as well so my guess is init() is not working. Please help.

Which version?
1.8.1 and 1.8.3

To Reproduce(If applicable)
Steps to reproduce the behavior:
I have no idea on this.

Screenshots

Device (please complete the following information):

  • Device :laptop
  • OS: windows
  • Browser: Chrome

Additional context
Below is the code
in zoom component

ZoomMtg.setZoomJSLib(‘https://source.zoom.us/1.8.3/lib’, ‘/av’);

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

@Component({

selector: ‘app-zoom’,

templateUrl: ‘./zoom-class.component.html’,

styleUrls: [’./zoom-class.component.css’],

})

export class ZoomComponent implements OnInit {

currentClassroom;

constructor(

// public liveclassService: LiveClassService,

public httpClient: HttpClient,public zoomService:ZoomClassService

) {}

ngOnInit(): void {
document.getElementById(‘zmmtg-root’).style.display =“none”;

this.zoomService.getClassroom().subscribe((classroomData)=>{

console.log("classroom",classroomData);

/*this.currentClassroom = this.liveclassService.getCurrentClassroom();*/

    this.currentClassroom=classroomData[0];

this.currentClassroom.signature = ZoomMtg.generateSignature({

  meetingNumber: this.currentClassroom.meetingNumber,

  apiKey: this.currentClassroom.apiKey,

  apiSecret: this.currentClassroom.apiSecret,

  role: "0",

  success: function (res) {

    console.log("signature",res);

  },

});

this.startMeeting();

startMeeting() {

document.getElementById('zmmtg-root').style.display = 'block';

ZoomMtg.init({

  debug: true,

  leaveUrl: "https://localhost:4200",

  isSupportAV: true,

  success: (success) => {

    console.log("sucess",success);

    ZoomMtg.join({

      signature: this.currentClassroom.signature,

      meetingNumber: this.currentClassroom.meetingNumber,

      userName: this.currentClassroom.userName,

      apiKey: this.currentClassroom.apiKey,

      userEmail: this.currentClassroom.userEmail,

      passWord: this.currentClassroom.passWord,

      success: (success) => {

        ZoomMtg.showRecordFunction({

          show: true,

        });

      },

      error: (error) => {

        console.log(error);

      },

    });

  },

  error: (error) => {

    console.log("error",error);

  },

});

console.log("after init");

}

Hey @aamirjsiddiqui,

Thanks for reporting this. Do you by chance have a screenshot you could share? This will help us confirm the issue.

Thanks,
Tommy

hi @tommy I am also facing the same issue while integrating in angular

hi @tommy i am getting the same issue i am attaching the screenshot.please help me with this.

Hey @princebala19,

What version of the Web SDK are you using? Can you please provide steps to reproduce the issue?

Thanks,
Tommy

Hi @tommy I am using 1.8.3 web sdk version.Black screen is coming when i try to join meeting but i could able to see the admit message for the user name trying to join in main meeting id (host).exact same issue @aamirjsiddiqui has posted

Hey @princebala19,

Can you please share your ZoomMtg.join object like @aamirjsiddiqui, has? This will help us debug the issue:

Thanks,
Tommy

1 Like

hi @tommy ZoomMtg.join({
signature: signature,
meetingNumber: this.meetingNumber,
userName: this.userName,
apiKey: this.apiKey,
userEmail: this.userEmail,
passWord: this.passWord,
success: (success) => {
console.log(success)
},
error: (error) => {
console.log(error)
}
})

  }

the above black screen is not coming only below participant and all other details are coming.but that is also not clickable

Hey @princebala19,

It looks like you are using the Angular Web SDK Sample App. Can you check the browser logs to see if there are any errors once you click the “Join Meeting” button?

Thanks,
Tommy

Hey @princebala19,

Let’s debug this over a Zoom meeting together. I will send you the details.

Thanks,
Tommy

sure thanks for this

1 Like

You are welcome! :slight_smile:

Thanks,
Tommy

can you let me know your available time,so i will be available to join the meeting.clients are much interested in this zoom to deliver soon.

Hey @princebala19,

Thank you for the update. I think @tommy directly messaged you a link to schedule a time when he is available. Please check your direct messages and let us know if you have any issues scheduling a time.

Thanks,
Max

Hi @tommy, any update on this?
@princebala19 were you able to solve the issue

I am able to resolve

Can you help me out, what solved the issue for you