Join_Meeting_Failed on Vue Sample App

Description
Trying to setup the Vue sample app using component view. The app compiles but I am unable to join the meeting I created in the Zoom console.

Browser Console Error
{
“type”: “JOIN_MEETING_FAILED”,
“reason”: “connection error”,
“errorCode”: -3000
}

Which Web Meeting SDK version?
3.1.6

Meeting SDK Code Snippets

<script setup>
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';

const props = defineProps({
  meetingNumber: {
    type: String,
    required: true
  },
  passWord: {
    type: String,
    required: false,
    default: ''
  },
  role: {
    type: Number,
    required: false,
    default: 0
  },
  userName: {
    type: String,
    required: false,
    default: 'Student'
  },
  userEmail: {
    type: String,
    required: false,
    default: ''
  },
  registrantToken: {
    type: String,
    required: false,
    default: ''
  },
  zakToken: {
    type: String,
    required: false,
    default: ''
  },
    leaveUrl: {
        type: String,
        required: false,
        default: 'https://tesoldegreethailand.com/dashboard'
    }
})

var client = ZoomMtgEmbedded.createClient()
var authEndpoint = 'https://auth.tesoldegreethailand.com/'
var sdkKey = 'ODJw3lb0Ro6iLRcGEP5uKQ'
var meetingNumber = props.meetingNumber
var passWord = props.passWord
var role = props.role
var userName = props.userName
var userEmail = props.userEmail
var registrantToken = props.registrantToken
var zakToken = props.zakToken
var leaveUrl = props.leaveUrl

function getSignature() {
  fetch(authEndpoint, {
    method: 'POST',
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
    })
  }).then((response) => {
    return response.json()
  }).then((data) => {
    console.log(data)
    startMeeting(data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

function startMeeting(signature) {
  let meetingSDKElement = document.getElementById('meetingSDKElement');

  client.init({zoomAppRoot: meetingSDKElement, language: 'en-US', patchJsMedia: true}).then(() => {
    client.join({
      signature: signature,
      sdkKey: sdkKey,
      meetingNumber: meetingNumber,
      password: passWord,
      userName: userName,
      userEmail: userEmail,
      tk: registrantToken,
      zak: zakToken
    }).then(() => {
      console.log('joined successfully')
    }).catch((error) => {
      console.log(error)
    })
  }).catch((error) => {
    console.log(error)
  })
}
</script>

Device (please complete the following information):

  • PC
  • Windows 11
  • Chrome
  • 122.0.6261.70 (Official Build) (64bit)]

Additional context
I’m getting lots of cross-origin cookie warnings due to the fact that Chrome is now blocking 3rd party cookies with same-site: none

Also got an error Cross-Origin Read Blocking when accessing this path /api/v1/wc/info?apiKey=ODJw3lb0Ro6iLRcGEP5uKQ&signatureType=sdk&signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtLZXkiOiJPREp3M2xiMFJvNmlMUmNHRVA1dUtRIiwiaWF0IjoxNzA4OTQzNTQ0LCJleHAiOjE3MDg5NTA3NDQsImFwcEtleSI6Ik9ESnczbGIwUm82aUxSY0dFUDV1S1EiLCJ0b2tlbkV4cCI6MTcwODk1MDc0NH0._tTG77IB5Kdjf1jFl62ViGZPBw51ZOcWqiNNIFWvZwU&userName=Aaron+Travis+Harker&lang=en-US&passWord=&userEmail=classroom1%40puie.ac&customerKey=&sdkUrl=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbS9hZG1pbi9jbGFzc3Jvb20vMTAx&sdkOrigin=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbQ&proxy=1&ulsm=0&cv=3.1.0&callback=zoomsdkjsonpcallback1

I should also mention I’m using the Heroku app to generate the JWT signature and that the Vue component is correctly receiving the signature from Heroku.

I do believe the issue stems from the CORB error -

The resource from “https://zoom.us/api/v1/wc/info?apiKey=ODJw3lb0Ro6iLRcGEP5uKQ&signatureType=sdk&signature=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzZGtLZXkiOiJPREp3M2xiMFJvNmlMUmNHRVA1dUtRIiwiaWF0IjoxNzA5MDM2NzQ2LCJleHAiOjE3MDkwNDM5NDYsImFwcEtleSI6Ik9ESnczbGIwUm82aUxSY0dFUDV1S1EiLCJ0b2tlbkV4cCI6MTcwOTA0Mzk0Nn0.gY1VmOvZs5t6x-P49VGuzu5Sod8a48dv1k7PeynEHeM&userName=Aaron+Travis+Harker&lang=en-US&passWord=&userEmail=classroom1%40puie.ac&customerKey=&sdkUrl=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbS9hZG1pbi9jbGFzc3Jvb20vMTAx&sdkOrigin=aHR0cHM6Ly90ZXNvbGRlZ3JlZXRoYWlsYW5kLmNvbQ&proxy=1&ulsm=0&cv=3.1.0&callback=zoomsdkjsonpcallback1” was blocked due to MIME type (“application/json”) mismatch (X-Content-Type-Options: nosniff).

OK just an update, I have tested on edge and Firefox and get the same result.

One thing I noticed on Chrome it says the 3rd party cookies will be blocked in the future , so I hadn’t worried about the errors they are throwing but Firefox already seems to be blocking them.

So any cookie supplied with samesite = none is being blocked unless it includes the new partitioned tag, which none of Zooms appear to do.

Can anyone just give me a hint what this error code means?

So after 5days no one can even tell me where I can find an error list to work out why this is not working???

@chunsiong.zoom any idea what error code -3000 means?

@AaronH

You are probably missing additional key value in your token

right now it has these values
image

Since you are using web, you will need mn (meeitng number) and role as well

@chunsiong.zoom
I’m using the Heroku app to generate the token - GitHub - zoom/videosdk-auth-endpoint-sample: Generate a Video SDK JWT to join Zoom Video SDK sessions with the Video SDK.

and as per the Vue example app I’m sending the meetingNumber and role when generating the JWT token as you can see below

const props = defineProps({
  meetingNumber: {
    type: String,
    required: true
  },
  role: {
    type: Number,
    required: true,
    default: 0
  },
  ......
})

var meetingNumber = props.meetingNumber
var role = props.role

function getSignature() {
  fetch(authEndpoint, {
    method: 'POST',
    body: JSON.stringify({
      meetingNumber: meetingNumber,
      role: role
    })
  }).then((response) => {
    return response.json()
  }).then((data) => {
    console.log(data)
    startMeeting(data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

To keep things concise I’ve removed extra props

@AaronH ,

The JWT token shared on top doesn’t include the meeting number and role.

When doing your HTTP POST, you might need to specify the application/json for the mime type

@chunsiong.zoom How can I tell if the token includes meeting number and role?

@AaronH use jwt.io to look at the token, it will break it down for you

@chunsiong.zoom Thanks, I’ll have a dig at what is going on then.

@chunsiong.zoom is there somewhere I can find a list of error codes? I’ve got the meeting number and role sorted but now I’m getting an invalid signature error with errorCode 3712. I’m guessing it is because the meeting I setup for testing has probably expired or something and will try creating a new meeting. Just would be nice to know where I can find a list of these codes.

@AaronH 3712 means signature is invalid.

Did you put in the mime type as application/json when calling the endpoint? The below is missing the type.

function getSignature() {
fetch(authEndpoint, {
method: ‘POST’,
body: JSON.stringify({
meetingNumber: meetingNumber,
role: role
})

I encountered the same issue before.

@chunsiong.zoom I actually changed from using fetch to using axios. I’m already using it in the rest of my app and I find it easier to work with.

function getSignature() {
  axios.post(authEndpoint, {
    meetingNumber: meetingNumber,
    role: role
  }, {
    headers: {
      'Content-Type': 'application/json'
    }
  }).then((response) => {
    console.log(response.data.signature)
    startMeeting(response.data.signature)
  }).catch((error) => {
    console.log(error)
  })
}

@chunsiong.zoom Got it working thanks. I had production keys in the Signature generator and dev keys in the app.

1 Like

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