海外ストリーマーの間では少し前から流行っていたらしいのですが、
日本ではまだあまり情報が無いようなので、記事にまとめさせて頂きました。
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を使ってください！
※2022/3/9追記
最新のバージョンではエラーが出るようですので、
下記リンクからv12.15.0をインストールして進めてください(Windows)
https://nodejs.org/download/release/v12.15.0/node-v12.15.0-x64.msi
ソフトの起動
心拍数を受信する為のソフトウェアを起動します。
簡単に使えるようにアプリ化するつもりだったのですが、
諸事情により出来ませんでしたのでソースコードの配布になります。
↑の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に一苦労しましたがなんとか導入できました。ありがとうございます！
コメントありがとうございます✨
無事に導入できたとの事で安心しました😊
引き続きよろしくお願いします！🥺
初めまして！どうしても配信で心拍数をのせたくこちらの記事を参考にさせて頂きましたが、
つまずいてしまいご助言頂けないでしょうか？？
エラーが出てしまいどうしていいか分からずにいます。。。
npm ERR! code ENOENT
npm ERR! syscall open
npm ERR! path D:\\Pictures\Camera Roll\HeartBeats-master/package.json
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, open ‘D:\\Pictures\Camera Roll\HeartBeats-master\package.json’
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
始めまして！
cdは上手くできてますかね？
記事で言う所の、
＞cd ***で、先ほどGitHubからダウンロードしてきたフォルダに移動し
↑この部分です！
ログを見る限り、ダウンロードしてきたファイル（を解凍した場所が）写真フォルダになってますが、合ってますでしょうか？
ご確認いただけたらまたコメントで教えてください(^^)
初めまして。
手持ちのANT+デバイスで心拍数表示をしたくてこちらにたどり着きました。
躓きながらもStartHeatBeats.batを立ち上げて走らせるところまではできたのですが、心拍計との通信がうまくできていないのかデータを拾ってくれません。
情報を熟読したつもりなのですが、何度やってもダメです。
お力添えをいただきたく存じます。
コマンドプロントの表示は下記のままです
count: {}
beat: {}
timeout:
そしてタイムアウトすると下記のように表示されます。
C:\Users\Downloads\HB\HB>(node main.js )
Stick not found!
Stick open failed!
server listening. Port:1242
どうやらドングルが見えていないようなのですが、ZWIFTを使って心拍計とドングルが正常に通信できることは確認できています。
ZWIFTの設定時に邪魔なアプリがあってドングルが見えないということがあったのでそちらは停止、ZWIFTもアンインストールしてあります。
port
1242というのが気になるのですが・・・
ドングルのドライバーはZadigを使ってANT USB-ｍ Stickを選択、WinUSB(v6.1.7600.16385)にしてあります。
node v12.15.0
npm v8.19.1
です。
npmは、i -g npmでこのバージョン（最新？）になってしまいました。
因みに、プログラムはフォルダ内のStartHertBeats.batをクリックして走らせています。
また、走らせた直後（消えてしまうやつ）の表記は以下です。
C:\Users\senry\Downloads\HB\HB>color 2f
C:\Users\Downloads\HB\HB>for /L %n in (0 0 0
) do (node main.js )
C:\Users\Downloads\HB\HB>(node main.js )
Stick not found!
Stick open failed! s/task_queues.js:81:21) {
code: ‘EADDRINUSE’,
syscall: ‘listen’,
address: ‘::’,
port: 1242
当然ながら最初からドングルは見えていないようです。
以上なのですが、解決策が見当たりましたらご教授願います。
まぁさんこんにちは！
拝見したところ、仰る通りant-plusというライブラリがドングルを認識できていないようですね…。
念のためnpm update ant-plusでライブラリのアップデートをしていただき、、
念のためドングルの挿し直しとOSの再起動ぐらいしかパッと思いつく方法がなく、、
恐縮ですが、ご確認いただけますと幸いです！
じん様
素早いレスポンスありがとうございます。
早速試してみましたがやはりだめのようです。
C:\Users\ユーザー名>npm update ant-plus
と入力
up to date, audited 1 package in 213ms
found 0 vulnerabilities
と帰ってきました。
ドングルの抜き差し、PCの再起動もしてみましたが駄目でした。
上記コマンドの入力方法が間違っているということはありますでしょうか？
あ、すみません！StartHeatBeats.batのある階層までcdしてもらって上記コード入れて欲しいです！
もしくは↓こちらでお願いします！
npm update -g ant-plus
ただライブラリのアップデートが結構前から止まっているので期待は薄そうです、、
USBドライバーも問題なさそうですし、ant-plus(ライブラリ)が対応していないドングルという可能性があります…！
じん様
お世話になります。
以下の通りになりました。
C:\Users\ユーザー名\Downloads\HB\HB>npm update -g ant-plus
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE package: ‘node-gyp@9.1.0’,
npm WARN EBADENGINE required: { node: ‘^12.22 || ^14.13 || >=16’ },
npm WARN EBADENGINE current: { node: ‘v12.15.0’, npm: ‘8.19.1’ }
npm WARN EBADENGINE }
up to date, audited 212 packages in 1s
11 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
そして、やはりうまくいきません。
ドングルが対応していないということもあるのですか・・・
ガーミンの純正なんですけどねー。
とりあえず別のPCで試してみますので後日ご報告させていただきます。
じん様
お世話になっております。
その後、別のPCで試してみましたが同じ反応でした。
ので、ドングルを買い替えたところあっさりと動作してくれました。
どうやらライブラリが対応していなかったということのようです。
ガーミン純正の「105800」という型番のドングルです。
些細ですが情報としてお役立てください。
ところで心拍チャートの背景色を無色（透過）にすること、心拍数の上昇に伴う色の変化のしきい値を変えることはできますでしょうか？
もし可能でしたらご教授願えると幸いです。
追伸
ドングルをこちらのリンクから購入しようと思いましたがリンクが見当たりませんでしたので普通に買ってしまいました。
まぁさん、お返事が遅くなりすみません・・！
ライブラリが更新止まっているので非対応だったようですね、、情報ありがとうございます！
何とか無事に動いたようで安心しました・・！
＞心拍チャートの背景色
こちらですが、現状では透過されていない状態ということでしょうか？
OBSの心拍計を読み込んでいるブラウザのシーンの設定の、カスタムCSSというところに、初期から入っている、
body {background-color: rgba(0,0,0,0);}
↑こちらが入っていると自動で透過されているはずなのですが、念のためご確認いただけますでしょうか。
＞心拍数の上昇に伴う色の変化のしきい値
こちらですが、StartHeatBeats.batが入っているフォルダの「html」というフォルダの中の「js」というフォルダの中の「main.js」をテキストエディタで開いていただき、
23行目の
if(beat >= 100) $(‘#text’).css(‘color’,’#FF3333′);
ここの100という数字を変更すれば変わるはずです！
ちなみに#FF3333というのが変更後の色のカラーコードなので、書き換えれば任意の色に設定できます。
＞リンクが見当たりませんでした
こちらおそらく広告ブロッカー系が自動削除している可能性がありますが、
動作する商品を手に入れられたようですので問題ございません(^^)
ご連絡ありがとうございます。
引き続き、よろしくお願いいたします！
じん様
詳しい解説をありがとうございます。
背景色の件ですが、普通に透過になっておりました。
OBSの画面がごちゃごちゃしていたので勘違いだったようです。
おかげさまでやりたいことができそうなのでこれから活用させていただきます。
丁寧にご対応いただき、ありがとうございました。
よかったです！！
ご確認ありがとうございます😊
またご不明点あればいつでもコメントして下さい！