beraliv

Video player in Joyn

Joyn player page for TV series
Joyn player page for TV series

Joyn (previously 7TV) is German “Netflix” which has films, TV series and live TV

Did you hear anything about code obfuscation? Let’s have a look at Joyn video player and how they use that in production.

Scripts and modules

Let’s open any TV series and see what scripts are in Network panel of DevTools. There are scripts which are loaded from static.t1p-vod-playout-prod.aws.route71.net:

Joyn JS files in DevTools Network
Joyn JS files in DevTools Network
Joyn psf.json response body
Joyn psf.json response body
Joyn /beta request body
Joyn /beta request body
  • player-toolkit-loader.min.js – a simple loader which downloads players based on the player type (DASH, HLS, Tizen, WebOS and WebMAF), other scripts which are listed here (ad-tracker, ad-source-fetcher, playback-monitoring and player-heartbeat-producer), external scripts (e.g. iam from ioam.de), etc.
  • playback-monitoring.min.js, similar to player-heartbeat-producer.min.js, sends POST request method https://<hash>.cws.conviva.com/0/wsg periodically with important information about the playback for Conviva video analytics:
Joyn /wsg request body
Joyn /wsg request body

Obfuscation

I mentioned 5 files separately on purpose, as the structure of the files is different:

Joyn JS file structure after obfuscation
Joyn JS file structure after obfuscation

If you look for {"name": in playback-source-fetcher.min.js, you will find the entire package.json (caution: the file has almost 10K lines)

The entire package.json in playback-source-fetcher.min.js
The entire package.json in playback-source-fetcher.min.js

In dev dependencies you will find confusion — the library for code obfuscation. To analyse code better, I’ve written simple deobfuscation (opposite to obfuscation) library, which finds the array at the end of the file and places every string where it’s used. The source code is available at deconfusion

For instance, there are 2 small files in comparison after and before obfuscation:

2 small files in comparison after and before obfuscation
2 small files in comparison after and before obfuscation

So it really helps for:

  1. Code readability (better understanding)
  2. Easy debugging (you can use Charles, replace scripts and get better stack trace of loading and errors)
playerjavascript
Alexey Berezin profile image

Written by Alexey Berezin who loves London 🏴󠁧󠁢󠁥󠁮󠁧󠁿, players ⏯ and TypeScript Follow me on Twitter