Inspiration
After nearly a year of lockdowns, we all feel at least a little isolated. That's why many people, including our team members, have been drawn to twitch and other streaming websites. Even though you might be alone in your room, there's a sense of community when you're able to interact with others. For instance, reading other people's comments in clips is always great.
Even though this is so enjoyable, this option doesn't exist on Netflix - one of the largest content providers, that all of us on the team use. Often we felt that after a good episode we'd want to share a love for a moment or read what others thought about a particular moment or episode but Netflix doesn't this sense of community. But not to fear, our team decided to make an app that fixes that.
What it does
Netflix and Chat is a Chrome extension that reorganizes your Netflix player to look more like twitch. This allows you to send messages and read comments by users at any moment you wish.** Even if no one is currently watching, you will experience all the comments left by people watching the episode, and be able to add your own.** They'll show up and go away depending on where you are in the video, with everything timestamped - no spoilers, no spam, no bugs, no problems!
That's just if you're playing alone. We do not only store legacy chats for all episodes, we also manage dynamic chat activity. Sync up with your friends, chat along, and see new messages pop up in real-time. All up to you!
Don't want to type? No problem! Turn on your microphone and activate voice recognition mode - we'll listen to your comments and post them directly! Just sit back, enjoy a chat, and speak freely.
We've also created designs for the complimentary app, with the backend ready to incorporate the merge. The app was unfortunately not finished in time, however, and will be created after the hackathon to complete the project!
How we built it
Lots and lots of JavaScript - also Python. We didn't use any of the category APIs (although we really wanted to, we just didn't end up needing them except for the app, which was not completed), and so everything was done from scratch!
The front end was managed in the usual Chrome extension framework, using HTML, CSS, and JS. We ran into difficulties adjusting and reading from Netflix's player, as they have preventative measures for some extensions (for example, if you share your screen on discord it will often be a black screen).
The JavaScript within the frontend was rather complicated, requiring us to use local sockets to communicate between multiple scripts. This was because we always had to keep the chat updated, even if they skipped or went back in time. Netflix did not make our job easy.
The Speech Recognition was done using inbuilt Chrome functions, as we trained the model to recognize advanced grammar.
To communicate with the backend, we used post and get requests from the clients.
The backend was done with Django (in Python) and hosted on Replit. Although we originally wanted to use Cockroach DB, we faced difficulties with the API as it seemed to stop working during the night, so we switched to Django's default, SQL.
Challenges we ran into
Testing our app proved very difficult, as we needed multiple people to have the same versions running at the same time to test the dynamic chat. Every extra debug would cost us time.
Another challenge we ran into was deploying the Django, which took us very long as we kept running into issues and ultimately settled on hosting the server on Replit.
Accomplishments that we're proud of
Overall, we're very proud of completing the goal we had in mind. Meeting and even exceeding expectations does not often happen in hackathons, especially online - but we feel as though we have learned a lot from this, on top of making the product we wanted. It looks nice, and it works smoothly. We're happy.
What we learned
We got exposed to many new things. Walking in, we all had minimal experience with Chrome extensions - and now we all understand their framework.
What's next for Netflix and Chat
We would like to finish the front end for the app (using react) to connect to our extension.
Log in or sign up for Devpost to join the conversation.