Getting black screen with no errors on integrating with angular application

I have created a simple angular application with zoom integrated with it, it is working fine so, I integrated it with the actual angular application. It is now showing a black screen on the login page itself but has no errors. I have updated the version of the browser.

I am using 1.8.0 version

this is my signature

b3kwQkZlMmdTWGFkdkVZakJta1lmdy40NTgzMDIxNDgwLjE1OTg1NDMyMjI1NjQuMS5HV0xpNmpUZnFodytsUkpNVlZqWGFkeUhEc3c0eUdNQkRpYzNqNVdrTkZVPQ

Following are my code snippets

Hey @ragipallyalekya3,

Your signature looks correct. Can you share your full component file with the Web SDK code?

Have you compared your code with the Angular Web SDK sample app?

Thanks,
Tommy

@tommy
Following is my component file

import { Component, OnInit, Inject } from ‘@angular/core’;

import { AngularAgoraRtcService, Stream } from ‘angular-agora-rtc’;

import { ToastrService } from ‘ngx-toastr’;

import { HttpClient } from ‘@angular/common/http’;

import { DOCUMENT } from ‘@angular/common’;

import { ZoomMtg } from ‘@zoomus/websdk’;

ZoomMtg.preLoadWasm();

ZoomMtg.prepareJssdk();

@Component({

selector: ‘app-teacher-live-class’,

templateUrl: ‘./teacher-live-class.component.html’,

styleUrls: [’./teacher-live-class.component.css’]

})

export class TeacherLiveClassComponent implements OnInit {

channelName: string;

localStream: Stream;

remoteCalls: any = ;

showImage: boolean = true;

showStopBtn = false;

spinnerFlag: boolean;

signatureEndpoint = ‘https://api.onwardlearn.in/live/signature

apiKey = ‘’

meetingNumber =

role = 1

leaveUrl = ‘http://localhost:4201

userName = ‘Daily Standup Meeting’

userEmail = ‘’

passWord = ‘’

signature: any;

constructor(

private toaster: ToastrService,

public httpClient: HttpClient, 

@Inject(DOCUMENT) document

) {

}

ngOnInit() {

this.showImage = true;

this.getSignature();

}

goLive(){

console.log("Signature = "+this.signature)

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

ZoomMtg.init({

  leaveUrl: this.leaveUrl,

  isSupportAV: true,

  success: (success) => {

    console.log(success)

    ZoomMtg.join({

      signature: this.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)

      }

    })

  },

  error: (error) => {

    console.log(error)

  }

})

}

getSignature() {

//alert("Entered")

this.signature = ZoomMtg.generateSignature({

  meetingNumber: this.meetingNumber,

  apiKey: this.apiKey,

  apiSecret: '',

  role: 1,

  success: function(res){

  console.log(res.result);

  }

  });

}
}

And yes I have compared the code, everything’s similar

The difference what I found is

from separate project (in which it is working fine)

from integrated project

As you can see, in the integrated projected it is loading from 5628_audio.encode.wasm
where as in separate application it is loading from just audio.encode.wasm

Is it any issue?

Also I have this component inside login page, why is it getting loaded on the login page?

@tommy I have found one difference in the components tab

Working example Image

Non-working example

Is it any issue?

Hey @ragipallyalekya3,

Can you share a sample github repo with the issue so I can help debug?

Also checkout this thread, let me know if it helps:

Thanks,
Tommy

@tommy
I have tried the example you have provided it didn’t work. Below is the link to sample Github repo,

Hey @ragipallyalekya3,

There were a few things wrong with your implementation.

  1. You were not calling the startMeeting function.
  2. You had some scoping issues with your variables.

Please try using the following code for your login.component.ts file:

import { Component, OnInit, OnDestroy } from "@angular/core";
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppService } from '../app.service';
import { error } from 'util';
import { Observable, Subscription } from 'rxjs';
import { AuthResponseData } from '../models/auth.model';
import { Router } from '@angular/router';

import { ZoomMtg } from '@zoomus/websdk';

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html'
})
export class LoginComponent implements OnInit {

    isLogInMode: boolean = true;
    isLoading = false;
    errorMsg: string;
    loginForm: FormGroup;

    apiKey = ''
    meetingNumber = 123456789
    role = 1
    leaveUrl = 'http://localhost:4202'
    userName = 'Daily Standup Meeting'
    userEmail = ''
    passWord = ''
    signature: any;

    constructor(
        private fb: FormBuilder,
        private appService: AppService,
        private router: Router) {
        this.loginForm = fb.group({
            'email': ['', [Validators.required, Validators.email]],
            'password': ['', [Validators.required, Validators.minLength(8)]]
        })
    }

    ngOnInit() {
        this.getSignature();
    }

    getSignature() {
        this.signature = ZoomMtg.generateSignature({
            meetingNumber: this.meetingNumber,
            apiKey: this.apiKey,
            apiSecret: '',
            role: 1,
            success: (res) => {
                console.log(res.result);
                this.startMeeting(res.result)
            }
        });

    }


    startMeeting(signature) {
        console.log("Signature = " + signature)
        document.getElementById('zmmtg-root').style.display = 'block'

        ZoomMtg.init({
            leaveUrl: this.leaveUrl,
            isSupportAV: true,
            success: (success) => {
                console.log(success)

                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)
                    }
                })

            },
            error: (error) => {
                console.log(error)
            }
        })
    }

    onSwitchLogin() {
        this.isLogInMode = !this.isLogInMode;
    }

    onsubmit() {
        if (!this.loginForm.valid) {
            return;
        }
        let email = this.loginForm.value.email;
        let password = this.loginForm.value.password;

        this.isLoading = true;

        let loginObservable: Observable<AuthResponseData>;

        if (this.isLogInMode) {
            loginObservable = this.appService.signIn(email, password);
        } else {
            loginObservable = this.appService.signUp(email, password);
        }
        loginObservable.subscribe(res => {
            console.log(res);
            this.isLoading = false;
            this.router.navigate(['/recipes']);
        },
            errorMsg => {
                this.isLoading = false;
                this.errorMsg = errorMsg;
                console.log(this.errorMsg)
            }
        )
        this.loginForm.reset();
    }

}

Notice I have removed all the sensitive info like the API credentials and meeting number, so please replace with yours when testing locally.

Please delete or set that github repo to private since it included your credentials.

Let me know if the update code works! :slight_smile:

Thanks,
Tommy

@tommy yeah this has worked for me, but now when I am trying to do the exact same thing with the original project, it isn’t working. I will mail you the Github link to the original project.

Thank you.

@tommy below is the link to Github, we have already given you access, the code is in teacher-live.component.ts file
https://github.com/archit1496/VamSchool/tree/trunk

Hey @ragipallyalekya3,

Is there a new issue? What exactly is not working?

Can you please provide instructions in the readme to login and reproduce the issue?

Thanks,
Tommy

@tommy I am having the same problem, black screen with no errors. I have used exactly what you’ve said but with the actual application we are facing the same problem

Hey @ragipallyalekya3,

Gotcha. If you can provide steps to login to your app and how to start the Zoom Web SDK piece that would be helpful. :slight_smile:

Thanks,
Tommy

We aren’t able to login also, we can see a black screen in the login page itself, the component where we have zoom code is teacher-live.component

P.S: The code is in trunk branch, and the credentials are ak.das@gmail.com, pwd- admin. I tried having zoom code in login page, it’s working fine on page load, but if assign it to a button we can see black screen only, why is this happening? Zoom Websdk it should load on request but it is loading on the very first page of the application.

When you login there will be live class tab that is the page

Thanks @ragipallyalekya3,

I will take a look and let you know what I find.

-Tommy

Hey @ragipallyalekya3,

To fix your issue, I have hid the Web SDK by default like in the Sample App. Add the following code to your styles.css file:

#zmmtg-root {
  display: none;
}

Here is the example in the Angular Sample App:

And then once you want to display the Web SDK, set the display to block:

Let me know if that helps! :slight_smile:

Thanks,
Tommy