# [ugly.video](https://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](https://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](https://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](https://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](https://peerjs.com/) (a wrapper library for WebRTC API's) to facilitate the connections between browsers. For the whiteboard, I used [Fabric.js](http://fabricjs.com/) 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 dataMismanaging 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](http://fabricjs.com/) 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.
## Inspiration

✨ In a world that can sometimes feel overwhelmingly negative, we wanted to create an oasis of positivity. The inspiration for **harbor.ed** comes from the calming effect that the ocean and its inhabitants have on many people. As students, we often crave for the need to be cared for, and of course, habored. We envisioned a digital sanctuary where individuals could find comfort and companionship in the form of sea creatures, each with a unique personality designed to uplift and support. Especially to international students who may not have a chance to see their family for months at a time, it is often to feel lonely or sad with no one there to watch out for your feelings - Harbour.ed is your safe space:

## What it does

🌊 Harbor.ed is an interactive online space where individuals feeling down or distressed can find solace and encouragement. Users visit our website and choose from a variety of sea creatures to converse with. These friendly fishes engage in supportive dialogue, offering words of encouragement. Utilizing advanced emotion detection technology, our platform identifies when a user is particularly sad and prompts the sea creatures to provide extra comfort, ensuring a personalized and empathetic experience.

## How we built it

✨ Our project harnesses a diverse tech stack, as illustrated in the architecture diagram.
The client-side is supported by technologies like **React**, Sass, and JavaScript, ensuring a seamless and engaging user interface.
The server-side is bolstered by **Google Cloud** and **GoDaddy**, providing robust and scalable hosting solutions. We've leveraged **MongoDB Atlas** for our database needs, ensuring efficient data management.
The heart of Harbor.ed's empathetic interaction comes from the **OpenCV** and **AWS-powered** **emotion detection** and the innovative use of cohere APIs, which allow our sea creatures to respond intelligently to users' emotional states.

## Challenges we ran into

🌊 Integrating the emotion detection technology with real-time chat functionality posed a significant challenge. Ensuring user privacy while processing emotional data required careful planning and execution. Moreover, creating a diverse range of sea creature personalities that could appeal to different users was a complex task that demanded creativity and an understanding of psychological support principles. There were many things we ran into during both development and deployment, and being able to ship this project on time is a big accomplishment for us.

## Accomplishments that we're proud of

✨ We are particularly proud of creating an environment that not only recognizes emotions but responds in a comforting and supportive manner. Our success in integrating various technologies to create a seamless user experience is a testament to our team's dedication and technical prowess.

## What we learned

🌊 Throughout the development of harbor.ed, we learned the importance of interdisciplinary collaboration, combining elements of psychology, technology, and design. We also gained valuable insights into the technical aspects of real-time emotion detection and chatbot development. Many technologies like Langchain and OpenCV were also first time uses for some of our members, and seeing everything come together is extremely rewarding.

## What's next

✨ The future of harbor.ed is bright and bustling with potential. We plan to expand the range of sea creatures and personalities, improve our emotion detection algorithms for greater accuracy, and explore partnerships with mental health professionals to refine the support our digital creatures can provide. Our ultimate goal is to create a global community where everyone has access to a virtual sea of support.
## Inspiration

While we were doing preliminary research, we had found overwhelming amounts of evidence of mental health deterioration as a consequence of life-altering lockdown restrictions. Academic research has shown that adolescents depend on friendship to maintain a sense of self-worth and to manage anxiety and depression. Intimate exchanges and self-esteem support significantly increased long-term self worth and decreased depression.

While people do have virtual classes and social media, some still had trouble feeling close with anyone. This is because conventional forums and social media did not provide a safe space for conversation beyond the superficial. User research also revealed that friendships formed by physical proximity don't necessarily make people feel understood and resulted in feelings of loneliness anyway. Proximity friendships formed in virtual classes also felt shallow in the sense that it only lasted for the duration of the online class.

With this in mind, we wanted to create a platform that encouraged users to talk about their true feelings, and maximize the chance that the user would get heartfelt and intimate replies.

## What it does

Reach is an anonymous forum that is focused on providing a safe space for people to talk about their personal struggles. The anonymity encourages people to speak from the heart. Users can talk about their struggles and categorize them, making it easy for others in similar positions to find these posts and build a sense of closeness with the poster. People with similar struggles have a higher chance of truly understanding each other. Since ill-mannered users can exploit anonymity, there is a tone analyzer that will block posts and replies that contain mean-spirited content from being published while still letting posts of a venting nature through. There is also ReCAPTCHA to block bot spamming.

## How we built it

* Wireframing and Prototyping: Figma
* Backend: Java 11 with Spring Boot
* Database: PostgresSQL
* Frontend: Bootstrap
* External Integration: Recaptcha v3 and IBM Watson - Tone Analyzer
* Cloud: Heroku

## Challenges we ran into

We initially found it a bit difficult to come up with ideas for a solution to the problem of helping people communicate. A plan for a VR space for 'physical' chatting was also scrapped due to time constraints, as we didn't have enough time left to do it by the time we came up with the idea. We knew that forums were already common enough on the internet, so it took time to come up with a product strategy that differentiated us. (Also, time zone issues. The UXer is Australian. They took caffeine pills and still fell asleep.)

## Accomplishments that we're proud of

Finishing it on time, for starters. It felt like we had a bit of a scope problem at the start when deciding to make a functional forum with all these extra features, but I think we pulled it off. The UXer also iterated about 30 screens in total. The Figma file is *messy.*

## What we learned

As our first virtual hackathon, this has been a learning experience for remote collaborative work.
UXer: I feel like i've gotten better at speedrunning the UX process even quicker than before. It usually takes a while for me to get started on things. I'm also not quite familiar with code (I only know python), so watching the dev work and finding out what kind of things people can code was exciting to see.

# What's next for Reach

If this was a real project, we'd work on implementing VR features for those who missed certain physical spaces. We'd also try to work out improvements to moderation, and perhaps a voice chat for users who want to call.