ElectronでWebRTCを使って鏡アプリを作って配布するまで



![スクリーンショット_2018_01_10_0_57.jpg](https://qiita-image-store.s3.amazonaws.com/0/59008/83b21d29-8009-19ed-c4ac-359c5ea6591b.jpeg "スクリーンショット_2018_01_10_0_57.jpg")


ダイソーで買った鏡が壊れた。買い換えようかなーと思ったけど、またすぐ壊れるしなんならパソコンのカメラを使えばいいじゃんと思った。ダイソーに行くのがめんどくさい。

パソコンのカメラを鏡代わりにするアプリなんていっぱいありそうだけど、Electron触ってみたかったので自分で作ることにした。カメラ起動するだけだしすぐにできそうだと思った。

実際やってみたけどものすごく簡単だった。


## 公式から落とす

公式
https://electronjs.org/

何を始めるのにもまずは公式サイトから。公式サイトにのっているとおりにコマンドを叩けばElectronがHello worldする。

本来始めるときは自分でpackage.jsを書いた方が良いと思うけど今回は簡易的に。


```
$ git clone https://github.com/electron/electron-quick-start
$ cd electron-quick-start
$ npm install && npm start

```

今回はWebRTCを使ってカメラを起動してそれを鏡代わりにするだけのアプリ。ソースはすべてgithubで公開してある。

https://github.com/megaya/pc_hand_mirror


## デバック

コメントアウトされているので、下記のコメント外すだけ。`npm start`で立ち上げ直すとchromeのデバックが開く。

```main.js
mainWindow.webContents.openDevTools()
```


## WebRTC

リアルタイムでビデオチャットするために使うのだけど、カメラの起動だけでも簡単に使える。

```index.html
<video id="video" ></video>
```

```index.js
var video = document.getElementById("video");

navigator.webkitGetUserMedia({video: true, audio: false}, _handleSuccess, _handleError);

function _handleSuccess(localMediaStream) {
  video.src = window.URL.createObjectURL(localMediaStream);
  video.play();
}

function _handleError() {
  alert("ERROR: カメラの使用を許可してください。");
}
```


`webkitGetUserMedia`でカメラを使えるようにする。音は必要ないのでaudioはfalseにしてある。

## 拡大とか明るさとかのつまみをつける

明るさは`-webkit-filter`の`brightness()`で調節。

Electronはnode.jsを使用しているので`require`や`exports`を使用してjsを呼び出す。もっと良い書き方あると思う。あと`index_js`という変数名は適当すぎたので直したい。

```index.js
var changeBrightness = function (val) {
  video.style.webkitFilter="brightness(" + val + ")";
};

module.exports.changeBrightness = changeBrightness;
```


```index.html
<input type="range" oninput="index_js.changeBrightness(this.valueAsNumber);" value="1" step="0.1" min="1" max="10">

<script>
  var index_js = require('./index.js');
</script>
```

ソースはほぼこんな感じで簡単に作った。調べてやってで3時間もかからないで出来た。改めてElectron簡単だ。


## パッケージ化

`electron-packager`というコマンドを使う。
https://github.com/electron-userland/electron-packager

### インストール

グローバルにインストールしちゃっていいと思う。


```
$ npm install electron-packager -g
```


### パッケージ化

```
$ electron-packager app/ app_name --platform=darwin,win32 --arch=all --version=1.7.10
```

引数は順番に下記のようになる

* 作成したアプリのディレクトリ
* 任意のアプリ名
* --platform=all, linux, win32, darwinのいずれか、もしくは複数
* --arch=all,ia32,x64のいずれか、もしくは複数
* --version=electronのバージョン

--platformのdarwinはmacのこと
--versionはelectronのリリースノートとか見て、それに合わせて記載する
https://github.com/electron/electron/releases

これらは必須オプションなので必ず記載する。めんどくさい場合は、package.jsonとかに書いておけば良いと思う。

よく使うオプションとして、デスクトップアプリのアイコンを変更したいときは、`--icon=./icon.icns`のように指定する

macはこれでおｋ
app_name.appが出来ているのでそれが起動できれば完成


### パッケージ化して容量を軽くする

asarというアーカイブすることができるツールがあると便利なので、事前にインストールをしておく。

```
$ npm install -g asar
```


そしてパッケージ化を行う。（下記はwindowsアプリの場合）

```
$ electron-packager app/ app_name --platform=win32 --arch=all --version=1.7.10 --icon=./pc_display_mirror/img/icon.ico 
```

実行すると`app_name-win32-x64`というようなディレクトリが出来ている。
dllファイルとかできているけど省略。

下記はwindowsの場合のディレクトリ構成だけど、macの場合もapp_name.appの配下に同じようなディレクトリ構成がある。

```
app_name-win32-x64/
├── LICENSE
├── LICENSES.chromium.html
├── node.dll
├── app_name
├── pdf_viewer_resources.pak
├── resources
├── snapshot_blob.bin
├── ucrtbase.dll
├── ui_resources_200_percent.pak
├── vcruntime140.dll
├── version
└── views_resources_200_percent.pak
```

app/を見ると今作っていたelectronのソースがそのまま入っている。これじゃ重いので圧縮する。

```
pc_display_mirror-win32-x64/resources/
├── app
├── default_app.asar
└── electron.asar
```

インストールしておいたコマンドを実行する。名前はapp.asarにしておいた方が良い。

Electronではresourcesに置かれたasarファイルを読むようになっており、一番名前が先頭にくるのが読まれるようだ。初期だとasarが他にないとdefault_app.asarが配置してあり、それが読み込まれるようになっている。

```
$ asar pack app_name/ ./app.asar
```

アーカイブ化したらapp/ディレクトリは削除しておく。配布のときに容量が重くなるから。
この状態でapp_name.execを実行するとアプリが起動するはず。

macの場合も同様にapp_name.app配下にresouceディレクトリがあるので、asarに置き換えて容量を軽くした方が良いと思う。

## 感想

簡単でよかったけど、容量がかなり重くなるんだなーと思った。
チュートリアル的にやったので次はちゃんとしたもの作りたい



## 参考URL

公式
https://electronjs.org/

Electronアプリのデバッグと、パッケージ化
http://www.buildinsider.net/enterprise/electron/05

Electronアプリをプロダクトとして「正しく」リリースするために必要な3つのこと
https://nulab-inc.com/ja/blog/typetalk/3-points-for-releasing-production-electron-app/


Electronでアプリケーションを作ってみよう
https://qiita.com/Quramy/items/a4be32769366cfe55778


オンラインでicoに変換できるサービス
https://iconverticons.com/online/


ElectronでMac用にビルドするときの署名方法
http://tmegos.hatenablog.jp/entry/2016/03/27/173258

Working with brightness
https://www.packtpub.com/mapt/book/application_development/9781783284450/5/ch05lvl1sec35/working-with-brightness