【castlabs版Electron】サンプルアプリを作成する

動画配信サイトが著作権を守る仕組み

DRMという仕組みを用いて動画データを暗号化している。
Netflix、Amazon Primeなどでは、Widevineというソフトウェアを用いて暗号化を行っている。
主要ブラウザにはWidevineCDMという復号ツールがインストールされているため問題なく動画を市長できるが、
それ以外のブラウザではエラーメッセージが表示される。

自作ブラウザ(Electron)で配信サイトの動画を視聴するには

下記2つの条件を満たす必要がある。
1.Electronで作成したブラウザにWidevine CDMを導入する。
2.Electronで作成したブラウザについてVMP(Verified Media Path)を取得する。

ただし開発用途に限っては、1,2を満たすブラウザを作成できるcastlab版Electronが配布されている。*1
(WidevineがVMPの認可などを委託しているcastlabsという団体が提供)

castlab版Electronを用いたサンプルアプリの作成

npmをインストール

プロジェクトフォルダを作成(sampleとします)

プロジェクトフォルダにて下記を実行

npm init -y
npm install "https://github.com/castlabs/electron-releases#v11.0.0-wvvmp" --save-dev

エラーが出る場合はgitをインストールしてみてください。

package.jsonを修正

mainをsrc/index.jsに変更

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "git+https://github.com/castlabs/electron-releases.git#v11.0.0-wvvmp"
  }
}

プロジェクトフォルダにsrcフォルダを作成し、srcへ移動

mkdir src
cd src

index.jsを作成

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow()
  win.loadURL('https://shaka-player-demo.appspot.com/')
}

app.on('widevine-ready', createWindow)