Display a snapshot of the video-chatting room

Meeting SDK Web
1

Hi,

I am considering using Zoom’s web SDKs to build a live streaming and video conferencing website. I am wondering whether I can display a snapshot of a streaming room. If so, how? Thanks!

2

Hi @liu550,

Could you elaborate on your use case for taking a snapshot of a streaming room?

Thanks

3

Hi Michael,

Thanks for your reply! The website is a online co-working/study platform, so a room is a virtual working/study space (imagine people with similar interests studying in the same room). I would like to take snapshots of each room (in this case a Zoom meeting room) and display them on the website to enhance user experience (suppose seeing people being studying vs. seeing only the links and descriptions of the rooms when on the website).

4

Also, to display snapshots of rooms and enable users to join them on my website, I need to store something like the id of a room into my database when it is created. Does Zoom provide any APIs that allow me to access this kind of data?

5

Hey @liu550,

You could enable live streaming of the study session, and then simply embed the live stream into your site.

Thanks,
Tommy

6

Hi Tommy thanks for the reply! I envision one-on-one meeting to be the majority of the use cases on the website. If the host (or the two people, in the case that it is a one-on-one study session) does choose to stream it, I want other users to have the options to either (1) join as a viewer (audio&video off) or (2) join as a guest (audio&video on), and the host can see the joining option when processing the request. Besides, once the user is admitted into the room, the host can turn on/off the user’s audio/video, effectively changing the user from a viewer to guest or a guest to viewer. It seems that the live streaming feature would only allow users to join as viewers and their audio/video cannot be turned on. Thus, I am wondering how the features I mentioned above can be achieved (last but not least, it would be better if, when the host is deciding whether to let a user in, placing the mouse pointer on the user’s Zoom profile leads the user’s profile on the website to pop up. I am not sure whether it is possible to do this level of customization with Zoom’s web SDKs).

Thank you so much for your patience! Look forward to your response!

7

Hey @liu550,

For the preview of the study room, you should use the livestream feature.

Then once the student chooses to enter the respective room, then you can have them join with the respective settings via the Web SDK.

Thanks,
Tommy

8

Thanks Tommy! Will try it later. Still have the following questions:

First a short description of the application scenario: The website matches people with similar interests. Once the match is done, a Zoom meeting room will be created and the two users will join the room.

I am a little bit confused by the meeting number, username, user email, and the password fields in the meetConfig object:

  1. Regarding the meeting number and password, how are they generated?

  2. Why is password required?

  3. Regarding username and user email, I remembered seeing that both the host and participants need to sign into their Zoom accounts to join a meeting room created by Zoom’s web SDKs. Is it correct?

  4. Are the “username” and “user email” fields of the meetConfig the same as the username and user email of the host’s Zoom account? Similarly, are the “username” and “user email” parameters of ZoomMtg.join() the same as the username and user email of the user’s (who is about to join a room) Zoom account. If so, how can I access the users’ account information to create a meetConfig and call ZoomMtg.init() or call ZoomMtg.join()?

  5. I am think about randomly select one of the users to be the host and prompt him/her to use his/her Zoom account to create a meetConfig object and then use the meetConfig to call ZoomMtg.init() and finally call ZoomMtg.join() for both users to achieve the feature. Similarly, if a user wants to enter a streaming room, he/she would click the snapshot, which would call ZoomMtg.join() to join the room. Is this the correct approach?

Thank you so much for your patience!

9

Hey @liu550,

They are generated by creating a meeting on the Zoom Web Portal / Client or via the API.

Password is not required for the Web SDK.

Not correct, no sign in or username and email is necessary when using Web SDK.

These fields can be set to anything you’d like.

Yes, but the host of the meeting has to be a user on the same Zoom account that the JWT App is apart of.

Thanks,
Tommy

10

Hi Tommy thank you so much for your reply! Still have the following questions:

  1. Regarding the previous question 1, is it right that the website can generate any random number as the meeting number to create a Zoom room? ,

  2. I thought that Zoom.init() was used to create a meeting room. However, in the index.js file of the sample-app-web on GitHub, Zoom.init() is called but we can only join an already existing room, which makes confused regarding how to create a room using web SDKs.

  3. Regarding the previous question 5, could you explain a bit more about your answer? Don’t other users have to join a room using the same API key and secret of my JWT app as well?

  4. It seems that to live stream a meeting on a custom URL, the host needs to go to Zoom account setting to configure the custom live stream. However, I am thinking about it having a “go live” button on the Zoom meeting room on my website so that with one click the meeting will be streamed on the web. I am wondering whether there is such a function in web SDKs that allows me to achieve this feature.

  5. Suppose the host does need to configure the custom live stream by themselves to start streaming. According to the instructions on Zoom Help Center (https://support.zoom.us/hc/en-us/articles/115001777826-Live-Streaming-Meetings-or-Webinars-Using-a-Custom-Service#h_62b792dc-3cf9-4b62-848d-93ee9e412a7c), the admin needs to allow the live streaming first. But in my case, how can I “allow” users to stream on my website?

  6. Suppose at the end users can stream their meetings on my website with just one click on “go live” button, I am still not sure how the html code of the page that displays the previews of those meeting rooms looks like, namely how to capture and arrange the previews (I guess I need to store the meeting number (or some other data about a room when it is generated) of a room and use it to retrieve stream via Zoom’s API). Do you have an example source code? Besides, according to your response, I need to use the livestream feature to display the previews of rooms and have users join the rooms via web SDKs, but I do not know how I can decouple capturing the previews of rooms only from the whole livestream feature (I want some customized functions/components and certainly Zoom’s SDK functions to be called/mounted once a user clicks the preview of a room, not just entering the room as the audience). For example, I know OpenTok (using WebRTC) has this function called getImgData to just capture the snapshot of a stream.

Thank you so much for your patience. Looking forward to your response!

11

Hey @liu550, happy to help!

Correct.

The meeting has to exist already. You can use the create meeting endpoint to create a meeting.

Yes, a signature still needs to be generated using your JWT credentials for uses to join the meetings.

Checkout the Live Stream API: https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetinglivestreamstatusupdate

https://marketplace.zoom.us/docs/api-reference/zoom-api/meetings/meetinglivestreamupdate

This would need to happen on your end with the live stream provider like facebook or youtube live. You’d embed that stream on your website.

Thanks,
Tommy

12

Hi Tommy thanks for the reply!

  1. According to the “Update Live Stream” and “Update Live Stream Status” sections in Zoom’s API Reference, it says that the host needs to have a Pro license in order to live stream the meeting on a custom website. However, last time you replied that to create a room using Zoom’s Web SDK a user does not need to sign in his/her Zoom account. How then can I achieve my envisioned “go live” feature through Zoom’s APIs? Should I have the website prompt the host to sign in their Zoom account in order to verify his/her account plan when he/she clicks the “go live” button?

  2. Regarding the previous last question, I am wondering if I can directly embed live streaming directly on my website without going through Youtube or Facebook. If so, how can I fetch the previews of streaming meeting rooms and display them on my site?

Thank you so much for your patience. Look forward to your response soon!

13

Hey @liu550,

The Zoom Web SDK and the Zoom API are different.

To call the Update Live Stream and Update Live Stream Status endpoints, you need to have a valid access_token or JWT Token.

You cannot do this without livestreaming, unless a user has joined the meeting, and you embed that stream via the Web SDK as the preview.

Thanks,
Tommy