心拍数を配信画面に載せる方法！！
海外ストリーマーの間では少し前から流行っていたらしいのですが、
日本ではまだあまり情報が無いようなので、記事にまとめさせて頂きました。
TL;DR(要約)
- ANT+対応ガジェットを使い心拍数をNode.jsに送信。
- Node.jsからHTMLで作ったフロントへSocket.ioで送信。
- OBSでHTMLを読み込んで画面に映す。
完成イメージ
イメージはあくまでも例で、ここで紹介する方法は、
心拍数を(アプリのキャプチャ等ではなく)数字として取得し、JavaScriptに渡す事が目的となります。
必要なもの
- ANT+に対応した心拍計(約8000円)
- ANT+に対応したドングル(約3000円)
- Windows PC(Macでも動くらしいが未検証)
- Node.jsの基礎知識（もしくは自己解決できる気合）
- 簡単なJavaScript+CSSを読み書きできると好ましい
ハードウェアの準備
一応、ぼくの環境で使用しているものを紹介しておきます。
（もしよければこちらのリンクから購入して下さると助かります。）
ANT+対応ドングル → AZ4U
ANT+対応心拍計 → iGPSPORT HR60
多分これら以外でもANT+の規格のものなら動きます。
特に心拍計はアームバンドタイプにこだわって探したのでこの商品にしましたが、
胸に巻くタイプなら安価で高精度のものがあるみたいです。
（ただ、取付が大変そうなのでどうしてもアームバンドタイプがよかった、、）
胸に巻くタイプのAmazonも貼っておきます。
ちなみに、うちの放送ではドングル1つで心拍計を2つ接続して使えています。
何個まで同時に使えるかはわかりません。。
セットアップ
まず、ANT+用のドングルをWindowsで使用する為のドライバーをインストールします。
（USBを挿しただけじゃ使えない。。）
ここからZadigというソフトをダウンロードします。
拡張子7zは7zipというソフトで解凍できます。
すみません、このソフトの使い方、かなりうろ覚えなので間違っているかもしれませんが、、
ドングルを繋いでZadigを起動させると、ANT USBStick2という項目が選べた？ので
Driverがlibusb0かnoneになっているので -> WinUSB?にしてReplace Driverを押してインストールする感じだったと思います。
とりあえずこれでドングルがWindowsで使えるようになっているはずです。
それからNode.jsをまだインストールしていない方は、
ここのサイトを参考にインストールして、コマンドプロンプトから実行できる状態にしておいてください。
ソフトの起動
心拍数を受信する為のソフトウェアを起動します。
簡単に使えるようにアプリ化するつもりだったのですが、
諸事情により出来ませんでしたのでソースコードの配布になります。
↑のGitHubをCloneしてお使い下さい。gitの使い方がわからない方は、
こんな感じでZIPでダウンロードして解凍しておいて下さい。
コマンドプロンプト or PowerShellを開き、
cd ***で、先ほどGitHubからダウンロードしてきたフォルダに移動し、
（コマンドプロンプトに限りドライブ間を跨ぐ時は/dが必要）
npm installを実行します。
（必要なモジュールを自動でダウンロードしてくれる）
心拍計の電源を入れます。
同封のStartHeatBeats.batを開きます。
(もしくはnode main.jsを実行します)
うまく動いていればこのような画面になるはずです。
count → 心拍計が正常に動いている限り数字が増えていきます。
beat → 実際に計測された心拍数です。
idというのは心拍計の端末に割り振られた固有IDです。
（複数端末を動かす時に必要になります）
心拍計本体と、受信機（ドングル）が離れてしまったり、
何かが原因で通信が途絶えた時に、うまく再接続されない場合があります。
countが10秒間増えなかった場合にタイムアウトしてソフトが再起動します。
（node.jsが自信をプロセスキル→batファイルがループで再起動）
コードに関して、、
全体的に動けばいいやの精神で書いているので今回は特に酷い出来になってます。ご了承ください。。
フロント側の動作テスト
先ほどGitHubからダウンロードしてきたフォルダのhtml/index.htmlを開いてください。
正しく動作していれば、以下のように表示されます。
配信ソフトに追加する
いま動作テストで開いたアドレスバーのURLをそのままコピーして、
OBSにブラウザとして追加します。
ローカルファイルのチェックは外してください。
（こうするとパラメーターを与えられる）
画像のように?chartColor=******で、チャートの色を変更できます。
他に対応しているパラメーターは、
id → 複数端末を自動で接続している時に、どの端末を表示するか指定する。
noChart → チャートを表示させない。
noHeart → ハートを表示させない。
パラメーターを複数設定するときは、2つ目からは?ではなく&を入れます。
index.html?chartColor=00c3ff&id=1234
こんな感じです。
次は高心拍数の時に画面全体が赤っぽくなる演出を追加します。
先ほどと同様に、OBSのブラウザソースとして、background.htmlを追加します。
画像はidを指定していますが、心拍計が一つだけならばパラメーターの指定は不要です。
これで全ての設定は完了です。
スクワットとかもしてみるとみるみるうちに心拍数が上がっていって真っ赤になっていくと思います。
おしまい
以上で解説は終了します。
Socket.ioサーバーはポートさえ開放すれば、誰とでも心拍数を共有することができます。
例えば、複数の配信者に心拍計をつけて、人狼みたいなゲームをやってみると面白そうですね。
