Hybridly

Summer Camp WebRTC challenge. The goal of this project is to create a Hybrid meetup platform with exchangable WebRTC provider.

Seeing how the communities across the world host their events, we see a variety of tools (Zoom, Meet, Gather Town) and others do it in person. These tools are made for meetings, not for events and lack the proper tools to account for questions and answers (without distractions), doing questions to the public as surveys and it's hard to do networking among others.

We want to gift the community a tool for hybrid events. Built by video-devs for video-devs 💚

Getting started

The frontend project is a React app using vite.

For the backend side, we are using Supabase for faster development. This tool offers a cloud-based solution or a self-hosted deployment. We recommend using the cloud-based solution to speed up the process.

To use Supabase, follow these steps:

1. Create an account in Supabase.
2. Create a new project.
3. Copy the project URL and anon API key and paste them in the VITE_SUPABASE_URL and VITE_SUPABASE_KEY variables respectively in the frontend/src/lib/constants.js file inside the React project.
4. For more details, refer to the getting started page from Supabase.

If you prefer to use the self-hosted solution, we recommend using the Docker proposal. Refer to the Supabase documentation for more information on how to do so.

To start the app, follow these steps:

1. Run npm install and npm start in the Frontend directory to launch the project.
2. In the frontend folder, create a .env file and set up the following environment variables:
   • VITE_SUPABASE_URL (as discussed above)
   • VITE_SUPABASE_KEY (as discussed above)
   • VITE_SUPABASE_FUNCTIONS_URL (as discussed above)
   • VITE_WEBRTC_PROVIDER_NAME - Name of the provider we are going to use.
   • VITE_DOLBY_API_KEY - Dolby API key, which can be obtained from here
3. Run the following command in the frontend folder: npm run start

Current status of the product

Currently, the product isn't completed. So far, we have added features for Mux and then pushed to have the same features with the Dolby WebRTC provider.

Feature	Mux	Dolby	Observations
ShareScreen	✅	❌	We tried to implement it in Dolby but couldn't make it, the progress made is on the implement-dolby-screen-share
Turn camera on/off	✅	✅
Turn microphone on/off	✅	✅
See remote participants in a call	✅	✅
Remove participant	✅	❌	Not implemented for Dolby
Mute participant	✅	❌	Not implemented for Dolby
Mute all users that aren't admin	✅	❌	Not implemented for Dolby
Show user that is speaking	✅	❌	Currently, Dolby.io doesn't have an event to detect when a user started speaking
Remove participant from a call	✅	❌	Not implemented for Dolby
Screen recording	❌	❌	We implemented the changes in Implement-Screen-Recording-using-JS-Library branch. The problem we had is that we couldn't find a way to record the audio of the local participant.

User roles

User roles are roles defined by the time the user was created, by that moment the user aquires the following rights for every room.

Permission	Admin	Regular Participant
Create, Edit, Remove Rooms	✅	❌
Kick Participants	✅	❌
Mute Participants	✅	❌
Mute All (Except Admins)	✅	❌

User permissions

During a call an admin can give permissions to Regular participants to do other stuff. This stage isn't completed but what we planned was to follow the following table.

Permission	Host	Presenter	Participant	Implemented
Share Screen	✅	✅	❌	✅
Mute Everyone	✅	❌	❌	❌
Kick participant	✅	❌	❌	❌
Mute a specific participant	✅	❌	❌	❌

AWS Deployment

We have a deployment on AWS in the Qualabs account with a domain created using Certificate Manager. Currently, it is disabled as the project is not active. If you want to enable it again, you need to access the CloudFront service, enable the distributions, and also activate the CodePipeline service, which is also disabled. To ask for access and permissions to the Qualabs AWS account, you can reach out to Maxi Pollinger, who can provide you with the necessary details.

Extra documentation

• Onboarding Hybridly here you'll find everything you need to know about Hybridly and how to get started.
• Minutas CleanCode here you'll find a summary of some chapters of Robert C Martin's Book Clean Code, this was read during the development of this project. The notes were taken in spanish since all of the developers in this project are spanish-speaking devs.