WebRTC(PeerJS)とPolymerを使ったデスクトップ画面共有アプリを作ってみた。

表題の通りですが、
WebRTC(PeerJS)とPolymer(全然凝ってないけど)を使ったデスクトップ画面共有アプリを作ってみました。

これで何ができるかっていうと、
画面上で起動しているアプリケーションをリアルタイムに画面共有ができます。

図. こんなイメージ。

共有する側(図の左側)はChrome拡張機能をインストールする必要があります。

これは、「Desktop Capture API」を使いたかった為です。
chrome.desktopCapture
⇒ https://developer.chrome.com/extensions/desktopCapture

共有を開始すると共有用URLが生成されるので、
こちらを閲覧する側(図の右側)に教えてGoogle ChromeでURLを開くだけでリアルタイムに操作内容が閲覧できます。
◆ Desktop Capture Share
http://screen-share.itinao.asia/

◆ Chrome拡張機能インストール
https://chrome.google.com/webstore/detail/desktop-capture-share/albmbgococdgmmoajacmcbfcidhbinlh

使った技術

Chrome拡張機能側
Knockout.js
⇒ 状態によって表示するものが切り替わるので、フレームワークを使用しました。
無くても書けましたがソースが汚くなっていくー。。って感じだったので導入。

共有されるURL側
Web Components(Polymer)
⇒ 試しに使ってみました。
peer-videoタグを作ったぐらいです。
（属性でホストとかURLを指定すれば勝手にシグナリングしてvideoタグで再生してくれるやつ。）

共通
WebRTC(PeerJS)
⇒ ほんと楽にシグナリングしてくれるんで便利。
（PeerJSサーバーも立てました。）

gulp
⇒ タスクランナーはgulpを使ってみました。
Polymerを使ったので、gulp-vulcanizeを導入してロードファイル数を下げてみる。とかやりました。

まとめ。