Please init meeting first!, errorcode: 3008 when upgrading from v1.7.7 to v1.8.5

[jude.niroshan11 (Jude)]

Description
I have seen multiple questions people asked on this dev forum about error code 3008 message: Please init meeting first!. It only shows the loader and ZoomMtg.join throws this error.

Error
The full error message or issue you are running into.

Which version?
I’m upgrading from 1.7.7 to 1.8.5

To Reproduce(If applicable)

here is my React Component:

import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'
import axios from "../axios-middleware"
import Cookies from "js-cookie"

import {ZoomMtg} from "@zoomus/websdk"
import "@zoomus/websdk/dist/css/bootstrap.css"
import "@zoomus/websdk/dist/css/react-select.css"

ZoomMtg.setZoomJSLib("https://source.zoom.us/1.8.5/lib", "/av")

class Zoom extends Component {
  constructor(props) {
    super(props)
    this.state = {
      ...
    }
  }
  .......

  initZoom(meetingSession, apiKey, signature, email) {
    ZoomMtg.preLoadWasm()
    ZoomMtg.prepareJssdk()
    ZoomMtg.init({
      leaveUrl: 'https://www.abc.com/' + this.state.userRedirectPath,
      isSupportAV: true,
      success: function (success) {
        console.log("Init Success ", JSON.stringify(success));
        ZoomMtg.join(
          {
            meetingNumber:,
            userName: '',
            signature: signature,
            apiKey: apiKey,
            passWord: '',
            success: function (res) {
              console.log('join meeting success')
            },
            error: function (res) {
              console.log(res)
            }
          }
        )
      },
      error: function (res) {
        console.log(res)
      }
    })
  }

  render() {
    if (this.state.legitUser) {
      return (
        <div id="zmmtg-root"/>
      )
    } else {
      return (
        <>
          {this.state.stolenCookie &&
          <div>
            <p>Be supportive</p>
          </div>
          }
          {this.state.noCookieAvailable &&
          <div>
            <p>Make sure you have enabled the browser cookies for accessing the Live Stream.</p>
          </div>
          }
          <div>
            <p>We are verifying your identity. If this takes more than 5 seconds, please try
              again...</p>
          </div>
        </>
      )
    }
  }
}

export default withRouter(Zoom)

Device (please complete the following information):

• Browser: Chrome

[jude.niroshan11 (Jude)]

I have noticed that below join method is being failing. But I don’t know how to fix it

ZoomMtg.join(
          {
            meetingNumber:,
            userName: '',
            signature: signature,
            apiKey: apiKey,
            passWord: '',
            success: function (res) {
              console.log('join meeting success')
            },
            error: function (res) {
              console.log(res) // debug point hits here with error code 3008
            }
          }
        )

[will.zoom (Will)]

Hi @jude.niroshan11,

Please try moving the following lines to immediately follow your import statements:

ZoomMtg.preLoadWasm();
ZoomMtg.prepareJssdk();

You can reference a working implementation of 1.8.5 in our sample React App here:

zoom/websdk-sample-react/blob/master/src/App.js

Thanks,
Will

[jude.niroshan11 (Jude)]

Hi @will.zoom,

Thank you for your reply. The repository you pointed out is a very basic hello-world react app which has integrated the web-sdk. As you can see, my react-app has few more views that I need to render depending on the user scope and accessibility. Therefore, putting the below lines in my App.js is not an option.

ZoomMtg.preLoadWasm()
ZoomMtg.prepareJssdk()

What I have done with v1.7.7 was, I created a dedicated Zoom.js react component(which I pasted in the question) to display the meeting view.

This is the hack I did: there is a <div id="zmmtg-root"/> tag that zoom libraries are injecting into the DOM and fill it up with necessary child components. So, what I did inside my Zoom react component, I added that <div id="zmmtg-root"/> tag inside my component, so whenever zoom injects the stuff by DOM id, it will use the <div id="zmmtg-root"/> tag that I wrote inside my react component.

With this design, I could achieve what I wanted when I use v1.7.7. But when I upgrade to the latest version, I keep getting “Please init meeting first!” error message.

initZoom function is being triggered after an axios call to another backend service. I can see, the error throws from the ZoomMtg.join function.

initZoom(meetingSession, apiKey, signature, email) {
    console.log("checkSystemRequirements");
    console.log(JSON.stringify(ZoomMtg.checkSystemRequirements()));

    ZoomMtg.preLoadWasm()
    ZoomMtg.prepareJssdk()
    ZoomMtg.init({
      leaveUrl: 'https://www.abc.com/' + this.state.userRedirectPath,
      isSupportAV: true,
      debug: true,
      success: function (success) {
        console.log("Init Success ", JSON.stringify(success)); // HERE message prints out in the console!

        ZoomMtg.join(
          {
            meetingNumber: parseInt(meetingSession.zoomMeetingId, 10),
            userName: email,
            signature: signature,
            apiKey: apiKey,
            passWord: meetingSession.zoomMeetingPassword,
            success: function (res) {
              console.log('join meeting success')
            },
            error: function (res) {
              console.log(res)
            }
          }
        )
      },
      error: function (res) {
        console.log(res)
      }
    })
  }

Any help would be appreciated! @tommy @will.zoom

[jude.niroshan11 (Jude)]

I have fixed the problem. I have identified that, with the newest library, zoom will not give any freedom to restrict the meeting view into a react component. I have changed my code design. I could not use the hack anymore, rather I’m forced to live with the decision that zoom made to inject the <div id="zmmtg-root"/> into my SPA and do whatever they want.

I added these below lines at the top of my custom React component.

import {ZoomMtg} from "@zoomus/websdk"
import "@zoomus/websdk/dist/css/bootstrap.css"
import "@zoomus/websdk/dist/css/react-select.css"

ZoomMtg.setZoomJSLib("https://source.zoom.us/1.8.5/lib", "/av")

And in my initialization of zoom object looks as follows:

ZoomMtg.preLoadWasm()
ZoomMtg.prepareJssdk()

ZoomMtg.init({
  leaveUrl: 'https://www.abc.com/' + this.state.userRedirectPath,
  isSupportAV: true,
  isSupportChat: true,
  disableInvite: true,
  disableRecord: true,
  disableJoinAudio: true,
  success: function () {
    ZoomMtg.join(
      {
        meetingNumber: parseInt(meetingSession.zoomMeetingId, 10),
        userName: email,
        signature: signature,
        apiKey: apiKey,
        passWord: meetingSession.zoomMeetingPassword,
        success: function (res) {
          console.log('join meeting success')
          document.getElementById('zmmtg-root').style.display = "block"
        },
        error: function (res) {
          console.log(res)
        }
      }
    )
  },
  error: function (res) {
    console.log(res)
  }
})

I removed all jQuery dependencies from my entire front end app. That’s basically it. Now I’m on v1.8.5 which works as usual.

[will.zoom (Will)]

Glad you were able to resolve the issue. Thanks for sharing your solution!

Best,
Will