ugly.video: One-click Zoom meetings in the browser

Why is Zoom bad?

  1. Everyone is tired of holding meetings and taking classes over zoom calls. It's old and boring af.
  2. Slow meeting startup
    • Click meeting link
    • Browser asks to open link in Zoom app
    • Click 'Allow'
    • Desktop app takes a second to load
    • Click 'Join with computer audio' to finally start hearing feedback
  3. Not optimal for creating spontaneous hangout rooms with friends.
    • Unnecessary friction: why does it require 3 clicks to obtain the invite link???
      • Participants
      • Invite
      • Copy Invite Link
  4. Sharing images is tedious
    • Also lots of friction, have to send links over chat
    • Feels so disconnected when everyone views things at different times
    • Screensharing is a possible solution but also brings in more friction
      • How many times we all heard, "Hey @host, can you enable participant screensharing?"

How does ugly.video solve these issues?

  1. Chill aesthetic design
    • Comic Sans font :D
    • Surprise! button populates your whiteboard with memes
  2. For non-hosts: Clicking on a room link instantly places you into the meeting
    • Zero friction for entering meeting
    • No desktop apps to open: video streamed through browser
      • Also more secure
    • Automatically sets up your audio and video connection
    • Only 1 extra click needed if your camera/mic permissions aren't yet enabled
  3. For hosts: Instantly create a meeting by visiting https://ugly.video/
    • Button to copy meeting link is available immediately with 1 click
  4. Automatic whiteboard for drawing and sharing images
    • No friction for enabling whiteboards as the whiteboard is available by default

Note: Zoom is obviously a very well-made product, but there are many specific video conferencing use cases that could have significant improvements to UI/UX. Zoom is very optimized for business usage but there is a growing trend for more spontaneous and engaging forms of online socialization (i.e. Clubhouse). ugly.video is optimized to decrease friction in online meetings by minimizing click flows and promoting cheerfulness in it's design.

How I built it

WebRTC (Web Real Time Communication) is an open source standard that lets browsers communicate directly with one another. ugly.video takes advantage of WebRTC to stream video and send data between meeting participants without using a complex backend server. This also improves security and privacy for our users as they control who can view their data.

I used Peer.js (a wrapper library for WebRTC API's) to facilitate the connections between browsers. For the whiteboard, I used Fabric.js to easily interface with canvas elements.

Challenges we ran into

  1. The most challenging part was managing the connections between browsers that send video and whiteboard data. Each connection consists of an initiator and a recipient, and this requires us to deal with 4 possible scenarios:

    • Initiator sending data
    • Initiator receiving data
    • Recipient sending data
    • Recipient receiving data

    Mismanaging one of these scenarios was my most common logic error and took me a long time to initially debug because I had to walk through each line of code step by step.

  2. The second most challenging thing I had to overcome was reading through the Fabric.js documentation to figure out how their Path object was implemented. The path object is created whenever someone draws a line on the canvas/whiteboard, and I wanted to send data through WebRTC to the other meeting participants so they could reconstruct the path on their end. I had a weird bug where the data was being sent correctly but the reconstructed path wouldn't appear on the recipient's screen. This bug ended up taking me a while to fix because I had to dig into the Fabric.js source code to figure out exactly what was causing the error. Turns out I just needed to deconstruct the path data into a string format instead of in object format was being incorrectly analyzed by the Path constructor.

Accomplishments that we're proud of

The Surprise! button that populates your background with memes

What we learned

  • How to install Node.js and npm properly lol
  • WebRTC, Peer.js, and Fabric.js
  • Hosting an app on Google Cloud App Engine
  • Setting up domain names for our website through Google Domains

What's next for Ugly Video

I want to enable all content (video and images) to be moveable along the screen. Right now, the videos are shown in an adaptive grid and the images are dispersed randomly. The critical technical challenge will be how to most optimally transmit content updates to the other meeting participants in a way that reduces memory load.

+ 2 more
Share this project:

Updates