Video SDK UI Toolkit - Angular (Web) Unable to Load / Join Session

Video SDK
1

I am trying to integrate Video SDK UI Toolkit v 1.12.1-1 in my project but it failed to load Video Components displaying error shown below when calling function

uitoolkit.joinSession(this.sessionContainer, this.videoConfig)

app.component.ts:84 TypeError: Cannot read properties of undefined (reading ‘deviceId’)
at videosdk-ui-toolkit.js:3:784163
at _ZoneDelegate.invoke (zone.js:369:28)
at Object.onInvoke (videosdk-ui-toolkit.js:3:45153)
at _ZoneDelegate.invoke (zone.js:368:34)
at _ZoneImpl.run (zone.js:111:43)
at zone.js:2538:40
at _ZoneDelegate.invokeTask (zone.js:402:33)
at Object.onInvokeTask (videosdk-ui-toolkit.js:3:44969)
at _ZoneDelegate.invokeTask (zone.js:401:38)
at _ZoneImpl.runTask (zone.js:159:47)
(anonymous) @ videosdk-ui-toolkit.js:3
invoke @ zone.js:369
onInvoke @ videosdk-ui-toolkit.js:3
invoke @ zone.js:368
run @ zone.js:111

Here is my sample code

Configuration object

videoConfig: any = {
    videoSDKJWT: '',
    sessionName: 'SessionA',
    userName: 'UserA',
    sessionPasscode: 'abc123',
    features: ['preview', 'video', 'audio', 'share', 'chat', 'users', 'settings']
  }

// Signature Generator

 const iat = abc.KJUR.jws.IntDate.get('now'); // Math.floor(Date.now() / 1000)
 const exp = iat + 3600
 const header = {alg: 'HS256', typ: 'JWT'};
 const oPayload = {
      appKey: this.sdkKey,
      tpc: this.videoConfig.sessionName,
      session_key: this.videoConfig.sessionPasscode,
      version: 1,
      role_type: 1,
      iat: iat,
      exp: exp,
 }
 const signature = abc.KJUR.jws.JWS.sign('HS256', JSON.stringify(header), JSON.stringify(oPayload), this.sdkSecret);
    
 this.videoConfig.videoSDKJWT = signature

Code that I executed while joining session

 this.sessionContainer = document.getElementById('sessionContainer')
   uitoolkit.joinSession(this.sessionContainer, this.videoConfig)

I also tried the following code but displaying blank screen, no error nothing shown

this.sessionContainer = document.getElementById('sessionContainer')
        var chatContainer = document.getElementById('chatContainer')
        var videoContainer = document.getElementById('videoContainer')
        var controlsContainer = document.getElementById('controlsContainer')

        uitoolkit.showUitoolkitComponents(this.sessionContainer, this.videoConfig)
        uitoolkit.showChatComponent(chatContainer)
        uitoolkit.showVideoComponent(videoContainer)
        uitoolkit.showControlsComponent(controlsContainer)

Can someone help where I am making mistake.

2

Now trying to utilize videosdk code to check, when tried with the following generated signature

the following error arise

type: ‘JOIN_MEETING_FAILED’,
reason: ‘This account does not exist or does not belong to you’

Note: i am using proper zoom developer account with Video SDK enabled

Video SDK | Pay As You Go
Renews on October 12, 2024
0 of 10,000 minutes (0% used)

Please help where i am making mistake

3

Hi @irfan.nettech,

I edited your question & removed the JWT to make sure no PII was shown publicly. To make sure the issue is not with your credentials, please input them into the sample application and let me know if you see the same error, or if it runs smoothly.

Thanks,Rehema

4

Hi,

The issue of

type: ‘JOIN_MEETING_FAILED’,
reason: ‘This account does not exist or does not belong to you’

Resolved, by fixing the payload parameter from appkey to app_key

Now getting the following error

Verify JWT Failed: The Token’s Signature resulted invalid when verified using the Algorithm: HmacSHA256

I am using the following code to generate Signature,

const iat = Math.round(new Date().getTime() / 1000) - 30 
const exp = iat + 60 * 60 * 2
const header = {
      alg: 'HS256', type: 'JWT'
 };
const oPayload = {
     app_key: this.sdkKey,
     tpc: this.videoConfig.sessionName,
     password: this.videoConfig.sessionPasscode,
     role_type: 1,
     session_key: "session123",
     user_identity: "user123",
     version: 1,
     iat: iat,
     exp: exp
  }
 const sHeader = JSON.stringify(header)
 const sPayload = JSON.stringify(oPayload)
 const signature = abc.KJUR.jws.JWS.sign('HS256', sHeader, sPayload, this.sdkSecret);

client.init('en-US', 'Global', { patchJsMedia: true }).then(() => {
      client
          .join(this.videoConfig.sessionName, signature , this.videoConfig.userName, this.videoConfig.sessionPasscode)
          .then(() => {
              console.log('joined')
              stream = client.getMediaStream()
          })
      })

Now sure where I am making mistake. i tried too many variation but signature validation return failed.

5

Thank you, your sample code with minor adjustments in server-side signature generator code worked.