Origin

My friends and I like watching videos together. But since we graduated high school and started college, we live in different states. Enter: TogetherTube.

TogetherTube was a website that allowed you to watch videos from YouTube, Vimeo, and DailyMotion, and listen to music from SoundCloud with other people over the internet, as if you were in the same room. Admittedly, it was missing some key quality-of-life features (some of which I implemented myself using a python script), but we loved TogetherTube because it just worked. You didn't need to sign up, you didn't need to think about how to navigate the interface, it just worked. It was clear that it was just made by some guy in his spare time, because it was moderately unreliable, and bugs were fairly frequent.

Now, I said TogetherTube "was," because it was merged with another site that did the same thing, except it was significantly worse and plastered with ads. Suddenly, my friends and I were unable to partake in our ritualistic late-night video watching sessions.

Motivation

When TogetherTube announced that it was shutting down, I didn't know anything about node.js, vue, or any of that. I was pretty sure I could re-make TogetherTube myself, but I thought it would be way to much effort for me, so I shelved the idea. Until I had my internship at IBM.

Over the Summer of 2019, I interned at IBM Corporate Headquarters in Armonk, NY for the GTS Innovation Team. It was pretty cool. It wasn't super development heavy, but that didn't prevent me from learning a lot. I learned how awesome it is to build modern web apps with only javascript, with Vue.js and Express.js, in particular. Around the end of July, I was completely convinced that remaking TogetherTube wouldn't be that hard.

Starting Development

The first thing I did was get WebSockets working. I knew that the way I implemented this was crucial to how everything else about the project would work. Once I was happy with that, the next thing I did was get video synchronization working. I started with just being able to play YouTube videos by inputting the URL. This was surprisingly easy. I was expecting it to take much longer to get synchronization to a reliable state. Within a week, I had a fairly robust prototype that had:

  • Play/pause and skip
  • A video queue
  • A dark theme (a must have for anything related to media consumption)
  • Synchronized playback position
  • A volume slider

I'm very proud of how quickly I pulled together this prototype. Soon after that, I began planning my next iteration, and continued to develop it.

Architecture

OpenTogetherTube has 2 main parts: the server, which is in node.js using Express, and the client, which uses Vue.

Server

The server is fairly straightforward. It runs an HTTP server that serves the Vue client, handles API requests, and accepts websocket connections to hand over to the room manager. As the name would suggest, the room manager manages rooms. It takes the websocket connections and associates them with the correct room, and it keeps track of the playback position, playback status, current video, and video queue for all the rooms. It also uses a database to persist permanent rooms across server restarts.

Client

The client is also pretty straightforward. It uses Vue. All of the video-related logic is handled by the server, so the client just provides an interface for the user to send API requests and websocket messages. It also handles page routing using the vue-router, so there's technically no load times when navigating pages after the first load.

Bringing On More People

I'm the Logistics Chair for the Software Engineering Club at Stevens, and each year or semester we work on a project together. Our last project didn't go so great because nobody actually cared about the project. I figured that it would be a great idea to use OpenTogetherTube as our project this year! I brought it up with the rest of the eboard, and they were totally on board. All I needed to do now was to prepare to "onboard" club members. I made a bunch of issues on github for everything that needed to be done, and put set up instructions in the readme. Now, we are a few weeks into school and this project is going great.

Conclusion

We have plans to expand the scope of OpenTogetherTube to match the original TogetherTube, and beyond. You can find the site deployed at https://opentogethertube.com