Fail to join the meeting. error code 200. I generated a meeting using server ro server app and when I join meeting with sdk it gives me error

Meeting SDK Web
1

my jws token decoded

{
“alg”: “HS256”,
“typ”: “JWS”
}
PAYLOAD:DATA

{
“sdkKey”: “QW3Rp7HOTYyBugN5tFYoA”,
“mn”: 74588210985,
“role”: 0,
“iat”: 1695570385,
“exp”: 1695577585,
“appKey”: “6RDXrGJTVsAEZ51t8sheTKxmJ70cs4W9”,
“tokenExp”: 1695577585
}

this is my test accout api so I am okay sharing but please i need to fix this

{
     "IsSuccess": true,
    "Data": {
      "uuid": "9YYMwR2YSn2L4fZbHDpE8w==",
      "id": 74588210985,
       "host_id": "BthL23YfRrOu8NEecKzMaQ",
      "host_email": "joshiarpit61@gmail.com",
      "topic": "My Meeting",
      "type": 2,
    "status": "waiting",
         "start_time": "2023-09-24T14:28:18Z",
         "duration": 60,
         "timezone": "Asia/Calcutta",
        "created_at": "2023-09-24T14:28:18Z",
        "start_url": "...big link..."
         "join_url": "https://us04web.zoom.us/j/74588210985?pwd=d7lyjICNexTmBggPrttbhSFqKFG2sH.1",
         "password": "dnu4ZR",
         "h323_password": "919323",
         "pstn_password": "919323",
         "encrypted_password": "d7lyjICNexTmBggPrttbhSFqKFG2sH.1",

 var authEndpoint = `http://localhost:2000/api/v1/zoom/authEndpoint`
 var sdkKey = 'QW3Rp7HOTYyBugN5tFYoA' 
 var meetingNumber = '74588210985'
 var passWord = ''
 var role = 0
 var userName = 'f'
 var userEmail = ''
 var registrantToken = ''  
 var zakToken = ''

when i click on koint meeting in frontend i am getting error

{type: ‘JOIN_MEETING_FAILED’, reason: ‘Fail to join the meeting.’, errorCode: 200}

and this is my endpoint


         const iat = Math.round(new Date().getTime() / 1000) - 30;
         const exp = iat + 60 * 60 * 2
        
         const oHeader = { alg: 'HS256', typ: 'JWS' }
        
         const oPayload = {
          sdkKey: 'QW3Rp7HOTYyBugN5tFYoA',
          mn: 74588210985,
          role: 0,
          iat: iat,
          exp: exp,
          appKey: '6RDXrGJTVsAEZ51t8sheTKxmJ70cs4W9',
          tokenExp: iat + 60 * 60 * 2
         }
        
         const sHeader = JSON.stringify(oHeader)
         const sPayload = JSON.stringify(oPayload)
         const signature = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, '6RDXrGJTVsAEZ51t8sheTKxmJ70cs4W9')
        console.log('signatureeee',signature)
         return signature
2

@ashishdwivediw ,

If you are using meeting SDK for web, you will only need appKey in your jwt token.
In addition, these 2 values for sdkKey and appKey (optional) should be identical.

You should be signing the token with a Client ID and ClientSecret from the meeting SDK app.

3

Thanks for the help I fixed it. but now I am getting this error

Failed to load resource: the server responded with a status of 403 ()
course:1 Uncaught (in promise) 
Object
reason
: 
"dependent assets are not accessible"
type
: 
"INVALID_PARAMETERS"
[[Prototype]]
: 
Object

when i click on join meeting i am getting the signature from backend but in frontend i am getting this error also I am getting this error in one of my two apps. I copied everything in same but it only works in one of them.

  const client = ZoomMtgEmbedded.createClient();
  console.log(client,"client")

   var authEndpoint = `http://localhost:2000/api/v1/zoom/authEndpoint`
   var sdkKey = 'QW3Rp7HOTYyBugN5tFYoA' 
   var meetingNumber = '84084250273'
   var passWord = 'f0cnE2'
   var role = 1
   var userName = 'f'
   var userEmail = ''
   var registrantToken = ''  
   var zakToken = ''
  
   function getSignature(e) {
    e.preventDefault();
  
    fetch(authEndpoint, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
     })
    }).then(res => res.json())
    .then(response => {
     startMeeting(response.Data)
     console.log(response,"aaaaaaaaaa")
    }).catch(error => {
     console.error(error,"AAAAAA")
    })
   }
  
   function startMeeting(signature) {
  
    let meetingSDKElement = document.getElementById('meetingSDKElement');
  
    client.init({
     debug: true,
     zoomAppRoot: meetingSDKElement,
     language: 'en-US',
     customize: {
      meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
      toolbar: {
       buttons: [
        {
         text: 'Custom Button',
         className: 'CustomButton',
         onClick: () => {
          console.log('custom button');
         }
        }
       ]
      }
     }
    });
  
    client.join({
     signature: signature,
     sdkKey: sdkKey,
     meetingNumber: meetingNumber,
     password: passWord,
     userName: userName,
     userEmail: userEmail,
     tk: registrantToken,
     zak: zakToken
    })
   }
4

@ashishdwivediw ,

do you have a screenshot of the errors you are getting from the browser console?

5

image

Failed to load resource: the server responded with a status of 403 ()
Uncaught (in promise)

1. Object

  1. reason: "dependent assets are not accessible"
  2. type: "INVALID_PARAMETERS

this is the error I get everytime i click on join Meeting

6

@ashishdwivediw ,

I would recommend you to take alook at this sample code, specifically the Components folder

7

@chunsiong.zoom Sir I took reference from the react web sample Can you suggest something from that app
https://github.com/zoom/meetingsdk-react-sample

Also can you give hint what i might be doing wrong because in one of my apps its working and I checked many times if there is some difference there were none.

8

@ashishdwivediw , are you using component view or client view?

If you are using client view, do make sure your react is 16.

9

Sir I think I am using componet view and also my react version is 18 and still on one app its working and on another its not and also I am doing everything same

<div id="meetingSDKElement">
            {/* Zoom Meeting SDK Component View Rendered Here */}
           </div>
        <button onClick={getSignature}>Join Meeting</button>
10

image
image849×97 2.6 KB

Now I am getting this error It says userId is not correct well I am not passing user Id and in my other app it works. So confusing

var authEndpoint = `http://localhost:2000/api/v1/zoom/authEndpoint`
   var sdkKey = 'QW3Rp7HOTYyBugN5tFYoA' 
   var meetingNumber = '84084250273'
   var passWord = 'f0cnE2'
   var role = 1
   var userName = 'f'
   var userEmail = ''
   var registrantToken = ''  
   var zakToken = ''
  
   function getSignature(e) {
    e.preventDefault();
  
    fetch(authEndpoint, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
     })
    }).then(res => res.json())
    .then(response => {
     startMeeting(response.Data)
     console.log(response,"aaaaaaaaaa")
    }).catch(error => {
     console.error(error,"AAAAAA")
    })
   }
  
   function startMeeting(signature) {
  
    let meetingSDKElement = document.getElementById('meetingSDKElement');
  
    client.init({
     debug: true,
     zoomAppRoot: meetingSDKElement,
     language: 'en-US',
     customize: {
      meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
      toolbar: {
       buttons: [
        {
         text: 'Custom Button',
         className: 'CustomButton',
         onClick: () => {
          console.log('custom button');
         }
        }
       ]
      }
     }
    });
  
    client.join({
     signature: signature,
     sdkKey: sdkKey,
     meetingNumber: meetingNumber,
     password: passWord,
     userName: userName,
     userEmail: userEmail,
     tk: registrantToken,
     zak: zakToken
    })
   }

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      {/* <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      > */}
        <Box sx={style}>
        <div id="meetingSDKElement">
            {/* Zoom Meeting SDK Component View Rendered Here */}
           </div>
        <button onClick={getSignature}>Join Meeting</button>
        </Box>
11

@ashishdwivediw

Sir I think I am using componet view and also my react version is 18 and still on one app its working and on another its not and also I am doing everything same

If it is the same, are you are using the identical code for the entire project, or you are referring similar implementation?

image
image849×97 2.6 KB

this happens when you are trying to render a video of a user who is not sending video

12

See I have 2 apps lets say admin side and student side and I am using a component called zoomApi on both sides. Here is the thing on student side video starts and i can resize and stuff but on admin side the video starts and as soon as i resize or touch the zoom it gives me this error

13

@ashishdwivediw , are these 2 apps using the same codebase, or slightly different codebase?

14

Exactly same plus backend is common for both let me give you full code

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Modal from '@mui/material/Modal';
import ZoomMtgEmbedded from '../../../../node_modules/@zoomus/websdk/embedded';

const modalBg = {
  width: '100%',
  height: '100%',
  background: '#afafaf',
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',

}
const style = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '80%',
  height: '80%' ,
  bgcolor: 'background.paper',
  border: '1px solid #e1e1e1',
  borderRadius: '10px',
  boxShadow: 24,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  p: 4,
};
const joinMeet = {
  background: '#1BA9A0',
  color: '#fff',
  padding: '6px 20px',
  border: '0px',
  fontSize: '14px',
  borderRadius: '8px',
  '&:hover': {
    background: '#39c3ba'
  }
}
const closeModal = {
  position: 'absolute',
  top: '20px',
  right: '20px',
  cursor: 'pointer',
  zIndex: '999'

}

export default function ZoomPopup({zoomData, onClose}) {
  const [open, setOpen] = React.useState(false);
  const handleOpen = () => setOpen(false);
  const handleClose = () => setOpen(false);


  const client = ZoomMtgEmbedded.createClient();
  
  console.log(client,"client")
  //  {
  //     "IsSuccess": true,
  //     "Data": {
  //         "uuid": "0wVs2a42TuyLyaeQlKbZUA==",
  //         "id": 84084250273,
  //         "host_id": "kJFctaH1QhGg30bbMxs84Q",
  //         "host_email": "ashishdwivediw@gmail.com",
  //         "topic": "My Meeting",
  //         "type": 2,
  //         "status": "waiting",
  //         "start_time": "2023-09-26T05:54:58Z",
  //         "duration": 60,
  //         "timezone": "America/Los_Angeles",
  //         "created_at": "2023-09-26T05:54:58Z",
  //         "start_url": "https://us05web.zoom.us/s/84084250273?zak=eyJ0eXAiOiJKV1QiLCJzdiI6IjAwMDAwMSIsInptX3NrbSI6InptX28ybSIsImFsZyI6IkhTMjU2In0.eyJhdWQiOiJjbGllbnRzbSIsInVpZCI6ImtKRmN0YUgxUWhHZzMwYmJNeHM4NFEiLCJpc3MiOiJ3ZWIiLCJzayI6IjAiLCJzdHkiOjEsIndjZCI6InVzMDUiLCJjbHQiOjAsIm1udW0iOiI4NDA4NDI1MDI3MyIsImV4cCI6MTY5NTcxNDg5OCwiaWF0IjoxNjk1NzA3Njk4LCJhaWQiOiJ6bU9HN1llZlFSU2daMzh0QTltbVlRIiwiY2lkIjoiIn0.dLehlLodECsyFklanhXa-c7MpKTD-RViQKsooeFzGYk",
  //         "join_url": "https://us05web.zoom.us/j/84084250273?pwd=2RjGRar02yKxanyvSp9nDtBcyh8vz3.1",
  //         "password": "f0cnE2",
  //         "h323_password": "727641",
  //         "pstn_password": "727641",
  //         "encrypted_password": "2RjGRar02yKxanyvSp9nDtBcyh8vz3.1",
  //         "settings": {
  //             "host_video": false,
  //             "participant_video": false,
  //             "cn_meeting": false,
  //             "in_meeting": false,
  //             "join_before_host": false,
  //             "jbh_time": 0,
  //             "mute_upon_entry": false,
  //             "watermark": false,
  //             "use_pmi": false,
  //             "approval_type": 2,
  //             "audio": "voip",
  //             "auto_recording": "none",
  //             "enforce_login": false,
  //             "enforce_login_domains": "",
  //             "alternative_hosts": "",
  //             "alternative_host_update_polls": false,
  //             "close_registration": false,
  //             "show_share_button": false,
  //             "allow_multiple_devices": false,
  //             "registrants_confirmation_email": true,
  //             "waiting_room": true,
  //             "request_permission_to_unmute_participants": false,
  //             "registrants_email_notification": true,
  //             "meeting_authentication": false,
  //             "encryption_type": "enhanced_encryption",
  //             "approved_or_denied_countries_or_regions": {
  //                 "enable": false
  //             },
  //             "breakout_room": {
  //                 "enable": false
  //             },
  //             "internal_meeting": false,
  //             "continuous_meeting_chat": {
  //                 "enable": false,
  //                 "auto_add_invited_external_users": false
  //             },
  //             "participant_focused_meeting": false,
  //             "push_change_to_calendar": false,
  //             "alternative_hosts_email_notification": true,
  //             "show_join_info": false,
  //             "device_testing": false,
  //             "focus_mode": false,
  //             "enable_dedicated_group_chat": false,
  //             "private_meeting": false,
  //             "email_notification": true,
  //             "host_save_video_order": false,
  //             "sign_language_interpretation": {
  //                 "enable": false
  //             },
  //             "email_in_attendee_report": false
  //         },
  //         "pre_schedule": false
  //     },
  //     "message": "Meeting created"
  // }
     
  
   var authEndpoint = `http://localhost:2000/api/v1/zoom/authEndpoint`
   var sdkKey = 'QW3Rp7HOTYyBugN5tFYoA' 
   var meetingNumber = '84084250273'
   var passWord = 'f0cnE2'
   var role = 1
   var userName = 'f'
   var userEmail = ''
   var registrantToken = ''  
   var zakToken = ''
  
   function getSignature(e) {
    e.preventDefault();
  
    fetch(authEndpoint, {
     method: 'POST',
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
     })
    }).then(res => res.json())
    .then(response => {
     startMeeting(response.Data)
     console.log(response,"aaaaaaaaaa")
    }).catch(error => {
     console.error(error,"AAAAAA")
    })
   }
  
   function startMeeting(signature) {
  
    let meetingSDKElement = document.getElementById('meetingSDKElement');
    client.init({
      assetPath: 'https://source.zoom.us/2.17.0/lib/av',
     debug: true,
     zoomAppRoot: meetingSDKElement,
     language: 'en-US',
     customize: {
      meetingInfo: ['topic', 'host', 'mn', 'pwd', 'telPwd', 'invite', 'participant', 'dc', 'enctype'],
      toolbar: {
       buttons: [
        {
         text: 'Custom Button',
         className: 'CustomButton',
         onClick: () => {
          console.log('custom button');
         }
        }
       ]
      }
     }
    });
  
    client.join({
     signature: signature,
     sdkKey: sdkKey,
     meetingNumber: meetingNumber,
     password: passWord,
     userName: userName,
     userEmail: userEmail,
     tk: registrantToken,
     zak: zakToken
    })
    console.log(client.init,"meetingSDKElement")

   }

  return (
    <div>
      <Button onClick={handleOpen}>Open modal</Button>
      {/* <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="modal-modal-title"
        aria-describedby="modal-modal-description"
      > */}
      <Box sx={modalBg}>
        <Box sx={style}>
          <Box sx={closeModal} onClick={onClose}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fillRule="evenodd" clipRule="evenodd" d="M11 1.75C5.89137 1.75 1.75 5.89137 1.75 11C1.75 16.1086 5.89137 20.25 11 20.25C16.1086 20.25 20.25 16.1086 20.25 11C20.25 5.89137 16.1086 1.75 11 1.75ZM0.25 11C0.25 5.06294 5.06294 0.25 11 0.25C16.9371 0.25 21.75 5.06294 21.75 11C21.75 16.9371 16.9371 21.75 11 21.75C5.06294 21.75 0.25 16.9371 0.25 11ZM7.46967 7.46967C7.76256 7.17678 8.23744 7.17678 8.53033 7.46967L11 9.93934L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L12.0607 11L14.5303 13.4697C14.8232 13.7626 14.8232 14.2374 14.5303 14.5303C14.2374 14.8232 13.7626 14.8232 13.4697 14.5303L11 12.0607L8.53033 14.5303C8.23744 14.8232 7.76256 14.8232 7.46967 14.5303C7.17678 14.2374 7.17678 13.7626 7.46967 13.4697L9.93934 11L7.46967 8.53033C7.17678 8.23744 7.17678 7.76256 7.46967 7.46967Z" fill="#222631"/>
            </svg>
          </Box>
        <div id="meetingSDKElement">
            {/* Zoom Meeting SDK Component View Rendered Here */}
        </div>
        <Button sx={joinMeet} onClick={getSignature}>Join Meeting</Button>
        </Box>
      </Box>
        


      {/* </Modal> */}
    </div>
  );
}

this component is same for both

15

@ashishdwivediw ,

for the error of being unable to load dependent assets, could you do a refresh on the browser, or use incognito mode? There was a CDN issue which was fixed towards the end of last week.

16

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.