React India is a community-led non-profit initiative with an international flavor. The first of its kind in India, the event consists of a workshop day and two days of talks. And this year(2022), it was Hybrid, meaning we had online workshops as well (after covid effects). I co-organized the conference and mainly worked on the website.

Conducting online workshops:

We had online workshops planned this year(2022) but did not plan how we would do that. I have some background with live conferencing systems and I know the pain of managing them under moderate load. So we knew hosting and managing conferencing software by ourselves is not a good idea, also considering we had less time to achieve this.

Choosing a managed conferencing service:

We decided to try out some managed services and found Dyte. Their tagline said "Dyte lets developers integrate branded, configurable, and programmable live audio & video with just a few lines of code" and they lived up to their tagline. We integrated the Dyte SDK in nearly a matter of time with very few lines of code after looking at it for the first time. Also, the Dyte team is just fantastic, they were always available when we needed them for something, though we did not need them much as the SDK docs and examples were so well done by them. We spent more time on how our UI would look rather than spending time on the integration.

But, we had a small problem:

Though everything was good, there was a problem, the default permissions allowed anyone to take control of the meeting, kick anyone out, and shut the meeting down, and this could be bad. Also, we just cannot restrict permissions as the same URL would be used by the speakers also to join and present their workshops.

Thankfully Dyte had a solution to this, Presets, which allow you to define roles for every individual, and that is what we wanted. So we defined 3 roles, Moderator, Speaker, and Participant where Moderator has permission for controlling the recordings, sessions, and participants, Speaker has control to present their screens, create polls, and control their audio/video, and the Participant has permission to view the conference and ask questions through chat.

But how do we bring this into practice we don't have any data about anyone who is entering, as it is just hosted on a URL, accessible by anyone. We had 3 different people/roles here, the Speaker, the Moderator, and the Participant. So we created 3 different URLs with a query param role which would either be moderator or speaker or participant, the participant being the default if not specified. Based on the role query parameter we would assign the Presets we configured in Dyte.

We created the speaker and moderator URLs with another query param checksum. Why? what if someone participant could just try appending the role param to the URL, you must never underestimate anyone :) I generated these checksums with a randomly generated key + the workshop id, which was only available on the server. We were using Nextjs to build our site, so we used Nextjs API routes to validate checksums on the server. If the checksum matches fail, we do nothing and instead redirect them to the workshop but with participant Preset, which has no rights. So now, no one can append a role param and try to enter anyhow.

Conclusion:

We finished the Dyte integration in just four days with doing other work, being excited, and packing our bags to go to Goa for the conference 🎉. As I mentioned that I had experience with live conferencing, I was skeptical if Dyte would ever perform well, with the audience, but it did. Their team has done an amazing job with the whole platform. This is us behind the scenes, seriously testing the Dyte integration on the React India website, making sure nothing breaks for anyone.

If you liked the blog post, share it with your friends.