Inspiration 🧠🌟

In the current scenario of COVID-19, everything has been shifting online slowly, so is our education system. Classes are now conducted online. The Inspiration for this project came from a problem that everyone faces while watching YouTube videos with your class friends or your group using the screen sharing feature of a video conferencing application (e.g. Google Meet, Zoom, etc.).

While watching YouTube video through a shared screen there are many problems that occur such as:

  1. The audio quality is either poor or or the audio is completely out of sync from what you are watching in that particular instance
  2. The video quality is poor or you can say its becomes just too laggy.

What it does 💻

To solve the problem WatchIt uses YouTube's API and the YouTube Embedded Player. In our app, you can create a room of any id you want and make your friends or other students to join the room. To join or create a room the app requires 3 inputs:

  1. Your Username which you want to use while joining.
  2. The Room Id: To create a room the user can input any desired ID and it will create a room with the ID the user have given.
  3. The Video URL: The has to provide the video URL that is going to be played in the room.

Now, let's take a look at what our application actually does. Based on the inputs provided by the user the user will get connected with a particular room. Each and every user has its own YouTube Embedded Player to play the video, so instead of a common player everyone have their own embedded player to view the video. As the video will be played directly using the YouTube's API on the respected users' device hence the quality of the video and audio depends on the internet connectivity of that particular user. Also, you can use the chat area to chat with your friends or other classmates. This web app can be used not only for educational purposes but also for entertainment purposes, like watching a movie together with your friends or family members. NOTE: Before playing the video every user in the room should check their individual controls to pause or play and adjust the timeline in sync.

How we built it 🛠

While we were attending the opening ceremony, we didn't have any clue like what we will create as project there was no such idea in our mind. We were watching the video together using Google Meet and faced the same problem quoted above. Earlier one day Bedant was just watching and reading docs related to the YouTube's Player API so he had some prior knowledge about that. We started just 1 hour after the opening ceremony and we were awake till like 7:00 am or something (we are from India) and were almost finished. The next day we tried to add some more features like add video conference in here too but ended up aborting the feature because of lots of error and were just focused on upgrading the UI and started working on the video.

Challenges we ran into 🤦‍♂️😶

The most difficult challenge was to use the YouTube API with React and we both were beginner in React. As in the YouTube API docs they are using it in HTML for example. But soon after we found out about two NPM packages that just changed the day. The react-youtube package helped a lot and it became much easier to do the rest of the remaining.

Also setting up WebRTC was too difficult that I almost ended up spending 5 hours solving the errors.

Accomplishments that we're proud of 😁🌟

We are really proud of what we had after 12 hours of the opening ceremony and we pushed it to GitHub right away then started further upgrades. We knew we are about to face more and more errors and if the app doesn't function accordingly even after removing the errors we are so done for.

What we learned 📚

We learned a lot about packages and how they really help to shorten your code and learned about socket.io and web sockets, how they work. Also about WebRTC while debugging the problems.

What's upcoming for Watch It 😁

We will keep on working on this project to add more features like now its just limited to YouTube content but we have thought to do something that users can binge watch other contents too like series, anime or movies.

Thank You!!

Built With

Share this project:

Updates