How to Add Voice Chat to Netflix Party

Jingchao Zhou
Jun 11, 2020 · 4 min read
Netflix Party Logo, Fair Use

Disclaimer: This tutorial is for demo purposes only, and it omits many complexities in a production-level feature.

After hours of using Netflix Party to watch shows together with your friends, you might find it distracting having to type your reactions in the side chat bar in the middle of some intense nerve-wracking scene. What if there’s a feature that lets you voice chat with your friends at the same time? Fortunately, with a little effort, you’re able to add this feature to the extension by yourself!

What is Netflix Party?

Netflix Party is a Chrome extension perfect for watching Netflix remotely with friends. It lets you sync your favorite Netflix shows so you can watch it at the same time as a group of friends and family. There’s also a group chat for real-time discussion; however, Netflix Party at the moment doesn’t support voice chat.

Downloading the source code

To get started, we need to download the source code of the Netflix Party Chrome extension. To do this, we first install an extension called the Chrome extension source viewer.

Then, navigate to the Netflix Party’s chrome extension page and click on the lighted-up CRX icon at the top right of the browser window. Next, download the source code folder as zip and unzip it.

Screenshot of the CRX icon

We’ll see a folder structure similar to the following.

oocalimimngaihdkbihfgmpkcpnmlaoa
├── _locales
├── _metadata
├── img
├── background.js
├── content_script.js
├── icon.png
├── iconx300.png
├── jquery.js
├── manifest.json
├── normalize.css
├── old_content_script.js
├── popup.css
├── popup.html
├── popup.js
└── README.md

Using Agora Web SDK

To be able to add the voice chat feature without implementing WebRTC protocol and setting up our own STUN and TURN servers, we need to use a 3rd-party SDK. For this, we can use Agora’s Web SDK NG since it offers 10,000 free minutes every month. First, let’s sign up for an account and login to the console page. Next, click on New Project under Projects and give our project a name. For demo purposes, we can select the APP ID option.

After the project is created, we can navigate to the Projects page and take note of the APP ID (to unhide the App ID, click on the eye icon).

Screenshot of Projects Page

Editing content_script.js

content_script.js is a file in the unzipped source code folder of the Netflix Party Chrome extension. To use the SDK, we need to copy the contents of the AgoraRTC_N-0.1.9.js file into content_script.js as shown below.

Then, we can start adding the code for our new voice chat feature. Let's define a new RTC Voice Chat section above the Main logic section in content_script.js.

Configurations

Now, we need to define some variables and configurations. Copy the following code below the RTC Voice Chat section and replace <YOUR_APP_ID> with the APP ID you obtained from the earlier step. The RTC_CHANNEL_NAME is arbitrary and can be anything name you like.

startCall()

We need to define a function to start the voice chat using the Agora SDK. First, we create an AgoraRTC client and request to join the channel. Then, we create an audio track from the audio captured by the microphone and publish it to the channel.

subscribeAudioCallback()

Next, we need a function to be able to listen to the audio of a remote user when they join the channel. To do this, we define a callback function that subscribes to the remote user using our RTC client and plays the remote audio track.

Unsubscribing audio tracks

Finally, we need to implement unsubscribeAudio() and unsubscribeAudioCallback() so that we can leave the channel when we leave the Netflix party.

Calling our functions

After we’ve defined our functions, we can call them at the appropriate places. First, search for the function popupInteraction add the following lines of code above initChat() at 2 locations.

startCall(userId);
rtc.client.on("user-published", subscribeAudioCallback);
rtc.client.on("user-left", unsubscribeAudioCallback);

The code snippet should look like this:

and this:

Finally, add unsubscribeAudio() under if (request.type === ‘leaveSession’) as such.

Congratulations, we’re done for the coding part! All that is left is to zip the source code folder and distribute it to your friends. To install this “enhanced” extension in chrome, visit chrome://extensions in your chrome browser and enable “Developer Mode” from the rightmost corner and then click on “Load Unpacked”. Select the source code folder from your file browser and use the extension as you normally would.

Final Words

I hope that you found this tutorial interesting and useful. Now, you can enjoy chatting with your buddies during any Netflix show! Last but not least, I would like to thank Netflix Party for making such an awesome extension and Agora.io for providing the SDK and network infrastructure.

Feel free to leave your comments below!

The Startup

Get smarter at building your thing. Join The Startup’s +724K followers.

Jingchao Zhou

Written by

LinkedIn: www.linkedin.com/in/jingchao-jason-zhou

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Jingchao Zhou

Written by

LinkedIn: www.linkedin.com/in/jingchao-jason-zhou

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +724K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store