Video SDK UI Toolkit Web - UIKit: [Object Object] error on join

Video SDK
1

Hello Zoom Team & Developer forum members,

Video SDK UI Toolkit Web Version 1.12.1-1

Description
Everything was working all good till last Friday and today suddenly started getting an error “UIKit: [Object Object]” error when user is joining the video call from web. Error is in all browsers Chrome/Safari/Mozilla

Error :
UIKit: [Object Object]

Troubleshooting Routes
Config details as below

var config = {
videoSDKJWT: $(‘#zoom_video_token’).val(),
sessionName: $(‘#sessionName’).val(),
userName: $(‘#userIdentity’).val(),
features: [‘video’, ‘audio’, ‘chat’, ‘users’, ‘settings’],
options: { init: {enforceVirtualBackground:true}, audio: {originalSound:false}, video: {virtualBackground:false,originalRatio:true}, share: {}},
virtualBackground: {
allowVirtualBackground: true,
allowVirtualBackgroundUpload: true,
virtualBackgrounds: [$(‘#weburl’).val()+‘/zoombg.jpg’]
}

}

var sessionContainer = document.getElementById(‘sessionContainer’)

uitoolkit.joinSession(sessionContainer, config)
var sessionClosed = (() => {

})

uitoolkit.onSessionClosed(sessionClosed);

Looking for help for urgent help and support from zoom and this forum.

Thank you

2

im a new developer and getting that and looking for how to debug it.

3

in the zoom code inside of videosdk-ui-toolkit.js inthe area: initializeVideoSdk() {
var e = this;
return lo(function*() {
try {
yield e.joinSession()
} catch (i) {
e.error.throwError(“UIKit”, i),
e.isLoading = !1
}
})(){
“type”: “JOIN_MEETING_FAILED”,
“reason”: “This account does not exist or does not belong to you”,
“errorCode”: 200
}

4

Hi @bhushanc,

Could you send a screenshot of the error you’re seeing? Trying to get more context to understand what’s causing it. Also, is the error occurring when a new user tries to join the call, or when the host attempts to initiate and join the session?

Thanks,
Rehema

5

Hi @ryng,

Are you using your Video SDK credentials that you got from marketplace.zoom.us to generate your JWT? If so, do you see any errors when debugging the JWT at jwt.io?

Thanks,
Rehema

1 Like
6

From the sample web demo i hijacked the JS files because the @zoom\videosdk-ui-toolkit seems like i need to use node to build a bundle? I “think” i created the right SDK key but its not clear if i did.

7

I cant upload images to support forum:
An error occurred: Sorry, you can’t embed media items in a post.

My JS has:

// Fetch JWT from the server
fetch(‘/Club/GetJWTToken’, {
method: ‘POST’,
body: JSON.stringify({
sessionName,
role
}),
headers: {
‘Content-Type’: ‘application/json’
}
})
.then(response => response.json())
.then(data => {
console.log(“Received JWT data:”, data);

      const config = {
          videoSDKJWT: data.signature,   // Pass the JWT signature
          sessionName,                   // Pass the session name
          userName,                      // User's name
          sessionPasscode,               // Passcode, if any
          features: ['preview', 'video', 'audio', 'settings', 'users', 'chat', 'share'],
          options: { init: {}, audio: {}, video: {}, share: {} },
          virtualBackground: {
              allowVirtualBackground: true,
              allowVirtualBackgroundUpload: true,
              virtualBackgrounds: [
                  'https://images.unsplash.com/photo-1715490187538-30a365fa05bd?q=80&w=1945&auto=format&fit=crop'
              ]
          }
      };

And my .net controller has:

    // Method to generate the Zoom SDK signature
    private string GenerateSignature(string sdkKey, string sessionName, string role)
    {
        var ts = (DateTime.UtcNow.Ticks - 621355968000000000) / 10000; // Get timestamp
        var message = $"{sdkKey}{sessionName}{ts}{role}"; // Create the message format

        // Encrypt the message using HMACSHA256 and the SDK Secret
        using (var hmac = new HMACSHA256(Encoding.UTF8.GetBytes(_zoomSettings.SDKSecret)))
        {
            var hash = hmac.ComputeHash(Encoding.UTF8.GetBytes(message)); // Compute the hash
            var signature = $"{sdkKey}.{sessionName}.{ts}.{role}.{Convert.ToBase64String(hash)}"; // Build signature
            return signature.TrimEnd('='); // Remove padding from Base64 string
        }
    }
    [HttpPost]
    public IActionResult GetJWTToken([FromBody] ZoomSessionRequest request)
    {
        // Generate JWT token based on the received session details
        string sdkKey = _zoomSettings.SDKKey;
        string signature = GenerateSignature(sdkKey, request.SessionName, request.Role.ToString());

        return Json(new { signature });
    }
8

OK yes the first step was to get jwt io site to validate. Then the key was not “role” but “role_type” and now it is working. Thank you.
private string GenerateJWTSignature(string sdkKey, string sessionName, string roleParam)
{
var header = new
{
alg = “HS256”,
typ = “JWT”
};

  var payload = new
  {
      app_key = sdkKey,
      tpc = sessionName, // session name
      role_type = roleParam, //roleParam, // Renamed parameter to avoid conflict (was role)
      iat = DateTimeOffset.UtcNow.ToUnixTimeSeconds(), // issued at time
      exp = DateTimeOffset.UtcNow.AddMinutes(5).ToUnixTimeSeconds(), // expiration time
      user_identity = Guid.NewGuid().ToString()  // optional: unique identifier for the user
  };

  // Convert header and payload to Base64Url encoded strings
  string headerBase64 = Base64UrlEncode(JsonConvert.SerializeObject(header));
  string payloadBase64 = Base64UrlEncode(JsonConvert.SerializeObject(payload));

  // Create the signature using HMACSHA256
  string message = $"{headerBase64}.{payloadBase64}";
  using (var hmac = new HMACSHA256(Encoding.UTF8.GetBytes(_zoomSettings.SDKSecret)))
  {
      var hash = hmac.ComputeHash(Encoding.UTF8.GetBytes(message));
      string signature = Base64UrlEncode(hash);
      string jwtToken = $"{headerBase64}.{payloadBase64}.{signature}"; // JWT Token

      // Output to console/log for easy copying to clipboard
      Console.WriteLine($"Generated JWT Token: {jwtToken}");

      // Alternatively, return the token for use
      return jwtToken;
  }

}

10

Hi Rehema,

Thank you for your help.

Please find below the error screenshot

Screenshot 2024-10-07 at 14.48.27
Screenshot 2024-10-07 at 14.48.27930×266 11.6 KB

Error occurs when host attempts to initiate and join the session.

Thank you

11

This was solved by using chrome console and break pointing in zoom js file where the verbose reason was present and traced back to a bad JWT token.

12

I had the same problem, but i haven´t solved yet. Can you help me with that?