Please init meeting first! Error when adding div id="zmmtg-root" inside a React component

Meeting SDK Web
1

Description
Getting the error Please init meeting first when adding a div id=“zmmtg-root”# inside a component

Error
{
“method”: “init”,
“status”: false,
“errorCode”: 3008,
“errorMessage”: “Please init meeting first!”,
“result”: null
}

Which version?
1.8.0

To Reproduce(If applicable)

  1. Use this repo for code - https://github.com/shkhalid/zoom-web-sdk-react-example
  2. Inside App.js add div id=“zmmtg-root”
  3. npm i && npm start to start the app
  • OS:Mac os Catalina
  • Version: 83
  • Browser:Chrome

Additional context
This repo works without adding the custom div inside. I am trying to embed the websdk into a component. That’s when I run into this error.

  1. Token are generated
  2. Meeting gets initialized Successfully
  3. when the Join meeting is called I get this error

Thanks for the help.

2

Angular has the same issue. If you add div id=“zmmtg-root” then the “Please init meeting first!” error occurs.

Sample Project

I have attached a sample project based on the standard angular sample that demonstrates the issue. The attached sample works in 1.7.9 but fails in 1.8.0

3

Hey @sgahaghan, @kannan,

Currently setting the div id="zmmtg-root" is not supported. The Web SDK appends it to the DOM itself.

What is your use case for adding the zmmtg-root id in a custom way?

Thanks,
Tommy

4

@tommy I would like to keep it inside the component, resize the view (which right now takes up the full page) and add some event handlers are something. I want to destroy WebClient when my component moves out of view.

5

Hey @kannan,

Gotcha, you can see a similar approach in the Angular Sample App:

Thanks,
Tommy

6

@Tommy but if you see my error description I get that error while doing something similar to this

7

Hey @kannan,

Gotcha! I suggest adding the preload / prepare scripts to the top of your app so they load right away.

Here is an example:

Try that and let me know if it fixes the issue! :slight_smile:

Thanks,
Tommy

8

Hello,
I had exactly the same problem.
I found a solution with Javascript ( angular project )
You have to create a div with id “zoom-content” into where you want and then into your javascript or component:
const zoomMeetingDiv = document.getElementById(“zmmtg-root”);
const zoomContent = this.document.getElementById(‘zoom-content’);
zoomContent.appendChild(zoomMeetingDiv);
When you appendChild an existing node, it will be moved without a creation.

Have a nice day.

1 Like
9

Thanks for sharing this @mehdi.rouis! :slight_smile:

-Tommy

10

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