SkyBeje開発記

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)表示開始のみ行い、動画の操作は各クライアント側で独立させる。
  クライアント側は、動画が勝手に再生されるけど、後は通常通り

使うシーンによっても違うと思うので、親ダイアログ側のオプションで指定する方向でも考えてますが、シンプルにもしたいんですよね。。

 

他、簡易BOT的な機能も実装していて、特的のキーワードに反応してYouTube動画の再生が開始するような機能も実装中です。最終的には音声認識と組合せて「昇竜拳」「波動拳」とか叫ぶと、必殺技の動画が流れるような、某爆裂魔法の詠唱を噛まずに言えたら爆裂魔法が炸裂する動画が流れるような感じで、YouTube動画を遊びに使えるようにしたいですね。

 

以下のサイトから個人で開発中のサービスを試せるので良かったら試してみてください。

https://skybeje.net/ (PCのGoogle Chrome専用サービスです)


YouTube Player APIスマホだと自動再生できないらしいので、スマホ向けには同じような実装は多分できないと思います。