SkyBeje開発記

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:日食なつこ氏の「水流のロック」。この曲で私はファンになりました。