This post recounts the creation process of ugly.video, a browser based video conferencing app I created using WebRTC.
January
Earlier this year, I was browsing through Hacker News and came across an article announcing that WebRTC had become an official W3C and IETF standard. For those who've never heard of WebRTC, it's essentially an API that allows browsers to send data between each other in real time. I won't explain too much about how it works but you can learn more here. With TreeHacks coming up soon in February, I knew it was the perfect opportunity to experiment with the technology and try to create something useful with it.
February – TreeHacks
This event might've been the longest I've ever worked continuously on a single project. Starting from Saturday morning to Sunday noon, I slept a grand total of 1 hour right before judging began. I got started on the project by watching Youtube tutorials of how WebRTC worked and brainstorming what I could possibly implement in one weekend. I eventually found a library called Peer.js which is a really easy-to-use wrapper library for the WebRTC API. They even provide a public STUN server that helps you set up the initial browser-to-browser connection.
I started by creating a simple express app and then spent most of the hackathon fiddling around with Peer.js interactions and CSS minutiae until I had a working video calling app. A user visiting the site would see their video feed pop up; they could then send the link to their friends whose live video feed would also show up once they opened the link. The background also doubles as a whiteboard that's synced between the users. (Try it yourself here!) I ended up winning an iPad Pro and got an onsite interview after the hackathon.
March – Product Hunt Launch and Server Outage
I cleaned up some UI elements and decided to launch on Product Hunt. Ryan Hoover upvoted and commented on Twitter 🤯
Inexplicably, the app stopped working one day. Console log errors showed that the browsers weren't able to connect to each other. I hadn't really touched the backend code since TreeHacks, so I was super puzzled as to why this was happening. Turns out, the servers that hosted the public Peerjs STUN server burned down. WTF?! It felt like I had found that one missing semicolon except this was completely out of my control. Thankfully, Peerjs provides a custom image on Heroku so I immediately switched over to a self deployed STUN server.
Quick note on hosting: I hosted this as an express app on Google App Engine during the hackathon but that cost me $50/mo so I switched to Heroku which is just $7/mo for a hobby dyno.
Future Interests
Instead of using a wrapper library, I want to try working with the bare bones WebRTC API for my next project.
I also want to explore other use cases other than video conferencing (real-time multiplayer browser games?).
A key issue with ugly.video right now is that it doesn't work on networks with a firewall that blocks unverified UDP connections. I might try setting up a TURN server to fix this issue but it appears to cost a lot of $$$.