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

0 件のコメント
表題の通りですが、
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を導入してロードファイル数を下げてみる。とかやりました。

まとめ。

これは、技術的にできるなーって思ってから1〜2日で動作の確認までできました。
見た目整えて、gulp走らせるようにして、、ってやってたら1週間以上かかってのリリースになりました。

あと、
RecordRTCを使って録画機能も付けてみようかなーと考え中です。

録画したWebMファイルを接続相手に送信。。なんてこともできちゃいますね!
なんか色々出来て面白い。

以上!

0 件のコメント :

コメントを投稿