Twilioブログ

ラズパイを使ってプラレールをシミュレータにしてみた

きっかけ

今年で3歳になる私の息子は電車が大大大好きです。
先月の誕生日に息子が大好きな大宮の鉄道博物館に行ってきました。
が、、コロナ対策で全部のシミュレータが営業停止になっていました。かわいそうに、彼の大好きな蒸気機関車も新幹線も通勤列車も運転ができなかったわけです。

不完全燃焼の彼を見て、私は思い立ちました。
よし、おうちシミュレータを作ってあげよう、と。

どうやって作ろう

先日行われたTwilio SIGNAL2020で発表されたTwilio Video WebRTC Goを使えばVideoチャットの部分は無料で実現できそうだなと思いました。
あとはどんなデバイスを使うかですが、ちょうど最近こちらの記事を見たのでラズパイ4を使ってみることにしました。

さぁ調達だ

ラズパイ

ラズパイを扱うのは初めてなので、どこから購入するのかなどを調べていたところ、以下の3つの選択肢がありました。

Amazonが最安のようですが、届いたラズパイが初期ロットで不具合が存在する型番だったという口コミもあったので、アールエスコンポーネンツから購入することにしました。

またRAMは4GBと8GBで悩みましたが、そこまで高性能のものにしてもしょうがないので4GBにしました。あわせて、カメラモジュールも購入しました。

ケース

ラズパイは4になって格段に性能があがったものの、それに伴い放熱対策が必須になったようです。今回はWebRTCを使うため放熱対策はしておくべきだと考え、ファン付きのケースを探しました。お手頃な値段でAC電源もついていたのでこちらにしました。なお、電源は5V/3Aもしくは5.1V/3Aのものを使う必要があります。

This product should only be connected to an external power supply rated at 5V/3A DC or 5.1V/ 3A DC minimum.
引用:Raspberry Pi 4 Product Brief

microSDカード

ラズパイはハードディスクやSSDではなく、microSDを記憶媒体として使っています。
OSのインストールにもmicroSDが必要ですので、PCから書き込みを行うカードリーダーと合わせて購入します。
microSDのRead/Write速度がラズパイの性能に直結するようです。とりあえず、A1(Application Performance Class 1)と記載されているmicroSDを選べば良いみたいなので、こちらのmicroSDと、あわせてカードリーダーも購入しました。

変換アダプター

ラズパイは4で映像出力がMicro HDMIになったようです。
私が愛用しているモニターには常時HDMIケーブルを接続しているので、こちらの変換アダプターを購入しました。

ケーブルと入力機器

必要なケーブル類(USB Type-Cケーブル、HDMIケーブル)と、入力機器(キーボード、マウス)は既に保有しているモノを使うことにします。

モバイルバッテリー

プラレールに搭載した際の電源を確保するため、5V/3Aに対応したモバイルバッテリーが必要です。少しオーバースペックですがこちらを購入しました。

Twilioアカウント

こちらでTwilioアカウントを作ります。
Twilio Video WebRTC Goは無料で使えるので、今回はトライアルアカウントのままでも大丈夫です。

プラレール

世間にはリチウムイオン電池を接続して、プラレールの操縦も遠隔操作している猛者がいらっしゃるようです。
しかし今回は、去年の誕生日に購入したE5系はやぶさコントロールセットを使用します。
ほら、かっこいい運転台があったほうがさまになるし、バックもできるし。

いくらかかった?

合計で¥18,425でした。意外とかかりましたね。。。

商品 税込価格 購入元
ラズパイ4本体 ¥6,549 RSコンポーネンツ
カメラモジュール ¥2,736 RSコンポーネンツ
ケース & AC電源 ¥2,059 Amazon
microSD ¥1,999 Amazon
SDカードリーダー ¥684 Amazon
Micro HDMI変換ケーブル ¥999 Amazon
モバイルバッテリー ¥3,399 Amazon
Twilioアカウント ¥0 KDDIウェブコミュニケーションズ

2時間格闘した結果の出来上がり

raspberry_pi_9

カメラモジュールの接続はこちらの記事を参考にさせていただきました。

Raspberry Pi OSをインストール

こちらの公式ドキュメントを参考にしつつ、Raspberry Pi OSイメージをRaspberry ImagerからmicroSDカードに書き込みます。あとはmicroSDをラズパイに差し込むだけです。とても簡単!

Videoアプリケーションを構築

Twilio公式のGitリポジトリを使って、Videoアプリケーションを構築します。
Twilioアカウントに紐づくサーバレス環境に構築するためどこからでもいいのですが、今回はせっかくなのでラズパイから操作します。

パッケージのインストール

パッケージ更新

パッケージ一覧とインストール済みパッケージを更新します。

pi@raspberrypi:~ $ sudo apt update
pi@raspberrypi:~ $ sudo apt upgrade

Node.jsをインストール

Twilio CLIのインストールやVideoアプリケーションのデプロイにnpmを使用するため、Node.jsをインストールします。

pi@raspberrypi:~ $ curl -sL https://deb.nodesource.com/setup_current.x | sudo bash -
pi@raspberrypi:~ $ sudo apt install nodejs

Twilio CLIをインストール

ラズパイにTwilio CLIが対応しているkeyringがなく、後のクレデンシャル情報の設定でエラーが発生するため、このタイミングで 'gnome-keyring' もインストールします。

pi@raspberrypi:~ $ sudo apt install gnome-keyring
pi@raspberrypi:~ $ sudo npm install -g twilio-cli

Twilio CLIの設定

Account SIDとAuth Tokenの取得

Twilioアカウントでログイン後、Account SIDとAuth Tokenをこちらから取得します。

クレデンシャル情報の設定

Twilio CLIのクレデンシャル情報を設定します。
'Account SID' 'Auth Token' を聞かれるので、それぞれ入力します。
'Shorthand identifier for your profile' には"Plarail Simulator"などの文字列を入力します。keyringのパスワード入力が求められます。

pi@raspberrypi:~ $ twilio login
You can find your Account SID and Auth Token at https://www.twilio.com/console
 » Your Auth Token will be used once to create an API Key for future CLI access to your Twilio Account or Subaccount, and then forgotten.
? The Account SID for your Twilio Account or Subaccount: ACxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
? Your Twilio Auth Token for your Twilio Account or Subaccount: [hidden]
? Shorthand identifier for your profile: Plarail Simulator
Created API Key SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx and stored the secret using libsecret. See: https://www.twilio.com/console/runtime/api-keys/SKxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
twilio-cli configuration saved to "/home/pi/.twilio-cli/config.json"
Saved Plarail Simulator.

Twilio CLI RTCプラグインのインストール

リアルタイムコミュニケーションアプリのデプロイ時に利用するプラグインをインストールします。

pi@raspberrypi:~ $ twilio plugins:install @twilio-labs/plugin-rtc

Videoアプリケーションの構築

リポジトリの取得

GitHubリポジトリをクローンします。

pi@raspberrypi:/usr $ chmod 777 /usr/src
pi@raspberrypi:/usr $ cd /usr/src
pi@raspberrypi:/usr/src $ git clone https://github.com/twilio/twilio-video-app-react

Videoアプリケーションのデプロイ

依存するパッケージをインストールし、Twilio CLIでVideoアプリケーションをデプロイします。デフォルトだと 'ROOM Type' が"group"なので"go"を指定します。

pi@raspberrypi:/usr/src $ cd twilio-video-app-react/
pi@raspberrypi:/usr/src/twilio-video-app-react $ npm install --production
pi@raspberrypi:/usr/src/twilio-video-app-react $ npm run deploy:twilio-cli -- --room-type=go

Videoアプリケーションに接続

ラズパイから接続

さぁ、ついにVideoアプリケーションが構築できました! デプロイが完了すると、'Web App URL''Passcode' が表示されるのでブラウザからアクセスします。以下のコマンドでも確認ができます。

pi@raspberrypi:/usr/src/twilio-video-app-react $ twilio rtc:apps:video:view

名前とルーム名を入力します。

join-the-room

 

次にカメラの使用を許可します。

join-camera

正しく映像が表示されました。

tadashii-eizou

 

スマホブラウザから接続

次に、シュミレータ画面代わりの私のおふるのスマホからChromeで接続してみます。

plarailsimulator-line

たしかにこれでVideoチャットは実現できましたが、これじゃない感…!!
横幅はまだしも縦幅の半分くらいがChromeのアドレスバーやメニューに占領されて画面がものすごく小さくなっています。

スマホアプリを構築

もうここまできたらスマホアプリも構築してしまいましょう。
Twilio公式のGitリポジトリを使って、Videoアプリを構築します。
ビルドである程度のメモリを使うので、手持ちのMacBook Proから行います。

Android Studioをインストール

Android Studioをインストールします。

Android Studioからスマホにデプロイ

'Get from Version Control' をクリック後、URLにGitリポジトリのURLを指定しCloneします。

raspberry_pi_5スマホをUSBでつなげると、上部メニューの 'Running devices' に端末名が表示されます(今回だと"Sony 701SO")。
デプロイ先の端末名を選択して、その右の▶」を押してデプロイします。スマホへのデプロイ方法はこちらに詳しく記載されています。

raspberry_pi_2

スマホアプリから接続

さぁ!今度はどうでしょうか。

Passcodeにはラズパイから接続で表示されていた数字を入力します。

 

motherman-login

ラズパイと同じルーム名を入れてJOINします。

moterman-plarail

すばらしい!!フルスクリーンでラズパイのカメラを表示することができました。

plarailsimulator

プラレールに搭載

ラズパイとモバイルバッテリーをプラレールに搭載します。
自宅には貨物列車セットがあったので、コンテナを外してそれぞれを輪ゴムで装着しました。

raspberry_pi_10

運転台はこんな感じです。

raspberry_pi_1

息子にお披露目

ついにお披露目です!
モバイルバッテリーが予想以上に重いので、先頭車をフル充電した電池に差し替えます。
重すぎて動かなかった時用に、貨物列車も待機。プラレールの世界でも貨物列車は少しパワフルな(気がする)んです。

モーターを唸らせながらもなんとか動いてくれました。
息子も「出発進行!次は品川〜」と言いながら大興奮!とても喜んでくれました!

raspberry_pi_11

彼が寝る前にお披露目したせいで、なかなか寝ついてくれませんでした。ごめん。。

まとめ

Twilio Video WebRTC Goは1:1の P2P だからか遅延が気になりませんでした。おかげで思った以上にしっかりしたシミュレータになりました。
というか、よくよく考えるとこれはシミュレータじゃなくて前面展望ですよね。まぁ喜んでくれたしいいか。
もし次を作る機会があれば、「軽量/小型化」と「セルフビューの非表示」にトライしたいと思います。

アプリケーションエンジニア 山田 雄翔
アプリケーションエンジニア 山田 雄翔

技術本部第二開発部所属。2017年からTwilioのテクニカルサポートやソリューションアーキテクトを担当。現在はレンタルサーバ 「CPI」に関するPJに従事。

CTA_まずはtwilioを使ってみる。

Share!!

この記事を読んだ人へのオススメ

  • お役立ち情報
  • イベント情報
  • 相談会申込
  • 導入事例