We were discussing how much we disliked Zoom University and the struggles we've had with it and then suddenly thought of the idea to make an app that would give online learning a more in-person feel. The place where people can interact most similarly to in-person is in small groups in Breakout Rooms. However, Breakout Rooms can often be intimidating, especially if you aren’t familiar with the people you’re grouped with and it also doesn’t allow for students to see what’s going on in the main room. So, what if we could optimize Breakout Rooms, like tables in the classroom?

What it does

Tables delivers an experience that more closely resembles what it would be like to be back in school in person by grouping up students into "tables" which simulate real-life classroom table groups and/or the people you sit next to in lecture/class. It allows for students to talk to and collaborate with each other over video call without interrupting the instructor’s lesson allowing for students to also have small personal side conversations. Teachers can still see all their students and give students permission to speak to the entire class through the “shout” function. Tables also allows for the instructor to “walk around the classroom” by hopping into each table’s room to check in on the group’s progress.

But also, unlike Zoom, Tables will optimally - not randomly - group people into Breakout Rooms.A Deep Learning model supporting Tables will optimally group people every time there’s a new meeting based on their history of switching tables.

How we built it

We built the video chat seen here using WebRTC and We were able to connect online using cloud node server hosted on heroku.

Unlike Zoom, Tables offers the option to easily change rooms. The initial Grouping algorithm to group people into Breakout Rooms is a small Collaborative Filtering Deep Learning model written in PyTorch and hosted on a Google Cloud Virtual Machine. We saved our model parameters on a Firestore database. Over time, as users select which groups they’d rather be in, the model learns which users prefer to be grouped together, so that the next time you join a meeting and need to be placed at a Table, you’ll be with the people you’re most comfortable with.

Challenges we ran into

We started by attempting to use the zoom API, but that failed miserably(you need to pay money). We then decided to build the video chat app from WebRTC, which is as low level as it gets. After deciding on WebRTC, we had to pick a framework to build it with. We started with react but realized quickly we needed more server-side support. We looked to Next.js as a logical next step, as it gave us easy access to API endpoints; however, the product was too restrictive for our needs. Since we needed full control over the server. We ended up downgrading to pure HTML, CSS, and Javascript to gain the most control over our code, before realizing that a sample program we found was built using EJS, a Javascript templating library. We mistakenly thought it was equivalent to HTML but we were very wrong. After fixing up the server-side to render our newly made EJS templates, we finally attempted the video chat integration (at this point more than half our time was gone). This was tough because none of us had experience with WebSockets or WebRTC, and the documentation online for the errors we came across was cryptic at best.

The biggest challenge with the DL model was getting it to update its weights when a user switched tables, as well as to update the Firestore database. We ended up having to navigate several bugs when the model was run on the Cloud VM that didn't appear on the local machine, including just part of the model updating.

Accomplishments that we're proud of

Creating a fully functional potential competitor to ZOOM. JK, but actually though, we were really excited about getting the video chat app up and functional. Setting up Firestore, after failing miserably with Flask, SQL, Cloud Storage Buckets, as well as finally get the model to update its weights in sync with a user changing tables.

What we learned

After strenuous hours of coding, we learned how to create a video chat and web applications using WebRTC and WebSockets, and learned the importance of choosing the correct platform to host our server.

What's next for Tables

We wanted to implement a shout feature where tables could speak to the entire class, but we didn’t get there in time. Other minor details like the mute button, chat features and leaving the call.

Integration with canvas, blackboard, and other online learning platforms.

Use of machine learning algorithms to place students in groups.

Built With

Share this project: