kumatch’s silent blog

ほとんど書かないブログ

Twitchの配信をザッピングしながら視聴できるWebプレイヤー "tswitch" を作った

http://tswitch.herokuapp.com/

GW 中に思いついたので、ノリで作った。ソースはこちら

コンセプト

たのしい配信動画をもれなく俯瞰して観れるようにする。

実装について

技術的には大したことはしていなくて、使ったライブラリ/モジュールも React.js に Flux 部分は marty, JSX DOM の部分は react-jade, あとスクロールの制御が必要だったので react-scroll-components を使った。React.js を基にしたアプリを組む際の解決領域となりうるモジュールは日々洗練されて数も増えているので、自前で頑張らないといけないような箇所はほとんど無かった。

react-scroll-components によるスクロール制御というのを具体的に書くと、画面外にある Flash Player の再生を停止させるというもの。もともとのコンセプトがかなり富豪的であることは重々承知なものの、不必要な動画再生をし続けれるほどのリソースはクライアント、サーバともにないと思ったし無駄だろうと思った。eact-scroll-components ではスクロールし終わったタイミングを基に一定時間経過したら処理を行うみたいな機能が備わっていて今回のようなユースケースには最適だった。

Twitch API を叩くためのサーバアプリケーションを別途 express で。中身はほとんど何もしていなくて目的 API へのプロキシ程度のみ。

Flash Player を扱うための swfobject は実は初めて使ったので、Player インスタンスを使って再生状態を管理する方が地味に手こずったような気がする。

あとはスタイル(レイアウト)を思い通りのものにするため少し時間が必要だった。

実は最も時間が取られたのは、動作確認中に見るゲーム配信動画の内容が気になって見入ってしまったり、さらには配信に感化されてしまい実際にそのゲーム遊び始めてしまうというものだった。 Hearthstone はたのしい。 PC 版 GTA5 もやらなければ。(PS3 版でも遊んだけども)

ハマったところ

配信中の動画を対象にザッピングするにあたって、クリックした動画を「選択した」ということにして

  • ミュートを解除
  • 埋め込んでいる Player へのマウス操作を最初は全て無効に

とした上で、選択後は Player の操作含めて普通に扱えるみたいな感じにしようした。しかし Player を埋め込んだ上位 DOM 要素に対してのクリックイベントのハンドリングがブラウザ毎に異なり、かつ思い通りの操作ができなかった。

Player を埋め込んでいる DOM の1つ外の DOM に対して、

Chrome, Safari

mousedown, mouseup イベントは取れる。click は取れなかった。 イベントに対して preventDefault, stopPropagation を使って Player へのイベントを殺すことはできた。

Firefox

click, mousedown, mouseup 全てのイベントは取れる。 イベントに対して preventDefault, stopPropagation を使ってもイベントを殺すことができず、容赦なく Flash Playerの操作をしてしまう。 (埋め込み Twitch Player の仕様として、配信動画そのものをクリックするといきなり Twitch サイトへ飛ぶことになる。)

ブラウザ毎に使用感が違うことになるのでどうしようか迷ったものの、今の所はそこまでこだわるようなポイントでもないかなと思ってあっさり諦めることにした。

実装してみた上で残念だったところ

本当は 10 くらいの配信動画を並べてスイッチングできるみたいなのが理想だったが、うちの Macbook Pro では 6 つの配信でファンが唸りを上げて大変なことになるし、 PC ゲーム用途のための比較的 CPU & ビデオパワーのあるマシンでも 10 も並べるとかなり辛かった。Flash Player による再生を行っている以上、この辺りを解決するのは難しそう。仮にこれが HTML5 Player による HLS だとどの程度になるのかは気になるところ。

今後の拡張について

目的の配信のみを並べて視聴できるというのは欲しいような気がする。Twitch では配信者(Channel という)を自分のアカウント上で Follow しておいてマーク付けできる仕掛けになているのでそれを並べるという手段があるものの、そうなるとおそらく Twitch への認証 (OAuth) などが必要になってしまって唐突にガチなアプリになってしまう。(考慮点がいろいろと増える)

画面上の情報を自動リフレッシュしたりする仕掛けが欲しい。視聴中に別配信が始まって、そちらへスイッチするといった使い方ができるようになる。ただ実装するのであれば、配信の並び順が変わって、視聴している動画の位置が突然変わってしまうというようなことがないように対策する必要あり。

画面内に入った配信動画が自動プレイされるか否かをスイッチできるようにしたり、Player のサイズを変更(もっと細かく、あるいは選択中の動画を大きく)できるように。ただしサイズを小さくすると結果的に画面内に Player の数が増えることになり、前述したようにマシンが唸りをあげるようになってしまう。画面内に入りつつも配信動画をプレイにしないというのを組み合わせるとまだ回避できるものの、それだと「並べる」ことにさほど意味がなくなってしまう。

前述したスクロールによって画面外にいった際の Player の再生停止処理をほんの十数秒ほど遅らせてもいいかもしれない。

その他何かした際の挙動、UI 周りの調整はいろいろやりようはあると思う。

テストコードが必要。