Planetary Sterilization Pattern №5 or Mambo №5 ?

castLabs + Widevine CDM

Taking CastLabs Electron fork for a little joyride

As part of my Spotify Web Playback SDK — feat. Electron saga, in this second-part story I am going to take the CastLabs Electron fork for a spin, and see once and for all if I can use widevine CDM to playback encrypted content from Spotify’s Web Playback SDK.

Why do I want to do this? I find Spotify’s user interface and discovery experience lacking. If I’m paying to listen to music I want to be control of my experience — meaning I want better music browsing and information about the artists I’m interesting in, not to be dictated or recommended by a data-scientist trained Machine Learning algorithm what to listen to. If this doesn’t work I’m going to be pissed off, although I don’t know at who yet (Google, Spotify, Carole Baskin)? Also, any ideas on why The Romulans have *at least* 5 planet sterilization patterns? Did they went loose with Design Patterns as well?

So without further ado, time to roll my sleeves.

Ditching Stock Electron For castLabs Electron

First I removed the Git origin that comes with the Electron Quick Start and replace it with my own so both you and I can keep track of my code for future reference.

You’ll find the code over at https://github.com/callbackinsanity/Et-in-Electron-Ego-III.

The code from the first story is saved on the vanilla branch. I’ll be using the master branch for this story.

First stop, replacing

"devDependencies": {
"electron": "^8.2.5"
}

with

"dependencies": {
"electron": "https://github.com/castlabs/electron-releases#v8.2.5-wvvmp"
}

castLabs is tracking both 9.x and 8.x upstream Electron branches. While 9.x is the version featured in their master branch (the repo’s landing page), Electron 9.x is still in beta and the castLabs 8.x branch is still actively maintained with both branches updated 2 (9.x) and 13 days (8.x) ago respectively. Since I’m not using the beta 9.x version of Electron, I’m going to try and use 8.x (as noted above).

A quick npm install and now I have switched from vanilla to forked electron:

In my previous story I had added the --widevine-cdm-path and --widevine-cdm-version flags to my Electron launch procedure. Those flags attempted to use the widevine binaries distributed my pre-existing install of Google Chrome. As I’m now attempting to use the widevine binaries distributed by the castLabs Electron distribution, I’m going to remove those flags from my run.bat start up script (which is invoked by package.json via npm start ).

With that taken care of, I type npm start into my Windows cmd.exe shell and I get:

My Quick Start example is already wired to visit https://shaka-player-demo.appspot.com when it opens via mainWindow.loadURL on my example’s main.js :

Of the 5 manifests presented for playback on the Shaka Player demo, the example titled Sintel and sub-captioned: A Blender Foundation short film, protected by Widevine encryption; is self-explanatorily prepped to test whether widevine works or not.

Loaded with anticipation, I click Play and get:

It works !!!

A quick perusal at the developer console, and navigator.plugins shows an empty list:

A closer look at navigator.plugins:

This means that while some posts on the internet and in my previous story I was using this as a test to see if widevine CDM was loaded, this clearly shows that this is not a reliable marker.

However the widevine CDM encrypted content in Sintel is absolutely playing (both video and audio), so widevine is definitely lock and loaded in this Electron fork by castLabs, with minimal to almost no configuration.

There’s three other errors/warnings that pop up as well, but those are maybe/probably more related to the demo page itself:

  • index.js:78 It is recommended that a robustness level be specified.
  • Electron Security Warning (Insecure Content-Security-Policy)
  • main.js:1401 Uncaught TypeError: Cannot read property ‘severity’ of null

I think that that therefore it is safe to declare this one Electron distribution Mambo №5.

You can still read about my previous and ill-fated attempt at playing widevine CDM enabled using vanilla Electron in Spotify Web Playback SDK — feat. Electron.

The next step for me will be to integrate Spotify’s Web Playback SDK into my example. To do that you can click on the green button in that page titled get your web playback sdk access token:

When clicking the link, a prompt for authenticated users appears asking them to approve the requested API permissions:

At the bottom of the page the source code is refreshed to capture the newly created API access token.

To test the sample source code, I just paste into my Electron example’s index.html page. On the title of the Spotify.Player device created I modify it to castLabs Web Playback SDK Player so I can identify it easily in my Spotify desktop or web app:

const player = new Spotify.Player({
name: 'castLabs Web Playback SDK Player',
getOAuthToken: cb => { cb(token); }
});

Over at my main.js file I disable the Shaka Player example URL and re-enable loading the now updated index.html file:

I test the Spotify example by closing the and re-launching the Electron app. Electron launches but nothing shows up and upon inspecting the development tools console I see:

The Content Security Policies interfere with loading the Spotify Player SDK files.

I already know from my previous story that properly setting up the CSPs takes some effort, and its not a matter of whitelisting a single resource, but it requires whitelisting multiple third-party resources from Spotify, Google Analytics and any other parties Spotify invokes. So I’m just going to disable the CSP directive from my index.html for now. This is a development only app but using your app in production without CSPs might be reminiscent of running around New York without using a mask in the age of COVID-19.

After closing and relaunching Electron with the CSPs disabled I’m greeted by sunshine, happiness and the sound of birds singing in the background to the tune of Blue Skies feat. Isa Briones:

Ready with Device ID 4fb97c8490968f7e4a726ad3f32a425foobarbaz

.

Never saw things going so right

Now I have a shrink wrapped Electron distribution courtesy of castLabs and NPM that is able to provide:

  1. Reliable widevine CDM support; and,
  2. Reliable Spotify’s Playback SDK support.

I’m stoked. To verify that a successful connection to the Spotify Playback SDK is done, in addition to the Ready with device ID xyz message that pops up in Electron’s web development console, I can open my desktop Spotify client and verify the title of my device, in this case castLabs Web Playback SDK Player:

And so with that I leave you with the lyrics to Ella Fitzgerald’s Blue Skies:

Blue skies
Smiling at me
Nothing but blue skies
Do I see

Bluebirds
Singing a song
Nothing but bluebirds
All day long

Never saw the sun shining so bright
Never saw things going so right
Noticing the days hurrying by
When you’re in love, my how they fly

Blue days
All of them gone
Nothing but blue skies
From now on

I never saw the sun shining so bright
Never saw…

.

Thank you Isa Briones for your interpretation, I thought it was beautiful — and I hope to one day hear more singing from you. Also congrats on Picard’s season 2 renewal!

You’ll find the updated the source code for this story at callbackinsanity/Et-in-Electron-Ego-III.

This concludes this two-part series here on Callback Insanity about Electron, widevine, and Spotify’s Web Playback SDK. While the first part to the series was bumpy and almost hopeless at some point, I’m ecstatic that this second part has delivered a happy and satisfying ending.

For without pain, there can be no pleasure. Without sadness, there can be no happiness. Without misery there can be no beauty — Harlan Ellison

Organic, fair-sourced DevOps and Full-Stack things. This is a BYOB Establishment — Bring Your Own hipster Beard.

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