海外ストリーマーの間では少し前から流行っていたらしいのですが、
日本ではまだあまり情報が無いようなので、記事にまとめさせて頂きました。
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をまだインストールしていない方は、
ここのサイトを参考にインストールして、コマンドプロンプトから実行できる状態にしておいてください。
Node.jsのバージョンですが、v12.15.0では動作確認されていますが、
バージョンによって正常に動かない場合があるようですので、不都合なければv12.15.0を使ってください！
ソフトの起動
心拍数を受信する為のソフトウェアを起動します。
簡単に使えるようにアプリ化するつもりだったのですが、
諸事情により出来ませんでしたのでソースコードの配布になります。
↑の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サーバーはポートさえ開放すれば、誰とでも心拍数を共有することができます。
例えば、複数の配信者に心拍計をつけて、人狼みたいなゲームをやってみると面白そうですね。
初めまして。非常に面白い試みだと思い、早速試してみました。
ANT＋に対応しているGarminのvivoactive3を持っているため、ドングルだけ購入すれば接続できるかと思いきや
どうしてもStartHeatBeatsが正常に起動しませんでした。
Zwiftでは心拍計としてANT＋を通して認識されます。この場合、どのように対処したらいいかご教示いただけますと幸いです。
どうぞよろしくお願いいたします。
コメントありがとうございます。返信が遅くなりまして申し訳ありません。
よろしければStartHeatBeatsを起動した時に表示される文字を教えていただけますか？
また、node.jsはインストール済みかと思いますので、コマンドプロンプト（もしくはpowershell）から、
githubから落としてきたmain.jsを実行してもらうことは可能でしょうか？
main.jsがあるディレクトリに移動して、「node main.js」で実行できます！
こちらもエラーメッセージが出たら、教えていただけると助かります！
初めまして。配信画面への心拍数の表示に関心があったため、色々調べていたらこの記事に興味を惹かれました。
記事内で紹介していたドングルとアームバンド型の心拍計を購入し、試してみたのですがStartHeatBeats.batを起動しても記事内の画像のようにならず正常に実行できません…
npm install を実行した際にエラーがいくつか表示されているのでそこが原因かと思うのですが…
その中に下記の表記があったのですがURL先が見つからない？ということでしょうか
prebuild-install http 404 https://github.com/tessel/node-usb/releases/download/v1.6.2/usb-v1.6.2-node-v83-win32-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found ～～以下略～～
もし、解決法がありましたらご教授ください。
こんにちは。コメントありがとうございます。
エラーを見る感じ、たしかにインストールに問題がありそうですね。
npmをアップデートして、npm installをやり直してみてもらえますか？
npmのアップデートは、「npm i -g npm」これでできます！
これでも尚エラーが出るようでしたら、お手数ですがnode.jsの入れ直し（もしくは別バージョンへの変更）をしてみて、再度試してみていただけますか？
一応いま試したところ、下記バージョンでのインストールではエラーが出ませんでした！
node v12.15.0
npm 6.14.8
また困ったことがあれば教えてください。よろしくお願いします！
ありがとうございます！
nodeとnpmのバージョンを教えてもらったものに合わせて手順を行ったところ、StartHeatBeatsが正常に起動し、idと心拍数が取得されていることを確認できました。
次にindex.htmlを確かめたのですが、ハートが点滅しているだけで数値の部分が「–」から動かないです…
何か考えられる原因はあるでしょうか？
ありがとうございます！
ひとまず心拍数の取得はできたようなので一安心です！
index.htmlをOBS等ではなく、Google Chromeで開いて、右クリック→検証→consoleのところにエラーが出ていると思いますので、どんなエラーか確認してもらえますか？
あと、次にやってみてもらいたいことが、
index.htmlを開いたブラウザのURLのところの最後を、「index.html?id=○○○」に変えてみてください！記事内のパラメータというやつです。
idは先ほど起動してもらったStartHeatBeatsの画面内に書いてある「id****」の数字部分です！
末尾にid=*****を入れてみましたが数値は反映されず…
検証→consoleにあったエラー内容です。長くなってしまいますがコピペします。
これ以降もエラーのログがあり、時間が経つと「Access to ～」「GET ～」ではじまるエラーが増えていくような状態です。
Access to XMLHttpRequest at ‘http://localhost:1242/socket.io/?EIO=3&transport=polling&t=Ng_UZ4W’ from origin ‘null’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
socket.io.js:7 GET http://localhost:1242/socket.io/?EIO=3&transport=polling&t=Ng_UZ4W net::ERR_FAILED
i.create @ socket.io.js:7
i @ socket.io.js:7
o.request @ socket.io.js:7
o.doPoll @ socket.io.js:7
r.poll @ socket.io.js:7
r.doOpen @ socket.io.js:7
r.open @ socket.io.js:7
r.open @ socket.io.js:7
r @ socket.io.js:6
r @ socket.io.js:6
r.open.r.connect @ socket.io.js:6
r @ socket.io.js:6
r @ socket.io.js:6
r @ socket.io.js:6
(anonymous) @ main.js?200403:2
DevTools failed to load source map: Could not load content for file:///C:/Users/*ユーザー名*/Desktop/HeartBeats-master/html/js/socket.io.js.map: System error: net::ERR_FILE_NOT_FOUND
また、よく見るとStartHeatBeats.batを起動した際、count:{“id0″:40,”id******”: ｶｳﾝﾄ値}というように「id0」が出てきていて、「id0」側の数値はカウントアップせず静止しています。ただしbeatの方には「id0」出てきていません。
htmlのパス末尾に、カウントアップしている方のid(おそらく心拍計)追記したので、これは問題ないとは思っているのですが…(自分でも把握してない危機が接続されているのか…)
なるほど状況把握しました！
CORSという別ドメイン間の通信を制限するルールによって通信ができていないようです。
いまGitHubのコードのアップデートをしたので再びダウンロードして、npm installをした上で同じように実行してみてください！
https://github.com/tokjin/HeartBeats
※もしまだエラーがでるようでしたら、
「npm install socket.io@2.4.1」を実行してから「StartHeatBeats」を開きなおして見てください！
（このアップデートで上のnode-usbの404問題も解決しました！）
通常通り npm install を実行したところエラーも無く、htmlの表示もきちんと心拍計の内容が反映されるようになりました！
丁寧な解説と対応で助かりました！本当にありがとうございます！
無事解決したようでなによりです！！
いえいえ！おかげさまでエラーの原因がわかりアップデートができました！こちらこそありがとうございましたー！！
どうしてもこちらのような表示をしてみたく、ずっと戦っているのですがどうしてもうまくいかず・・・
StartHeatBeats.batを起動するところで躓いております。
こちらを起動すると
Error: Cannot find module ‘express’
Require stack:
– C:\Users\user\Desktop\HeartBeats-master\HeartBeats-master\main.js
[90m at Function.Module._resolveFilename (internal/modules/cjs/loader.js:889:15)[39m
[90m at Function.Module._load (internal/modules/cjs/loader.js:745:27)[39m
[90m at Module.require (internal/modules/cjs/loader.js:961:19)[39m
[90m at require (internal/modules/cjs/helpers.js:92:18)[39m
at Object. (C:\Users\user\Desktop\HeartBeats-master\HeartBeats-master\main.js:1:17)
[90m at Module._compile (internal/modules/cjs/loader.js:1072:14)[39m
[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1101:10)[39m
[90m at Module.load (internal/modules/cjs/loader.js:937:32)[39m
[90m at Function.Module._load (internal/modules/cjs/loader.js:778:12)[39m
[90m at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)[39m {
code: [32m’MODULE_NOT_FOUND'[39m,
requireStack: [
[32m’C:\\Users\\user\\Desktop\\HeartBeats-master\\HeartBeats-master\\main.js'[39m
]
}
C:\Users\user\Desktop\HeartBeats-master\HeartBeats-master>(node main.js )
というエラーが出てしまいます・・・
expressが悪さをしているのかと色々調べてNodeでnode_modulesにパスを通すなどを見ましたがそれでもダメで(;_:)
htmlを開くと❤–のまま動かないという感じになります
もしよろしければ教えていただけると幸いです。すみません・・・
コメントありがとうございます😊
ぼくがわかることは最後までサポートしますのでご安心ください😊😊
さて、早速ですが、
おっしゃる通りexpressが見つからないことによるエラーのようですね！
コマンドプロンプトを立ち上げ、
cd C:\Users\user\Desktop\HeartBeats-master\HeartBeats-master
npm install express@4.17.1
こちらを実行してみてください！(いただいたエラーを元にしてますが、user名などはご自身の環境のものに変更くださいmm
その上で、StartHeatBeat.batを起動するとどうなるか教えていただきたいです(′▼`)
初めまして。
PCのマシンパワーをできるだけ割かずに表示してみたいなと思い、検索からたどり着きました！
無事OBSへオーバーレイ表示させることができたのですが、フォントファミリーを自分で変更するようなことは可能でしょうか？
今度配信で使わせて頂こうと思います！
ありがとうございます！
GitHubからダウンロードしてきたフォルダのhtml/css/style.cssをテキストエディタで開き(右クリック→編集)、15行目のfont-family: fantasy;と書いてありますので、fantasyをお好きなフォント名に書き換えてみてください(^^)
無事配信で使用できました！
ありがたく使わせて頂きます、カウントのラグもほぼなくて驚きました…
お返事遅くなり申し訳ないです、ありがとうございました！！
無事に使えたようで何よりです(^^)
また困ったことがあれば気軽に仰ってくださいー！
配信にひと工夫加えたいなと思ってこのブログに辿り着きました！
Node.jsに一苦労しましたがなんとか導入できました。ありがとうございます！
コメントありがとうございます✨
無事に導入できたとの事で安心しました😊
引き続きよろしくお願いします！🥺