Skyway Walkers

SkyWayを使ったサービスを個人開発しています

SkyWayを使ったYouTube同期再生処理を実装

開発中のチャットサービスに、YouTubeの同期再生機能を実装してみました。

 

f:id:iwatendo:20170913132349j:plain

YouTube同期再生のテスト動画。ちょっと暗くてわかりづらいですが、3台のPCをSkybejeで繋いでいます。左上の一番小さなYouTubeの画面の操作で、各PCのYouTube動画が連動して再生・停止・シークしています。

※テストに使わせて頂いた動画は、日食なつこさんの「水流のロック」です。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スマホだと自動再生できないらしいので、スマホ向けには同じような実装は多分できないと思います。