SkyWayを使ったYouTube同期再生処理を実装
開発中のチャットサービスに、YouTubeの同期再生機能を実装してみました。
YouTube同期再生のテスト動画。ちょっと暗くてわかりづらいですが、3台のPCをSkybejeで繋いでいます。左上の一番小さなYouTubeの画面の操作で、各PCのYouTube動画が連動して再生・停止・シークしています。
YouTubeの同期再生テスト pic.twitter.com/g68k3zdLiF
— iwatendo (@iwatendo) 2017年9月14日
※テストに使わせて頂いた動画は、日食なつこさんの「水流のロック」です。YouTube動画の音は消してます。
チャット時のBGMとして利用したり、オンライン家庭教師等やオンラインサポートのようなサービスでYouTube動画を使って説明したり、友人が接続したときにMステの入場曲を流したりする用途に使用できればと思っています。
追記:YouTube Frame API は、基本的には商用利用禁止なようですね。
参考(YouTube商業利用のルール)
SkyWay + YouTube Player Api を使って実現してます。SkyWay(WebRTC)を使用するという事で、YouTube動画を再ストリーミングしている誤解する方もいるかもしれませんが、それぞれのクライアントが、YouTube動画サイトにアクセスしてます。再生する動画のURLや再生・停止情報をSkyWayのデータ通信で送り、疑似的に同期再生させています。
ざっくりとした処理の流れ
・親ダイアログで、YouTube Player APIを使ってYouTube動画のイベントを拾う。
・SkyWayのDataConnectionを使って上記のイベントデータをJSONデータで送る
・各クライアントで、YouTube Player APIを使って同じ動作をさせる
以下のようなYouTube動画の操作が同期できます。
・再生開始/停止
・再生位置の変更
・再生速度の変更
・ボリュームの変更(現状、Skybejeでは音量調整は未実装です)
まだまだ問題点も多く、うまく同期しない場合があります。現状、親フレームのイベントを拾って処理してますが、きっちりと実装する前に、どういった動作仕様にするか悩んでて保留にしています。動作仕様は3パターンくらい考えていて
(1)親のYouTubeフレームのでのみ操作可能、クライアント側は操作不可
・現状はこの実装です。
(2)親と全クライアントで操作可能にする。全ての操作を同期させる。
誰か一人が停止ボタン押した場合、全クライアントの再生が停止するイメージ
実装は面倒なのですが一応可能と考えています。エラー発生時の対応が難しそうですが・・。
(3)表示開始のみ行い、動画の操作は各クライアント側で独立させる。
クライアント側は、動画が勝手に再生されるけど、後は通常通り
使うシーンによっても違うと思うので、親ダイアログ側のオプションで指定する方向でも考えてますが、シンプルにもしたいんですよね。。
以下のサイトから個人で開発中のサービスを試せるので良かったら試してみてください。
https://skybeje.net/ (PCのGoogle Chrome専用サービスです)
※YouTube Player APIはスマホだと自動再生できないらしいので、スマホ向けには同じような実装は多分できないと思います。