ラズベリーパイとATEM mini PRO
パンプキンパイとシナモンティー、のダジャレにしたかったんだけど思いつきませんでした。すみません。古すぎて意味不明ですね。
タイトル通り、ラズベリーパイ(Raspberry Pi)という小さなコンピュータと組み合わせて ATEM mini PRO を使いやすくする note です。シリーズ化希望。
やはりリモートでしょ
ATEM mini / PROのパネルは、これまでの放送・業務用のスイッチャーよりもちょっとポップでかわいいのですが(ちょっとLED明るすぎですがw)、スイッチャーの宿命で、どうしたっていろんなケーブルがつながってのたくってしまいます。
なので、自分で画面に出てしゃべりながらスイッチしたい場合も、ごちゃごちゃしたケーブルが画面に映るのはちょっと嫌かな、と思う向きもあるでしょう。また、セミナーなどで講演しながら自分でスイッチしたい時も、演壇までケーブル全部引っ張るのはたいへんです。
そんなあなたにぴったりなのが、小さなコンピュータ Raspberry Pi を使ったリモートコントロールサーバーです。
あれ?サーバー?あ、その説明はあとでまた。
用意するもの
・Raspberry Pi 3 以降(2でも動きますがWiFi使いたいなら3以上)
・Raspberry PIのOS・ファイルシステム用micro SDHC/SDXCカード - 32GBもあれば十分、ただClass 10以上の速いのがおすすめ
・LAN環境。ATEM mini PROはすでにLANに有線接続しているとします
・電源 - Raspberry Pi 3 までは microB のUSB電源(2A以上)。4はUSB-Cの電源(3.5A以上)。
・液晶モニター。できればタッチ式が便利。Raspberry Pi用にはタッチスクリーンがついた専用モニターがいっぱい出ています
以降通販リンクは個人的趣味で秋月電子(アフィリエイトやってーw)
上記はどっちでも。ただし4は結構発熱するので、放熱器があったほうがいいです。これがおすすめ
電源 4 用 -
と 3用 -
SDHC/SDXCはどこでも買えますよね。以上セットになっているこういうのもあります。全部新たに買うならまあお手軽かな。
液晶モニターの例として、
この辺かな。Amazonでもいっぱい出てきます。Raspberry Pi用かつタッチパネル内蔵、がいいと思います。
そのほか、USBキーボード・マウスが必要です。
まずラズパイを動かしてください
えーと、ググるといろいろ出てくると思いますし、↑を読んで、あ、できそう、と思った人はたぶんできるでしょうきっとw 特にトリックはありません。
で、起動したら、ネットにつながった状態で、"Terminal" を開いて、まずこのおまじない。
pi$ sudo apt update
pi$ sudo apt upgrade
うまくいきましたか?
このあと、液晶モニターとタッチパネルを動かすためにいろいろおまじないが必要かもしれません。基本的にそれぞれの製品のインストラクションに従ってください。ものによっては結構めんどくさくて挫折するかもですが、あきらめないで、頑張って!
live-contoller のインストールと設定
ここから、ATEM スイッチャー制御用のコントロールソフトウェアのインストールと設定です。
また Terminal から、以下のようにコマンドを打ち込みます。
pi$ sudo apt install nodejs npm -y
pi$ sudo npm install -g gulp bower coffee-script
いろいろメッセージがでてきて、かなり時間がかかりますが、ひたすら待ちます。で、
pi$ git clone https://github.com/applest/live-controller.git
pi$ cp config.json.sample config.json
ここで、自分のATEM miniのIPアドレスを調べます。PC/MacのATEM セットアップソフトウェアを立ち上げると、勝手に同じネットワーク上のATEM miniを探してくれて、見つけるはずです。で、config.json を書き換えます。適当なエディタで、
{
"switchers": [
{ "type": "atem", "addr": "172.16.0.101" } /** <--- ATEM mini のIPアドレス **/
],
"channels": [
{ "device": 0, "input": 1 },
{ "device": 0, "input": 2 },
{ "device": 0, "input": 3 },
{ "device": 0, "input": 4 },
{ "device": 0, "input": 5 }, /** この行削除 **/
{ "device": 0, "input": 6 }, /** この行削除 **/
{ "device": 0, "input": 7 }, /** この行削除 **/
{ "device": 0, "input": 8 }, /** この行削除 **/
{ "device": 0, "input": 9 }, /** この行削除 **/
{ "device": 0, "input": 10 }, /** この行削除 **/
{ "device": 0, "input": 3010 },
{ "device": 0, "input": 3020 }
]
}
の IP アドレスの部分を書き換え、「削除」と書いた行を削除します。
で、README.mdに従ってコンパイルします。
pi$ bower install
pi$ gulp
そして、実行。実行したあとは帰ってこないので慌てないで。
pi$ coffee server.coffee
そのまま、ラズパイ上のブラウザを開いて、以下のアドレスをアドレスバーに入力します。
http://localhost:8080/
そうすると、ほらこういう画面になるはずです。
あ、上のほうに時間とかが出ちゃいました?7インチならともかく、5インチだと邪魔なのであとで消しちゃいましょう。
ブラウザのアドレスバーやステータスバーが邪魔なら、キーボードの F11 を押して、全画面にしちゃいましょう。
サーバーってさっき言った?
そう、すでにお気づきの方多数だと思いますが、このプログラム本体は実はWebサーバーです。なので、本当はRasberry Piだけでなく、実行環境さえ整えればWindowsでもMacでも、もちろんLinuxマシンでも動きます。そして、インストールしたマシンのIPアドレスのポート8080をブラウザで開けば、この画面が出てきます(ファイアーウォールとかその辺は適切に設定してください)。
ちなみに、複数ブラウザで同時に開いても、どれを触ってもちゃんとほかの画面に反映されます。よくできてますねー。
ただATEM mini / PROはちっちゃいので、あちこち持ち歩いたりするかと思います。そんな時は、このラズベリーパイごと持ち歩けば、どこでもリモート操作ができるわけです。iPadとか、タッチできるデバイスからWebブラウザでアクセスするのがきっと便利でしょう。
Tips
5インチの液晶だと画面いっぱいいっぱいで、スクロールしないと触れないので、CSSをいじって時間とステータスのところを見えなくします。
src/scss/style.scssというファイルに、以下の記述を足します。
body {
margin-top: 3px;
background-color: #333;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAABIFJREFUeNrEWk1rGzEQXWuX0prQECcQYjAUFvbqs3NMfnz+QyDXQiBpaA+hPRhXMpIrT97MPKXQGhRJu/pYab7ezCR0XTfFMu52u67Uso2eyffyXS7zUpy1Fi37yu9NdYh/tqk1m83GUst26aP3pY4LPtTjUj/Xr6nIder58f232F7I57Itf2WP0ums27AooFBBXUPeYtVe5DIiqmscc7QGsQk8gEdu60OsD9P6HqsNFukACzxIFkLklqxRsdmDfK6tZY0F8/qOEeh86ncpBUtANXZkuaD+tllulN9LOnA+9YsmbPJ20Lj6eRmPFAKaV1MRUVb292uIU5/l9hkrtJ5MaVRA81hKozlB3MaLvBlNBSP50W5ZzOkR5czbBnIi5WWQgxHroPdoPCnMW+WA1iVM8d09EvoyZtD42vpAjRKIly3+1+aAfbcOlf/Ykc1ms8x8t9JkwtIyjC1h+b5x3aRNp4OM3N3dfapPe3t7e2ppLUQVC+oUG6TxvaatCHu13Rfl5CtPk7BwhrEpFvRpmMcZtKp9zn50CxtphxDrn5UC5vE3lNvn5UCsTHgHYICrZ+c6dtP4+5zrj7Gc5vbSA4kWSs7lKj+/sgQbUOboICHpaM0wKbr+Zyzfc/sro16lahXteV5/7sGd5+fnkN8tkCmgoHuhSqFMTRHvFhlgKN5N3lpyz8GD4B5I1CwtMnCmQTMQBeIUqfIHyxojy2v5Ih4CljbFWLeGMX0NTxT27wNaqPU25AfWxk+TO+25IqOTBuVLO8gbQrcshUpujCy2FzBg9spj95a7nodYubNwFfLEEiZjBbcea6lgw8eZNNUux82KeWc8MVYONLnQ5mqs7cjRkQgEJn6E5ODm5uY1CZkXB5P2RMqPxqZWfAvKLAshvBAQG/ph3NtGZHAc1/JCoP8RKI7MmJDJNrf8AOm/a2TXQqKIHbwoDFLp6dn19fVS04QjCjJ70T4POnhxMgcKja1RSai1LPCoxagYO+FpJU97WXZpYDZiLHyttTQoAVhvqrMB1fheBhyYgB9kh6enpwC1A6kEPEPGuMG1QfTYc5YbEN16lPHCqchHsVC0pyjMb9mfxrCYbDxX28zSVkZ0XVr9y9h/THXsniAEERi44IHKFtVqwXkUuMv9x7rWZG782+wU4m3P8jNF7HlpqfmAgtUSMkuojqC7YIt7Vp03tE+kRnwTMm1JtVlazDNujS7D2OIyBAbtahESLdvLQBwme5vCuEg20b4H9fuv/AZrfS0LYM19k0Ns/WcBFp6zGeDGtPgkFUpgsrmpXq/XvzS1ivIbKPiA1KyFnFFkv4qybOu1BtZlVUlahW8AS6zys1XsfrCsuZX08VLXB1dXE1SN56ubvc+qtrdQQXSLf2hC68mBlsc0XV0mD86ESKdpWuX+qhTWO2RVOtjf99M9J6fV1fWUxXuSSoFJcWkyY+EsLTuLWNBLuKJnUs6CyBteXVxcfDHy2n0JASH5QTZF8PwWpRs8h83735RDEFsTbMZAeinp6gK6ojKJ8Z2kuob5yrzfAgwASaYfY2UgQSYAAAAASUVORK5CYII=);
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',メイリオ,Meiryo,'MS Pゴシック',Osaka,sans-serif;
}
/** 以下を追加 **/
@media screen and (max-height: 600px) {
.topsection {
display:none;
}
}
/** ここまで **/
で、public/index.html というファイルで、最初のTRタグにCSSクラス名をたします。
<body ng-controller="MainCtrl">
<table>
<tr class="topsection"> /** <<<< class="topsection" を足す **/
<td class="box time">
<span>{{time}}</span>
</td>
<td>
<div class="status box float-left">
<p class="title">Status</p>
<div class="part">Server</div>
<div class="led green">Connection</div>
<div class="part">Switcher</div>
<div class="led green">ATEM</div>
</div>
</td>
</tr>
以上編集し終わったら、gulpを動かして再コンパイルし、サーバーを立ち上げます。これで、縦が600ピクセル以下の画面では、時間表示のところが消えるはずです。あ、サーバーの終了はCtrl-Cで。
現場で毎回ターミナル開いてサーバー起動して、てのが面倒だと思います。それを自動起動する方法もあります。これは、調べてみてください(あ、有料記事にしようかなw)。
またラズベリーパイ起動と同時にブラウザを全画面で開く方法もあります。これはさらに便利になります。この辺も調べてみてください(これも有料記事にするかもw)。
あ、一つ注意。Raspberry Piは小さくてもコンピュータなので、うかつに電源を落とすと、ファイルシステムが壊れて次回起動しなくなる可能性があります。必ずメニューからシャットダウンするか、ターミナルで
pi$ sudo halt
してから電源を抜いてください。大事な注意ですよ。この辺も、ラズパイが持っている GPIO というデジタルなインターフェースを使って、スイッチでオフとか、工夫してみてください。
やっぱり難しいや、という方々に...
もし希望者が多ければ、以上全部をキットにして提供しようかなと考えています。SNS上でコメントやメッセージ等いただければ考えますー。