Inspiration

I wanted to show anime clips to people and watch it with them in real time. I love getting their reactions to epic fight scenes and I now know exactly which scene they're reacting to.

What it does

Allows all users on the web app to watch and control the loaded video. Because all commands are synced up, what one user does will affect another users player.

How I built it

I learned about web sockets and found that socket.io was a good way to piggy back on the routing mechanism of node.js. After that, it was a matter of understanding the logic behind client and server interactions.

Challenges I ran into

All the syntax associated with HTML, CSS, JQuery, socket and node. I know it took longer than I expected because I wanted to get the features up and running so I read the minimum amount of information on official documentations to implement said features.

Accomplishments that I'm proud of

Understanding the event emits and listeners was an integral part of this project. In hindsight and like any learned experiences, the concept is not too difficult to grasp, but the eagerness to deploy something weakened my understanding of everything.

What I learned

Web sockets, node.js, express.js, youtube iframe api, HTML, CSS, Jquery

What's next for video_sync

Multiple rooms so users can privately watch videos with their friends.

Built With

Share this project:

Updates