Electronで動画プレイヤー開発

by Yuta Imanishi

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

© DMM.com Electronとは 6 JavaScript、HTML、CSS でデスクトップアプリを作成できるフレームワーククロスプラットフォーム対応ができる中身はChromiumとNode.js Chrome(Chromium)対応だけで良いので、ブラウザ間の差分で苦しまずに済む一方でクロスプラットフォーム対応の際に、OS間の差分で割と苦しんだりする (MacとWindowsでのアプリ起動方式の違いなどなど…)

Slide 7

Slide 7 text

Slide 8

Slide 8 text

© DMM.com Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセスどんな感じで動いているか（ざっくり） • BrowserWindowインスタンスを作り、ウェブページを作成 • BrowserWindowインスタンスを破棄することでRendererプロセスを終了し、ウェブページを閉じる → 全ての作成されるウェブページと、対応するRendererプロセスを管理している (backend node.js のようなイメージ) 8

Slide 9

Slide 9 text

© DMM.com どんな感じで動いているか（ざっくり） Mainプロセス Renderer プロセス Renderer プロセス Renderer プロセス • BrowserWindowインスタンスを作り、ウェブページを作成 • BrowserWindowインスタンスを破棄することでRendererプロセスを終了し、ウェブページを閉じる → 全ての作成されるウェブページと、対応するRendererプロセスを管理している (backend node.js のようなイメージ) 9

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© DMM.com • on時に新しくウィンドウが開かれるタイミングは • 既に開いているウィンドウから「ファイルを開く」で複数選択した場合 • 関連付けをした状態で、動画ファイルを複数選択し、ダブルクリック • off時はこれまでのプレイヤーの機能を提供して、デグレーションが無いようにする • 共通して持つべきデータ(認証情報、同時再生機能等の設定情報)と、共通させないべきデータ(音量、再生速度など)がある 17

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

© DMM.com 同時再生設定はlocalstorageに入れちゃだめなぜか？ • localstorageはブラウザの持ち物であり、 Chromiumが立ち上がるまで、つまりrendererプロセスが立ち上がるまでは参照できないつまり、このままでは少なくとも1枚ウィンドウが開かれている状況でないと、設定をonにしていても同時再生できない… 関連付け再生を使っているユーザーにとっては致命的😢 28

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

© DMM.com • 配信基盤グループの活動についてもっと知りたければこちら https://inside.dmm.com/archive/category/配信基盤 • Electronでのプレイヤー開発についてもっと知りたければ特にこちら『Electron製動画再生プレイヤー「DMM Player v2」』 https://inside.dmm.com/entry/2020/02/06/evolving_content_delivery_platform _01 40

Slide 41

Slide 41 text