Not able to start meeting using web meeting sdk component view

Hi Zoom team,
I am using web meeting sdk component view in angular project, I am trying to start meeting after scheduling meeting using auth flow process and when I click on start button then a small black area come on the screen for few seconds and then go and I am getting these errors in console.

I am seeing this black screen after clicking on start button.
zoom_black_screen

console_error1

and these are the errors which console is showing

Meeting SDK Code

import ZoomMtgEmbedded from ‘@zoomus/websdk/embedded’;
client = ZoomMtgEmbedded.createClient();
ngOnInit(): void {
let meetingSDKElement = document.getElementById(‘meetingSDKElement’)
if(meetingSDKElement) {
this.client.init({
debug: true,
zoomAppRoot: meetingSDKElement,
language: ‘en-US’
});
}
this.client.join({
sdkKey: SDK_KEY,
signature: signature,
meetingNumber: meetingNo,
password: password,
userName: userName ,
zak: ZAK
})
}

Which Web Meeting SDK version?
2.9.7

Please help me out in fixing issue.
Thank you

Hi @ravinder ,

Are you using the Angular sample app? GitHub - zoom/meetingsdk-angular-sample: Use the Zoom Meeting SDK in an Angular App

For your first error, this should help. Can you address the userName and try again? Share the updated console after fixing.

Hi @gianni.zoom ,

Thanks for the help but in my case userName is not undefined there is a String value name .

When I use https://github.com/zoom/meetingsdk-angular-sample in my browser, I am able to start same meeting created using auth flow process in my app and console is still showing the same errors which I shared before in my project but black screen not coming instead I am able to start and join meeting using github project in my browser.

Thank you

@ravinder Hope you will be fine.

First, you need to upgrade the node package to WebSDK (latest) 2.9.7 then :point_down:

Here are the sessions regarding WebSDK Integrations

1 Like

Hi @freelancer.nak , Hope you are fine.

I am using 2.9.7 version of zoom web meeting sdk component view, so to use that in my project, I need to upgrade other dependencies to the latest version using in angular.json and package.json file?

Thank you

@ravinder Nope try with existing and if any breaking then needs to change that.

@freelancer.nak I am trying with existing versions but when I click on start meeting then a small black screen come for few seconds and immediately go
zoom_black_screen

I am not able to start meeting whether the same meeting can be started when I use in github project in my browser.

@ravinder Do you have watched Angular Session above?

@ravinder Please share the browser console screenshot.

@freelancer.nak I watched https://www.youtube.com/watch?v=utXjISjjHOY but I am using component view in my angular project.


Here is my console error, but I am facing same console errors while running github project also, the only difference is while running github project I am able to start meeting.

@ravinder if you’re able to deploy the sample app and start a meeting, please cross-compare your version to that one to isolate the differences in your code base.

Is the meeting operable? Try to join as another user and see if anything else comes up in the console.

Additionally, can you please paste the console log here so I can easily copy/paste?

Can you please share the code snippet showing the string value is correctly placed in both the sample app and your personal app?

Thanks!

Hi @gianni.zoom ,
I have switched to use client view now, whenever I clik on start button of meeting to start after that this white screen come, I am able to see ‘zmmtg-root’ div element style display as block also and these are the following errors I am receiving in console

This is my code snippet I am using to start and I am using same parameters in sample app from github to start the meeting and able to start meeting but not in my project.

Angular version of my project: 12.2.12

import { HttpClient } from ‘@angular/common/http’;
import { Component, Input, OnInit } from ‘@angular/core’;
import { ZoomMtg } from ‘@zoomus/websdk’;

ZoomMtg.setZoomJSLib(‘https://source.zoom.us/2.9.7/lib’, ‘/av’);
ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();
ZoomMtg.i18n.load(‘en-US’);
ZoomMtg.i18n.reload(‘en-US’);

@Component({
selector: ‘app-zoom-video-meeting’,
templateUrl: ‘./zoom-video-meeting.component.html’,
styleUrls: [‘./zoom-video-meeting.component.scss’]
})
export class ZoomVideoMeetingComponent implements OnInit {
private SDK_KEY = “5iF1ZocFLlP3dkaw7ol45EFnYQQstpQmBnhz”;
signatureEndpoint = ‘https://ingroupsapp.com:5151/zoom/newsignature’;
meetingNo: string = ‘82781454508’;
password: string = ‘Nd*-7W05@*’
zak:‘eyJ0eXAiOiJKV1QiLCJzdiI6IjAwMDAwMSIsInptX3NrbSI6InptX28ybSIsImFsZyI6IkhTMjU2In0.eyJhdWQiOiJjbGllbnRzbSIsInVpZCI6Ik56X0lfTFBjU2UyQkw2cGFhNkZrTXciLCJpc3MiOiJ3ZWIiLCJzayI6IjgyODU1ODczOTY2MDY2NTY2NzIiLCJzdHkiOjEwMCwid2NkIjoidXMwNSIsImNsdCI6MCwiZXhwIjoxNjc0NjUxNzk4LCJpYXQiOjE2NzQ2NDQ1OTgsImFpZCI6InZhRVpGYlFyVHlHUU9QMmE3Y3RyNlEiLCJjaWQiOiIifQ.mR_hrb8Euu-VLuHBw3TXKVTMMarDdqqRoixbgqF8k9U’;
ngOnInit(): void {
this.getSignature();
}
getSignature() {
this.signatureEndpoint = this.signatureEndpoint+‘?zmid=’+this.meetingNo+‘&role=’+1;
this.httpClient.get(this.signatureEndpoint).toPromise().then((data: any) => {
if(data.signature) {
this.joinMeeting(data.signature)
} else {
console.log(data)
}
}).catch((error) => {
console.log(error)
})
}

joinMeeting(signature: any) {
const zoomMeetingSDK = document.getElementById(‘zmmtg-root’);
if(zoomMeetingSDK) {
// To hide
zoomMeetingSDK.style.display = ‘none’;
// To show
zoomMeetingSDK.style.display = ‘block’;
}

  ZoomMtg.init({
    leaveUrl: 'http://localhost:4200',
    success: (success: any) => {
      console.log(success);
      ZoomMtg.join({
        sdkKey: this.SDK_KEY,
        meetingNumber: this.meetingNo,
        passWord: this.password,
        userName: this.userName,
        signature: signature,
        tk: '',
        zak: this.zak,
        success: (success: any) => {
          console.log(success);
        },
        error: (error: any) => {
          console.log(error);
        }
      })
    }
  })

}

}

This is my angular.json file

{
“$schema”: “./node_modules/@angular/cli/lib/config/schema.json”,
“version”: 1,
“newProjectRoot”: “projects”,
“projects”: {
“GrpWeb”: {
“projectType”: “application”,
“schematics”: {
@schematics/angular:component”: {
“style”: “scss”
}
},
“root”: “”,
“sourceRoot”: “src”,
“prefix”: “app”,
“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “dist/GrpWeb”,
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.app.json”,
“aot”: false,
“assets”: [
“src/favicon.ico”,
“src/assets”,
{
“glob”: “/*",
“input”: “./node_modules/pspdfkit/dist/pspdfkit-lib/”,
“output”: “./assets/pspdfkit-lib/”
},
{
“glob”: "
/",
“input”: “./node_modules/@zoomus/websdk/dist/lib/”,
“output”: “./node_modules/@zoomus/websdk/dist/lib/”
}
],
“styles”: [
“node_modules/@zoomus/websdk/dist/css/bootstrap.css”,
“node_modules/@zoomus/websdk/dist/css/react-select.css”,
“src/custom-theme.scss”,
“src/styles.scss”
],
“scripts”: [],
“allowedCommonJsDependencies”: [
@zoomus/websdk”
],
“vendorChunk”: true,
“extractLicenses”: false,
“buildOptimizer”: false,
“sourceMap”: true,
“optimization”: false,
“namedChunks”: true
},
“configurations”: {
“production”: {
“fileReplacements”: [
{
“replace”: “src/environments/environment.ts”,
“with”: “src/environments/environment.prod.ts”
}
],
“outputPath”: “dist/GrpWeb_prod”,
“aot”: true,
“optimization”: true,
“outputHashing”: “all”,
“sourceMap”: false,
“extractLicenses”: true,
“vendorChunk”: false,
“buildOptimizer”: true,
“commonChunk”: true,
“showCircularDependencies”: true,
“progress”: true,
“statsJson”: false,
“budgets”: [
{
“type”: “initial”,
“maximumWarning”: “1mb”,
“maximumError”: “1.5mb”
},
{
“type”: “all”,
“maximumWarning”: “2mb”,
“maximumError”: “20mb”
},
{
“type”: “anyComponentStyle”,
“maximumWarning”: “10kb”,
“maximumError”: “25kb”
}
]
},
“local”: {
“fileReplacements”: [
{
“replace”: “src/environments/environment.ts”,
“with”: “src/environments/environment.local.ts”
}
],
“outputPath”: “dist/GrpWeb_local”,
“aot”: true,
“optimization”: true,
“outputHashing”: “all”,
“sourceMap”: false,
“extractLicenses”: true,
“buildOptimizer”: true,
“commonChunk”: true,
“showCircularDependencies”: true,
“progress”: true,
“statsJson”: false,
“namedChunks”: true,
“inlineStyleLanguage”: “scss”,
“poll”: 2000,
“vendorChunk”: true,
“budgets”: [
{
“type”: “initial”,
“maximumWarning”: “1mb”,
“maximumError”: “1.5mb”
},
{
“type”: “bundle”,
“maximumWarning”: “300kb”,
“maximumError”: “5mb”
},
{
“type”: “all”,
“maximumWarning”: “2mb”,
“maximumError”: “20mb”
},
{
“type”: “anyComponentStyle”,
“maximumWarning”: “13kb”,
“maximumError”: “25kb”
}
]
},
“dev”: {
“outputHashing”: “none”,
“sourceMap”: false,
“namedChunks”: false,
“vendorChunk”: false,
“commonChunk”: false,
“showCircularDependencies”: false,
“progress”: false,
“statsJson”: false
}
},
“defaultConfiguration”: “”
},
“serve”: {
“builder”: “@angular-devkit/build-angular:dev-server”,
“options”: {
“browserTarget”: “GrpWeb:build”,
“hmr”: true,
“liveReload”: true,
“watch”: true,
“aot”: false,
“commonChunk”: false,
“optimization”: false,
“progress”: false,
“sourceMap”: true,
“vendorChunk”: false,
“verbose”: false
},
“configurations”: {
“production”: {
“browserTarget”: “GrpWeb:build:production”
},
“dev”: {
“browserTarget”: “GrpWeb:build:dev”
}
}
},
“extract-i18n”: {
“builder”: “@angular-devkit/build-angular:extract-i18n”,
“options”: {
“browserTarget”: “GrpWeb:build”
}
},
“test”: {
“builder”: “@angular-devkit/build-angular:karma”,
“options”: {
“main”: “src/test.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.spec.json”,
“karmaConfig”: “karma.conf.js”,
“assets”: [
“src/favicon.ico”,
“src/assets”,
{
“glob”: "**/
”,
“input”: “./node_modules/pspdfkit/dist/pspdfkit-lib/”,
“output”: “./assets/pspdfkit-lib/”
}
],
“styles”: [
“./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”,
“src/styles.scss”
],
“scripts”:
}
},
“lint”: {
“builder”: “@angular-eslint/builder:lint”,
“options”: {
“lintFilePatterns”: [
“src//*.ts",
"src/
/*.html”
]
}
},
“e2e”: {
“builder”: “@angular-devkit/build-angular:protractor”,
“options”: {
“protractorConfig”: “e2e/protractor.conf.js”,
“devServerTarget”: “GrpWeb:serve”
},
“configurations”: {
“production”: {
“devServerTarget”: “GrpWeb:serve:production”
}
}
}
}
}
},
“defaultProject”: “GrpWeb”,
“schematics”: {
@schematics/angular:component”: {
“style”: “scss”
}
},
“cli”: {
“analytics”: “de586668-9dfe-43c9-8a60-f50420bbb7b3”,
“defaultCollection”: “@angular-eslint/schematics”
}
}

Thank you

Hi @ravinder , why did you change to client view please?

I asked you test in the following way: Not able to start meeting using web meeting sdk component view - #11 by gianni.zoom

Additionally, please paste as opposed to just sharing a screenshot of console errors as I cannot copy the error text from the screenshot.

Thank you!

Hi @gianni.zoom,

Due to some specific reason I need to migrate to client view . I am happy to tell you that I am able to start and join meeting from my app, there was some UI issues in my app due to which I was not able to see zoom UI, but now its been resolved.
There is one thing which I want to ask you now, is there any way to customize the zoom UI in meeting on web because I don’t want participants to see participants list button in bottom to hide participant list and to desable or enable waiting room, invite button, share button, settings button, chat button, etc.
So please tell me how can I hide buttons in meeting for participants and also how can I enable or desable waiting room.

Thank you

Mainly I need method to hide participant list button, screen share button, show captions button, settings button, desable audio option, more button so that participants other than host not able to see these features.

So please tell me how can I customize UI for participants, or is there any documentation available which can help me in hiding these features.

Thank you