Integrating websdk in new create react app

[digivalsolutions (Digival)]

I am having trouble in implementing web-sdk in my existing react app. I can able to run demo react app and cdn version successfully but start script and webpack configuration confuses me in integration.

Below is my start script:
“start”: “react-scripts start”

I would like to embed zoom inside my ‘App’ component created using ‘creact-react-app’.

[tommy (Tommy Gaessler)]

Hey @digivalsolutions,

What specific issues are you running into?

This may help:

Zoom Meeting Custom Ui

@edward & @sdenardi - yes, this is currently correct. #zmmtg-root appends into the body on import, and needs to be hidden on load. Hiding it in this way should not influence .init() or .join() from overlaying the page when the meeting starts. Considerations for future readers: If you’re loading another root element (like in React), you’ll need to manage/manipulate the DOM outside of the app. And make sure to include required css files in index.html, not within the app. We’re working on improvi…

And here is my example in Angular:
https://github.com/tommygaessler/zoom-angular

Thanks,
Tommy

[swamivenkat (Swami)]

Hello Tommy,

Have any update on React JS awith Web SDK version 1.7.7?

[tommy (Tommy Gaessler)]

Hey @swamivenkat,

Can you be more specific? Not sure what you are referring to.

Thanks,
Tommy

[swamivenkat (Swami)]

Do we have any sample code to use Web SDK into React Js / React Native App?

[tommy (Tommy Gaessler)]

Hey @swamivenkat,

Unfortunately we do not. You can follow our Web SDK NPM guide to install into your React project:

@zoomus/websdk

Thanks,
Tommy

[sangitapujara512 (Sangita)]

Hey Tommy,

Could you please help?
While integration,I am getting error :
errorMessage: “The meeting number is not found.”, errorCode: 3707.

Thanks and Regards,

[michael_p.zoom (Michael P.)]

Hi @sangitapujara512 What is the meeting number that you’re using?

[sangitapujara512 (Sangita)]

Hey Michael,
Thanks for your reply.
Meeting number issue is solved.
My current configuration is : role = 0 (ie for joining meeting)
If I want to start meeting , what changes I need to make.
I tried making role to 1 in request body, but it says invalid signature.

Thanks again for your time!

[tommy (Tommy Gaessler)]

Hey @sangitapujara512,

That is correct, you will change the role to 1 when generating the signature, just make sure you own the meeting. You can’t start meetings your account doesn’t own.

Thanks,
Tommy

[nBow (Casey)]

Do you have a working react app demo with Zoom integration. The current demo seems to only show regular web code.

[tommy (Tommy Gaessler)]

Hey @nBow,

We do not have a React Sample App yet, but a few people in the community have built some:

ZOOM WebSDK/React Clash

Here is the working example https://github.com/shkhalid/zoom-web-sdk-react-example

Thanks,
Tommy

[raop.dev (raopG)]

Hi Tommy, i’m trying to use the example for reactjs you quote, but i cant make it work. dunno why i keep getting this:

<--- Last few GCs --->

[10456:000001FA5617D420]    37010 ms: Mark-sweep 1378.0 (1425.3) -> 1377.7 (1424.8) MB, 1045.0 / 0.0 ms  (average mu = 0.066, current mu = 0.008) allocation failure scavenge might not succeed
[10456:000001FA5617D420]    37014 ms: Scavenge 1378.4 (1424.8) -> 1378.2 (1425.3) MB, 2.4 / 0.0 ms  (average mu = 0.066, current mu = 0.008) allocation failure


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 00000395E485C5C1]
    1: StubFrame [pc: 00000395E484E7C3]
Security context: 0x006b2a71e6e9 <JSObject>
    2: replace [0000006B2A7105E9](this=0x004a25d8a2c9 <String[116]: C:\Users\PX\Desktop\zoom\zoom-web-sdk-react-example-master\node_modules\@zoomus\websdk\dist\zoomus-websdk.umd.min.js>,0x0275398df129 <JSRegExp <String[2]: \\>>,0x011433132409 <String[1]: />)
    3: _append [00000005D0056B49] [C:\Users\PX\Desktop\zoom...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 00007FF76981DD8A v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4506
 2: 00007FF7697F8886 node::MakeCallback+4534
 3: 00007FF7697F9200 node_module_register+2032
 4: 00007FF769B130DE v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF769B1300F v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF769CF9804 v8::internal::Heap::MaxHeapGrowingFactor+9620
 7: 00007FF769CF07E6 v8::internal::ScavengeJob::operator=+24550
 8: 00007FF769CEEE3C v8::internal::ScavengeJob::operator=+17980
 9: 00007FF769CF7B87 v8::internal::Heap::MaxHeapGrowingFactor+2327
10: 00007FF769CF7C06 v8::internal::Heap::MaxHeapGrowingFactor+2454
11: 00007FF769E21EA7 v8::internal::Factory::NewFillerObject+55
12: 00007FF769E9F096 v8::internal::operator<<+73494
13: 00000395E485C5C1
npm ERR! code ELIFECYCLE
npm ERR! errno 134
npm ERR! zoom-testing-react@0.1.0 start: `react-scripts start`
npm ERR! Exit status 134
npm ERR!
npm ERR! Failed at the zoom-testing-react@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\PX\AppData\Roaming\npm-cache\_logs\2020-11-18T21_01_43_083Z-debug.log

[tommy (Tommy Gaessler)]

Hey @raop.dev ,

You can checkout our React Sample App:

zoom/websdk-sample-react

Thanks,
Tommy