2019.05.14

【シンセ魔改造】仕事サボってバンド演奏しながら会社のミーティングに無理やり参加してみた【作り方編】

うこ

こんにちは、ものづくり担当うこです。
前回は、スタジオからなんとかオンラインミーティングに参加したのですが、当然ながらバレちゃいましたね……
しかし、新社会人も多いこの季節、同じような境遇に陥る若人も少なくないでしょう！！
というわけで、今回は市販のMIDIキーボードを使って、簡単にこの仕組みを自作する方法を解説します！

ハードウェア部分

必要なもの

Raspberry Pi 3B+
マイクロSDカード（8GB以上）
USB-MIDIキーボード
今回はKORG社のnanoKey2を使っていきますが、基本的には何でもOKです。
Raspberry Pi Camera Module

ハードウェアは特に作成する必要がなく、カメラモジュールを基板にとりつけ、USB-MIDIキーボードを接続するだけでOKです！
スタジオ編では、実際にYAMAHAのMIDIキーボードを分解して内部にRaspberry Piを組み込んだものを使用しました。余力がある方は試してみてください♪

ソフトウェアのインストールと設定

ここからは、すでにRaspberry PiへのOSインストールが完了していて、SSHなどを経由してターミナル操作ができる前提で解説してゆきます。
よくわからない、という方は、以下の記事の「2. ソフトウェアのインストールと設定」あたりを参照しながら、OSのインストールから始めてみてください。
【114106→ｱｲｼﾃﾙ】平成の最後に最新のWebRTCでポケベルをつくってみた【作り方編】 | dotstudio

映像のストリーミング

まず映像ストリーミングに必要なソフトウェアをインストールします。
gstreamerというストリーミングソフトウェアを使いますが、Raspberry Piへのインストールは少々複雑になります。以下をそのままコピペしてターミナルで実行してください。
$ sudo apt-get install libgstreamer1.0-0 gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly gstreamer1.0-libav gstreamer1.0-doc gstreamer1.0-tools gstreamer1.0-x gstreamer1.0-alsa gstreamer1.0-gl gstreamer1.0-gtk3 gstreamer1.0-qt5 gstreamer1.0-pulseaudio libgstreamer-plugins-base1.0-dev
（参考：GStreamer Installing on Linux）

上記のインストールが完了したら、次はラズパイカメラでgstreamerを扱うライブラリをインストールします。以下のコマンドを順番に実行してください。

$ cd ~/Documents
$ git clone https://github.com/thaytan/gst-rpicamsrc.git
$ cd gst-rpicamsrc/
$ ./autogen.sh --prefix=/usr --libdir=/usr/lib/arm-linux-gnueabihf/
$ make
$ sudo make install

MIDIキーボードをPythonから扱う

MIDIキーボードからの入力を取得できるPythonライブラリをインストールします。

$ sudo apt-get install libasound2-dev libjack-jackd2-dev
$ pip3 install mido python-rtmidi

プログラム部分の制作

MIDIキーボードの確認

必要なライブラリがインストールできたところで、まずはMIDIキーボードで2タッチ入力ができるか試してみましょう！
今回は、ソースコードが少し長いので、gitリポジトリからクローンします。
ディレクトリはあらかじめ適当なものを作成して移動するなどしておいてください。
$ git clone https://github.com/ukkz/skygate.git

このリポジトリには、今回使う「SkyWay」に関するモジュールが含まれていますので、開発者モードでインストールします。
$ pip3 install -e skygate/
$ sudo python3 skygate/setup.py develop

クローンとモジュールのインストールができたら、MIDIキーボードから2タッチ入力ができるサンプルを、Python3で実行してみましょう。
このサンプルでは、外部MIDIインターフェースからのMIDIメッセージを解析して押されている鍵盤を特定し、鍵盤に割り当てられた数字をもとにして2タッチ入力変換をするものになっています。
$ python3 skygate/2touch-input-by-midi.py

実行すると入力待ちになります。
上図を参考にして、”41128122##” と打ち込んでみてください。すると……

pi@raspberrypi:~ $ python3 skygate/2touch-input-by-midi.py
たいやき

このように表示されましたでしょうか？
“41128122” が、2タッチ入力では「たいやき」となり、また “##” が、ここでは「入力確定」の意味合いで使用するコマンドのようなものになっています。今回は、デバイス側からのメッセージ送信はこれを使って行いますのでぜひ覚えておいてください。

SkyWayを使ってラズパイとブラウザ間でビデオチャット

今回も、以前にポケベルを作成した記事と同様に、通信部分でSkyWayというWebRTCプラットホームを利用します。
本来WebRTCはP2P通信なので、サーバーは必要ありません。ただし、最初のノード間の情報交換（シグナリング）がかなり大変なので、このSkyWayのシステムを使って実現します。
また、WebRTCはもともとリッチなWebブラウザでしか動作しないものでしたが、ブラウザを介さずに動作させることのできる WebRTC Gateway というものが開発されていて、無償で利用することができます。
詳細は以下をご覧ください。
skyway/skyway-webrtc-gateway: Experimental WebRTC Gateway for SkyWay

SkyWayのアカウント作成とAPIキーの取得

新規登録 - SkyWay - Enterprise Cloud WebRTC Platform
上記のページの「Community Edition」にある「無料で新規登録」のボタンから、アカウントを新規に作成しましょう。

アカウントを作成したらログインして、上段の “Create new application” をクリックします。するとアプリケーション作成ページに飛びますので、以下のように入力します。

Application description: my midi chat client（一例。任意の名前でよいです）
Available domains: localhost, 127.0.0.1, ukkz.github.io

“ukkz.github.io” は、後ほどブラウザ上からビデオチャットを利用するときのための設定なので、一通り終わったら削除しておいて構いません。
入力完了したら緑色のCreateボタンをクリックして作成します。

作成後のページはこのように表示されているかと思います。
API Keyの欄に表示されている文字列をコピーしてどこかに控えておきましょう。

WebRTC Gatewayの取得と起動

Raspberry Piに戻り、以下のコマンドを実行して “WebRTC Gateway” をダウンロードします。
$ wget https://github.com/skyway/skyway-webrtc-gateway/releases/download/0.0.4/gateway_linux_arm

実行権限を付与してから、バックエンドで起動させます。
$ chmod +x gateway_linux_arm ; sudo ./gateway_linux_arm &

Raspberry Pi とブラウザ間で接続

以下のコマンドでサンプルスクリプトを実行します。
$ python3 skygate/sample.py keyboard xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

第1引数は「ピアID」といい、接続するデバイスに固有に割り振られるIDを自分で指定します。
今回は “keyboard” という値を使いましょう。
第2引数は「APIキー」です。先ほど取得した、ご自身のアプリのAPIキーを入力しましょう。

Peer created as keyboard: pt-529579b6-1b69-4f81-b213-3400d039a3da
以上のような結果が返ってきていれば、SkyWayと正常に接続しピアとして認識されています。

では次に、このRaspberry Piと通信したいPCのブラウザなどから、以下のURLを開きましょう。
SkyWay P2P Video & Text Chat

こちらはWeb側のチャット画面となるページですが、URLは以下のようになっています。
https://ukkz.github.io/skygate/web/?apikey=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

このうち、apikey=より右の部分を、ご自身で発行されたSkyWayのAPIキーに置き換えてもう一度アクセスしてみてください。

このような感じになっているかと思います。
このとき、Raspberry Pi側が正常にSkyWayに認識されていれば、左下のドロップダウンメニューに「keyboard」と表示が出ますので、その右横のcallボタンを押すと……

Raspberry Pi側からの映像が大きく映し出されていれば、問題なく接続されています！

ビデオチャットにMIDIメッセージングを組み込もう

ここまでくれば、あとはビデオチャットとテキストチャットを結合し、さらにMIDIキーボードの2タッチ入力でテキスト入力ができるようにすれば、「キーボードを弾きながらオンラインミーティングに参加できるマシン」のできあがりです！
こちらも、ソースコードが少し長くなるのでリポジトリの中にサンプルを置いておきました。これをそのまま利用してください。

$ python3 skygate/video-and-text-by-midi.py keyboard xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

こちらのコードでは先ほどのMIDIキーボードの2タッチ入力に加え、WebRTCで着信した相手に対してその入力テキストを送り返すようになっています。
これを実行すると、以下のようになります。

2タッチ入力で「おつかれさまです！」と入力したのですが、最後だけ間違えて「おつかれさまですW」になってしまいました……　慣れないと難しいですね。
このまま送信すると、ブラウザ側では以下のようになります。

ブラウザ側からも文字列が表示されました！
もちろん、返事をすることもできます。ここでは「進捗どう？」とブラウザ側から送りましたが、すでに表示されているとおり、Raspberry Pi側にもちゃんと送られていることが確認できます。

まとめ

WebRTCを使うと、映像・音声のようなメディアストリームのほか、バイナリにすることができるデータならなんでも送ることができます！　また、本来はWebブラウザ同士でしか使えなかったこの技術が、SkyWayのGatewayによってRaspberry PiのようなIoTデバイスでも実現できるようになったため、さらにものづくりの幅が広がります。少し難しいところもありますが、ぜひともWebRTCによる新しい可能性を感じていただければと思います。