RTMP配信を複数のサービスに同時に配信できるデスクトップアプリをElectronで作りました。
厳密に言うと、RTMPの仕事をnginxにやらせるフロントエンドになっています。
解決したかった問題
- RTMPでの配信は一つのサービス宛にしか届けられないけど、配信サイトは沢山あって一つに絞れない
- 特定のサービスにロックインされたくない
- ロックインされたくない！
- ロックインされたくない！
- ロックインされたくない！
- nginxのrtmp-moduleを使うと一つのrtmpストリームを複数のサービスに分配してくれるけど、サービスを切り替えたりするのに逐一コンフィグを直接いじるのはちょっと面倒
解決策
nginxのrtmp-moduleを簡単に動かす事ができるフロントエンドを用意する
できること
動かし方は README.ja.md を参照ください。
技術的な諸々
ソースコードはMITライセンスで公開されています。
https://github.com/progre/nginx-rtmp-frontend/
nginxの操作
https://github.com/progre/nginx-rtmp-frontend/blob/master/src/service/nginx.ts
nodeのchild-processでnginxを非デーモンモードで立ち上げています。
設定ファイルはフロントエンド用のものを抱えていて、nginxインストール先はなるだけ汚さないようにしています。
設定ファイルの操作は nginx-conf を使っています。ちょっと癖のあるモジュールで、conf.die()せずにアプリを落とすとファイルを壊す事があります。。。
タスクバー作成
https://github.com/progre/nginx-rtmp-frontend/blob/master/src/ui/trayicon.ts
タスクトレイアイコンが超簡単に作れるのもElectronの魅力の一つだと思っています。
特に.NET FrameworkだとまともにAPIが提供されてない(※)のが辛かったですが、Electronだとあっという間です。
※Windows.Formsという古いGUIライブラリにしかない
多言語対応
https://github.com/progre/nginx-rtmp-frontend/blob/master/src/public/index.jade
https://github.com/progre/nginx-rtmp-frontend/blob/master/src/public/js/app.ts
レンダラープロセスの多言語対応は i18next を使用しています。
あまりパフォーマンスとか深く考えずに、jade側に .i18n-hogehoge ってクラスを書いておけばよろしく文言を当て込んでくれるようにjQueryに頑張らせています。
Electronでのログ出力
https://github.com/progre/nginx-rtmp-frontend/blob/master/src/index.ts
Electronのブラウザープロセスのconsole.logは文字化けしたりなんかうまいこと出してくれません。
log4js をコンソール出力モードにして使うといい感じにコンソールにログを出せました。
お手軽アプリアイコン作成
https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html
アイコンに時間をかけたくなかったので、Androidアプリ用アイコン作成のWebサービスでお手軽に作成しました。
マルチプラットフォーム自動パッケージ作成
https://github.com/progre/nginx-rtmp-frontend/blob/master/.travis.yml
Travis さんに一式作成をお願いしていますので、 release-it でバージョン更新＆タグ打ち＆pushしてほっとくとビシッとリリースバイナリを Releases に置いてくれます。
今後
- ブラウザープロセス側の多言語対応
忘れてた - HTMLのパーツの重複やjQueryのつらみがあるのでReactかAngular2を試す