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スマホだと自動再生できないらしいので、スマホ向けには同じような実装は多分できないと思います。

SkyWayの正式サービス化

9月7日にSkyWayが正式サービスになりましたね。

webrtc.ecl.ntt.com

 

私自身、2年近くトライアルで使わせて頂いてて、遂に来たかという想いです。
正式サービスといっても、個人での開発やOSSで展開するよう場合は、実質今まで通り無料で使わせて頂けるようです。

 

まずは NTT Communications さんに感謝です。


Community Editionの無料枠も大きくて、個人開発している分には困らないようなのですが、さらに接続/通信量制限がAPIキーごとのようです。これ、どういう事かと言うと、TK氏の「ユドナリウム」のようなOSSで公開されるWebサービスは、個人で別のWebサーバーに別のSkyWayのAPIキーを取得して構築する事ができます。事実上、無制限に使える感じではないでしょうか。

 

個人で別サーバーを建てるのは、面倒でコストが掛かるイメージがあると思いますが、TK氏のユドナリウムや私が開発中のサービスは、サーバー側の処理がありません。
正確には、通常は Webサーバー/Apサーバー/DBサーバーを使用すると思いますが、Webサーバーだけしか使用しません。作業的には、Webサーバーにプログラム(html/css/javascript等)をアップロードして、SkyWayのAPIキーを取得して設定するだけです。料金的には、Webサーバーだけあれば良いので、無料のサーバーを使えばタダです。

 

私の開発しているサービスのテスト環境も、無料のWebサーバーをかりてます。公開サーバーは独自ドメインを取得している為、多少掛かってますが、年間数千円程度です。さらに言えば、使用ユーザーが増えたとしても AP/DBサーバーが無いので、スケールアウトが必要になる可能性も低いんじゃないでしょうか。


また Enterprise Edition ができた事で、SkyWayを使ったビジネス提案がしやすくなったように思いました。料金は掛かりますが、NTT Communicationsさんのサポートが付くというのは話を進める上でかなり大きいです。

 

料金についても、高いように見えて良心的と思いました。自社でWebRTCサーバーを立てるより圧倒的にローコストで運用可能ですし。

 

ただ、使用料金の予測は難しいですね。
私も完全に理解できている訳ではないのですが、シグナリングはともかく、TRUNサーバーは必ず使うわけでは無くて、複数人の同時利用は単純な掛け算では無いですし。
シグナリングやTRUNについて理解してないと料金表が読めない部分もあるので、会社で偉い人に説明するのが難しい感じはします。


ともあれ、SkyWayが大きなプラットホームになる可能性を感じています。あとはSkyWayを使ったキラーアプリ(キラーサービス?)が登場すれば、一気に盛り上がるんじゃないかと思ってます。


私も、多くの人に使われるサービスを作りたいと頑張ってますので宜しくお願いします。(笑)

スクリーンシェア機能を実装しました。

先日公開したSkyBejeに、スクリーンシェア機能を実装しました。

iwatendo.hateblo.jp

スクリーンシェア機能を実装するにあたって、参考にさせて頂いたサイトです。
解説通りにやってみて、スムーズに実装できました。 

html5experts.jp

ウェブストアへの登録は、以下を参考にやってみました。

qiita.com

 こちらもスムーズに登録できました。デベロッパー登録の5ドルってどうやって払うのだろうか?と思ったのですが、クレジットカードで簡単に支払いできました。


登録したExtensionです。

chrome.google.com

 

f:id:iwatendo:20170817224830p:plain

 

Extensionを追加していない状態で、Skybejeの「スクリーンシェア」を選択すると、上記へのリンクが表示されるので、そこからExtensionを追加できます。

 

f:id:iwatendo:20170818055917p:plain

 

Extensionを追加した後は、以下のようなダイアログが表示され、スクリーンシェアが可能になります。

 

f:id:iwatendo:20170817225209p:plain

 

スクリーンシェアの解像度やフレームレートは、指定できるようにしました。色々と試してみた所、高解像度・高フレームレートは送信側/受信側、双方に高負荷がかかるようなので注意が必要です。

 

試しに「選択画面の解像度」「フレームレート=60」で、YouTube動画を再生している画面をスクリーンシェアしてみたところ・・

 

※検証に使わせて頂いたYouTube動画*1

www.youtube.com

 

スクリーンシェアをしているPCは第4世代のCore i7 ですが、接続者がいない状態でCPUの使用率が47%にもなりました。(もちろん他のプロセスも動いているので、全部がスクリーンシェアの処理では無いですが)

f:id:iwatendo:20170818144103p:plain

 

上記の状態で、2台のPCを接続してみたところ、8コア全てのCPUの使用率が100%になってしまいました。(1台だけだと70%程度でした)

 

f:id:iwatendo:20170818144433p:plain

 

受信している方のPCは、流石に高解像度/高フレームレート配信なので、画面は綺麗に表示されるのですが、接続した2台のPCのうち1台はそれほど性能が高くないPCでは、再生が追いつかずに表示が遅れていき、最後は止まってしまいました。(特にエラーが発生するわけでもなく、スクリーンシェアの画面の動きだけが止まります。チャット等は可能です)

 

せめて問題が発生した事を検知したいのですが、再生の遅れや停止を検出する手段が現状わからず・・・ちょっと悩んでます。


高フレームレートでの利用をできなくする事も考えたのですが、繋いでいるPCの数によっても負荷が増加するようなので、最大値をどれくらいにすれば良いか判断が難しいです。また、高スペックのPC同士の利用では、高フレームレートが使用できると嬉しいケースもあると思ったので、とりあえず注意の文言をいれて、後は自己責任で使ってねという方針にしました。(問題が発生するようであれば、調整を考えます)

 

他、これは画面の共有するだけで、音は配信されません。Chrome Extensionで対応する方法があれば実装したいのですが、方法は見つけれてません。

 

ちなみにYouTubeについては、同期再生させる実装を考えてます。
オンライン家庭教師的な用途にて、YouTube動画を使って説明しながら要所要所で再生を止めて説明する、、みたいな使い方ができればと考えてます。

*1:日食なつこ氏の「水流のロック」。この曲で私はファンになりました。

Webサービスを公開しました

自己紹介

岩手に住んでるアラフォープログラマです。
SkyBejeというWebRTC(SkyWay)を使ったサービスを開発しています。

SkyBejeについて

少人数向けですが、ブラウザのみでチャット+ライブキャストできるサービスです。アカウント登録やインストール作業が不用なので、気軽に利用できます。招待URLで接続するタイプのサービスです。
 

スクリーンショット

以下は、オフラインのオセロゲーム、スクリーンシェア機能でライブキャストしています。石を置く場所を皆で相談しながら、AIと対戦しているという状況です。

f:id:iwatendo:20170811133201p:plain

※ライブキャスト上にカーソルアイコン置けるので、それで石を置く位置を伝えてます。
※上記は「WZebra」という、かなり強いAIを搭載しているフリーソフトです。

実装した機能の一覧

・チャット機能 / ライブキャスト機能
・複数アイコン登録、複数アクター(アバター)の登録機能
・ライブキャスト上にカーソル表示できる機能
・スクリーンシェア機能(現在実装中、近日中に公開します)
Android端末のカメラやマイクを使ってのライブキャスト
・簡易BOT機能
音声認識での文字入力(Chromeのドラフト機能の為、将来的に使えなくなる可能性あり)

SkyBejeの利用用途

ゲーム(オンライン/オフライン問わず)を一緒に楽しむ場として利用する、創作活動の場として利用する、パソコンの操作説明やオンライン家庭教師的なサービスで利用する、などの使い方を想定しています。

※だたし、SkypeやLINEのような連絡する手段としては使えませんし、ニコニコ動画YouTubeライブのような大規模なライブ配信はできません。また、ユーザーの環境や使い方にもよりますが、大人数での利用はできません。(2~8人程度での利用を想定しています)

SkyBejeの特徴

SkyBejeは、外部のサーバーにデータを保存せずに、個々のブラウザのDB(IndexedDB)に各種データを保存します。また、ブラウザ上に擬似的なサーバーを立てて処理します。(これをSkyBejeではホームインスタンスと呼びます)

ホームインスタンスは、マストドンで言うインスタンスと同じようなものですが、外部のサーバー上に設置されるものではなく、ブラウザ上に小さなインスタンスを構築するイメージです。但し、ブラウザ上で動作しているのため、ブラウザを閉じると「ホームインスタンス」は消滅してしまいます。

ですが、自分の名前やアイコン等は、自分自身のブラウザのDB(IndexedDB)に保持するため、誰が立てたホームインスタンスであっても登録したアイコン等はそのまま使用できます。

GitHubWikiに、もう少し詳しい説明を書きました。
ホームインスタンスについて Architecture · iwatendo/skybeje Wiki · GitHub
セキュリティについて Security · iwatendo/skybeje Wiki · GitHub

 

アルファ版としてサービスを公開しました

実験的なサービスですが、よかったら試してみてください。
以下のURLから利用できます。(但し、Google Chrome専用です)

https://skybeje.net/

バグ報告や、ご意見やご要望等を歓迎します。

ただし、致命的な問題があった場合、機能を削除したり、DB構造(IndexedDBのデータ構造)を変更する可能性があります。登録したデータが利用できなくなる可能性もありますが、ご了承願います。

今後実装予定の機能

GitHubのIssueに登録してます。
発覚したバグ等も、ここに追加していきます。

Issues · iwatendo/skybeje · GitHub

 

 以下、SkyBejeの使い方について

トップページの「始める」ボタンを押すと、以下のようなページが表示されます。
f:id:iwatendo:20170811193456p:plain

 「ホームインスタンスの起動」を押す事で、ブラウザ上にインスタンスが起動します。

 

招待URLが表示されるので、招待したいメンバーにURLを伝えます。(後で伝えても良いですし、一人で試す場合は招待しなくても大丈夫です) 

f:id:iwatendo:20170811193500p:plain

ここはサーバー的な役割を果たしているページなので、あなた自身も「クライアント起動」ボタンを押してクライアントを起動させます。

 

サイドのメニューに「クライアント」が追加されて表示が切り替わります。招待されたメンバーも同じ画面が表示されます。(但し、招待された側は「ホーム」の表示がありません)
f:id:iwatendo:20170811193506p:plain

初回起動の場合、プロフィールの名前が「名前未設定」となっているので、左下の「プロフィール」ボタンを押して、表示名の変更やアイコンを登録します。

 

 

アイコンは何個でも登録でき、アイコンを切替えて発言する事ができます。*1

f:id:iwatendo:20170817221856p:plain

 

サイドのメニューから「ホーム」に戻ると、登録した名前が「エントランス」という枠内に表示されていると思います。(「エントランス」や「リビング」はルーム名称で、変更可能です)
f:id:iwatendo:20170811193533p:plain

誰がどの部屋にいるか、ここで確認できます。

 

招待されたメンバーが接続すると、ここに名前が追加されます。(接続したメンバーはエントランスに配置されます)

 

部屋は追加する事もできます。

f:id:iwatendo:20170817222019p:plain

ルーム内に表示されているメンバーは、ドラック&ドロップでルーム移動する事ができます。

 

f:id:iwatendo:20170811193544p:plain

チャットの内容は、同一ルーム内のメンバーにしか見えません。

 

 

最後に、ライブキャストについての説明をします。
一番下の真ん中あたりの「ライブキャスト」ボタンを押すと以下のようなダイアログが表示されます。

f:id:iwatendo:20170811193557p:plain

初回実行時は、カメラとマイクの使用許可の確認でると思うので必要に応じて許可を出してください(ライブキャストしない場合は拒否しても問題ないです。ただし、後で使用したいと思った場合には、サイトへのブロック設定を解除する必要があります)

 

使用するカメラとマイクを選択して「ライブキャスト」ボタンを押す事で配信開始されます。

※現状ではスクリーンシェア機能は未実装の為、仮想Webカメラ(NDC:ニコ生デスクトップキャプチャー)でデスクトップを表示しています。近日中にChrome Extensionを利用して、ブラウザのみでデスクトップの配信をできるようにする予定です)

 

プレビューの下のオプション「接続ユーザーのカーソル表示許可」にチェックをいれておくと、ライブキャスト上の画面をクリックする事により、自身のアイコンを配置する事ができます。このアイコンは他のメンバーからも見えます。 

f:id:iwatendo:20170811193609p:plain

複数人がライブキャストした場合、「ON AIR」のアイコンが増えるので、見たい人のアイコンを選択する事で表示が切り替わります。

※将来的には、複数人の表示もできるようにしたいと考えています。
※現バージョンでも、別窓でライブキャストを表示させる機能があり、それを利用すれば複数のライブキャストを同時に見ることは可能です。

 

その他、アンドロイド端末からも、ライブキャストする事が可能です。

「ライブキャスト」ボタンの右の「モバイル」ボタンを押すとQRコードが表示されます。 このQRコードをアンドロイド端末で読み込む事により、アンドロイド端末からもライブキャストをする事が可能です。

 

f:id:iwatendo:20170811193629p:plain

 

現段階では、アンドロイド端末のカメラとマイクを使ってライブキャストするだけですが、将来的にはもっとスマホタブレットと連動する機能を実装していきたいと考えています。*2*3

 

f:id:iwatendo:20170811193641p:plain

Nexus7(2013)を使用して、ライブキャストしています。

上記はこんな感じで写してます。
f:id:iwatendo:20170811193652p:plain

※アンドロイドのバージョンが古い場合、デバイスの切替ができない場合があるようです。デバイスを選択後「配信」→「停止」→「配信」とする事で動作するケースもあるようです。うまくいかない場合は試してみてください。

 

ちなみに「人狼」を置いているのは、このサービスを使って「人狼」をやってみたいと考えているためです。ゲーム進行手順は考える必要はありそうですが、参加者募って試してみたいと思っています。(テストも兼ねて)

 

最後に

説明していない機能についてや、今後実装したい機能についてなど、書きたい事がまだまだ沢山ありますが、機能追加や不具合修正をしながら、追々書いていきたいと思います。

最後まで読んで頂き、ありがとうございました。 

*1:ブラックジャックによろしく 佐藤秀峰氏の画像を使わせていただいてます

*2:現状iPhoneiPadには対応していません

*3:iOS11でSafariがWebRTCに対応するらしいので、iPhoneiPadからも利用できるようにしたいです