You’re welcome! 
-Tommy
Hey @tommy, just curious if you can provide a loose estimate on when this might be coming out this year. I know it’s hard to say w/ precision, but wondering if this is a closer to end of year 2020 timeframe, mid-year or early year?
3 Likes
@tommy Sorry to dig up an old thread, but I’m having issues containerizing / sandboxing the Zoom UI inside my Vue SPA. It takes over the entire screen, even with the CSS modification, the react classes are appended to the ‘document’.
Down in the thread, you mentioned an 'Iframe method" but the links don’t work anymore, could you please elaborate and/or provide an example?
Thanks!
Hey @WebWorker,
Please see the following Web SDK update if you have not already:
We are working to get the Zoom Web Client and Zoom Web SDK back online. Please keep up with our status page for detailed updates: status.zoom.us
The best workaround is to use the Zoom Desktop / Mobile app.
Just include the Zoom meeting join url (https://zoom.us/j/meetingID) on your site rather than showing the websdk / iframe. Clicking on the join url will open the Zoom meeting in the Zoom app.
Apologies for the inconvenience,
Tommy
Hello when I try to customize.
everything stays black.
What is this about?
I am using this example:
https://github.com/zoom/websdk-sample-angular
Just add these css line:
#zmmtg-root, .meeting-client, .meeting-client-inner {
width: 1000px;
height: 500px;
position: relative;
}
#wc-footer {
bottom: auto !important;
width: 1000px !important;
}
#dialog-join {
width: 1000px !important;
}
#sv-active-video, .active-main, #sv-active-speaker-view, .main-layout {
height: 500px !important;
width: 1000px !important;
}
.suspension-window {
transform: translate(-444px, 10px) !important;
}
#dialog-invite {
display: none;
}
And the div:
`<div id="zmmtg-root"></div>`
to the original code 
Hey @developer2,
If you don’t apply those styles, is the screen still black?
Also what are the errors you are getting in the browser console?
Thanks,
Tommy
Hello,
Console:
react-dom.development.js:21258 Download the React DevTools for a better development experience: https://fb.me/react-devtools
core.js:40658 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
client:52 [WDS] Live Reloading enabled.
app.component.ts:41
app.component.ts:58 {method: "init", status: true, errorCode: 0, errorMessage: null, result: null}method: "init"status: trueerrorCode: 0errorMessage: nullresult: null__proto__: Object
localhost/:1 A cookie associated with a cross-site resource at http://zoom.us/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
localhost/:1 A cookie associated with a cross-site resource at https://zoom.us/ was set without the `SameSite` attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with `SameSite=None` and `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.preload.js.map
DevTools failed to parse SourceMap: chrome-extension://gighmmpiobklfepjocnamgkkbiglidom/include.postload.js.map
react-dom.development.js:506 Warning: `NaN` is an invalid value for the `width` css style property.
in canvas (created by b)
in div (created by b)
in div (created by b)
in b (created by O)
in O (created by j)
in div (created by j)
in div (created by j)
in div (created by j)
in div (created by j)
in j (created by O)
in O (created by f)
in div (created by f)
in div (created by f)
in f (created by O)
in O (created by f)
in f (created by O)
in O (created by s)
in div (created by s)
in s (created by O)
in O (created by d)
in t (created by d)
in d
warningWithoutStack @ react-dom.development.js:506
warning @ react-dom.development.js:2628
warnStyleValueIsNaN @ react-dom.development.js:6350
warnValidStyle @ react-dom.development.js:6373
setValueForStyles @ react-dom.development.js:6430
setInitialDOMProperties @ react-dom.development.js:7556
setInitialProperties @ react-dom.development.js:7768
finalizeInitialChildren @ react-dom.development.js:8755
completeWork @ react-dom.development.js:16907
completeUnitOfWork @ react-dom.development.js:19142
performUnitOfWork @ react-dom.development.js:19340
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
batchedUpdates$1 @ react-dom.development.js:20443
notify @ zoomus-websdk.umd.min.js:2
t.notifyNestedSubs @ zoomus-websdk.umd.min.js:2
n.notifySubscribers @ zoomus-websdk.umd.min.js:2
t.handleChangeWrapper @ zoomus-websdk.umd.min.js:2
dispatch @ createStore.js:173
(anonymous) @ index.js:14
dispatch @ applyMiddleware.js:35
ne @ zoomus-websdk.umd.min.js:2
(anonymous) @ zoomus-websdk.umd.min.js:2
(anonymous) @ index.js:11
value @ zoomus-websdk.umd.min.js:2
(anonymous) @ zoomus-websdk.umd.min.js:2
wrapFn @ zone-evergreen.js:1218
invokeTask @ zone-evergreen.js:399
runTask @ zone-evergreen.js:167
invokeTask @ zone-evergreen.js:480
invokeTask @ zone-evergreen.js:1621
globalZoneAwareCallback @ zone-evergreen.js:1647
Show 5 more frames
zoomus-websdk.umd.min.js:2 >>>>>>>>INIT JSMEDIASDK<<<<<<<<
app.component.ts:67 {method: "join", status: true, errorCode: 0, errorMessage: null, result: null}
zoomus-websdk.umd.min.js:2 >>>>>>>>INIT JSMEDIASDK<<<<<<<<
It works if I remove the div: <div id="zmmtg-root"></div> .
But the style doesn’t work:
1 Like
Hey @developer2,
I suggest keeping the styling to a minimum as styling is unsupported.
Thanks,
Tommy
@tommy. We want the UI to come exactly like zoom meeting, but it’s not happening. When audio/video is ON for 2 Participants or 4 Participants. The screen should split to show 2 or 4 windows…
Also if you see the recording video wrong window is coming not the the person who is speaking
1.36 hr onwards please check
Can you help ?
Can we add Attendee Profile Pic (We can send the image) in the Zoom Window (Profile) who have joined a meeting with or without Zoom Account?
Looking forward to your reply for the above questions
My first question was how can I have Gallery view by default for those with Audio ON ?
Hey @vijetha,
Currently the Web SDK does not support gallery view.
Also, you cannot update a users profile picture with the Web SDK.
Stay updated here for future Web SDK changes: https://marketplace.zoom.us/docs/changelog
Thanks,
Tommy
Using it in a react component but it shows only black screen and nothing happens.
These are two errors in the console.
]
> webim.min.js:1 Uncaught SyntaxError: Unexpected token ‘<’
> js_media.min.js:1 Uncaught SyntaxError: Unexpected token ’
<’
Version I am using is 1.7.6 and also noticed that there is no success callback or error call back on join meeting
Thanks @tommy
This CSS snippet is quite helpful but there is one problem when using this snippet the chat and manage participant section is broken. This is how the chat section looks like when clicking the chat option after meeting start.
1 Like
Hello Tommy,
We are trying to integrate zoom with our custom web application, using Zoom WebSDK 1.7.7
for webinars, For the attendee’s role, we are unable to view multiple panelists simultaneously or toggle between the panelist.
could you please let us know how to achieve this for attendees and also we need help to customize the video layout.
having this issue it seems to me that WebSDK is very primitive in terms of functionalities when compared to Zoom desktop client.
can you also send us the full list of limitations for WebSDK?
Hi i’m trying to integrate zoom web sdk in our application. so far everything works fine but side by side mode is not working properly. the active speaker section is in black color while sharing the screen
@tommy Hi Tommy, I’d be rather interested in this as well. Especially the full list of limitations compared to the desktop client.
Also it would be nice to know what the development roadmap is. I am CTO of the company I work for and need to report to my board what the benefits of using Zoom integration compared to other services are. It seems Zoom Web SDK is very limited in it’s functionality and it is starting to become hard to justify why I chose to use it compared to other cheaper but more functional services.
Thank you
1 Like