In this current age of video chat, virtually hanging with friends safely through Zoom and Google Meet means we're constantly reminded of school and work, and frankly, that kills our mood sometimes. That's why Breakout! is a simple but fun escapade from Zoom University that provides an unembellished video chat experience (but also can be used for work, if you wanted to).
What it does
Breakout! creates peer-to-peer video chat rooms that you and one other friend can enter. Simply create a room and send over the generated unique room key and once they join, you're good to go. Switch between a real-time whiteboard and downloadable notes, while chatting over video.
How we built it
Breakout! is built in React and does not require a backend. Instead, it uses PeerJS's provided host peer server as a broker to manage peer-to-peer connections. PeerJS serves as a wrapper to WebRTC, which provides the communication necessary to send information back and forth.
Challenges we ran into
A major challenge was with a weird issue with PeerJS being unable to send over blob or binary data and producing an error (that was unfortunately unresolved, as I found online). This meant that I could not have the users send over the video media stream directly and had to instead send over snapshots of converted base64 images, and continually play/update those images to simulate a video. Because this method requires more computational work being needed for the information transfer between users, I had to lower the quality of the image snapshots being sent over otherwise the latency would become unusable. This resulted in overall laggier video chats and lower quality resolution due to compensation on this part.
Being unfamiliar with how to use PeerJS and WebRTC along with accessing the camera and microphone meant that there was a lot of learning that also had to be done before I was able to even start getting code written. Due to my unfamiliarity with PeerJS and time constraints, I was only able to implement a one-way drawing board that only the host can edit (but still updates for the guest in real-time). Due to this same reason I wasn't able to implement a shared notes (similar to Google Docs) either.
Also, I have lots of schoolwork alongside the hackathon, so being able to balance a workload was also quite difficult and stressful.
Accomplishments that we're proud of
Having built a usable and self-contained web app in such a short duration is itself an accomplishment of its own. I'm glad that I'm able to persevere and troubleshoot even though we did get stuck on some infuriating and stressful problems. Even though the video is quite laggy and has a fair bit of latency, it still functions pretty decently.
What we learned
Learned how to use PeerJS and solidified React skills! I also better understand how PeerJS and other peer-to-peer services transmit data back and forth, code-wise.
What's next for Breakout!
- Optimizing and improving the speed and quality of the information transfer (especially the video chat)
- Overall, decrease video chat latency
- Safer and secure code, error handling
- Better written/refactored code
- Potential bug fixes
- Shared notes!
- Cool filters! (negative, ASCII, face filters)
- Two-way drawing canvas
- Better UI and design
- Group video chats (currently only supports one user)