Jet Brain Waves：Muse、JS、およびブラウザーに関するストーリー

数か月前、私はBluetoothをサポートするインテリジェントなEEGヘッドセットに出会い、すぐにいくつかの非常に興味深い分野でその可能性を見ました。 つまり、このヘッドセットとWeb Bluetoothを使用すると、脳をWebページに直接接続することができます。







EEG、または脳波記録は、脳の電気的活動を監視する方法です。 通常、脳波の研究では、いくつかの電極が頭の表面に配置され、脳に伴う電気現象を記録します。 登録結果は脳波の形で記録されます。 これらのデータを実験するというアイデアは、私にとって非常に興味深いものでした。 EEGは通常医療目的で使用されますが、脳の電気的活動に関するデータを使用する新しい方法を提供するプロジェクトが最近登場し始めています。



そのようなプロジェクトの1つがMuseです。 そのクリエーターは、瞑想を教えるシステムを約250ドルで販売しています。 Bluetoothをサポートする優れたEEGヘッドセットが含まれています。 ミューズは心を落ち着かせる方法を教えるべきでしたが、Webブラウザーでヘッドセットのデータを操作する方法に気付いた後に初めて心が落ち着きました。



（焦りすぎて見つけられない場合は、コードに直接アクセスできます）。



ヘッドセットは、AndroidおよびiOSのアプリケーションで動作します。 さらに、ヘッドセットから受信したデータに基づいて独自のアプリケーションを作成できるライブラリがあります。 ただし、ネイティブアプリケーションの開発にのみ適していて、そのソースコードは閉じられていました（その結果、思考の力でWebページを管理するという私の夢は、一見、不可能に思えました）。



ng-cruiseカンファレンスに到着したとき、 Alex Castilloに会いました。 彼は、OpenBCI EEGヘッドセットをどのようにAngularに接続したかについて話し、そこからの信号を視覚化しました。 このヘッドセットは、オープンハードウェアプロジェクトの一部として作成されました。 これらはすべて非常に印象的に見えましたが、ヘッドセットからのデータを操作するには、Node.jsとWebソケット上のサーバーに基づいたかなり複雑なシステムを使用する必要がありました。 そして、これは私が望んでいたものではありませんでした。 しかし、その後、夜のハッカソンがあり、誰もがEEGヘッドセットを含むさまざまな鉄片で何か面白いことをしようとしました。 その結果、これは完全に自然なことでしたので、私は自分の家に現れたチャンスをつかむことにしました。



Magic Blue電球で行ったように、Muse Bluetoothプロトコルを逆にしようとしました。 約1時間を費やした後、誰かがすでにこれを行っている可能性があることに気付きました。 私が見つけた機能番号の1つを検索し、 Alexander Barachantによって書かれたPython ライブラリに アクセスした この素晴らしい記事を見つけました。 その結果、予想外に、必要なものはすべて揃っていました。 これが、 muse-jsライブラリーの由来です。



これで、WebアプリケーションからMuseヘッドセットに接続し、そこから送られてくるEEGデータを操作できるようになりました（また、バッテリーレベル、加速度計、ジャイロスコープなどのデータを読み取ります）。 次に、このライブラリに基づいて行ったことについて説明します。

ハードウェア

コードに飛び込む前に、まずMuseヘッドセットについてもう少しよく理解してください。 バッテリーを内蔵したミニチュアヘッドバンドの形で作られています。 ミューズには4つのEEG電極があります。 ヘッドセットを装着すると、そのうちの2つが額の上、目のすぐ上にあり、さらに2つが耳の領域にあります。 さらに、彼女にはジャイロスコープと加速度計があり、ヘッドセットを装着している人の頭の向きを知ることができます。 Museには（Micro USBを介して）独自の電極に接続できる別のEEGセンサーがあるという事実が本当に気に入りました。 近い将来、試してみる予定です。



このヘッドセットには2つのバージョンがあることに注意してください。 1つ-2014年、2つ目-2016年。 Bluetooth Low Energyを使用する2016バージョンを確実にお楽しみいただけます。 2014ヘッドセットは、クラシックBluetoothを使用して外部と通信するため、Web Bluetoothでは使用できません。





Museヘッドセットサンプル2016。 AF7およびAF8電極は額にあります。 電極TP9およびTP10-耳の近く

JetストリームとRxJS

ライブラリを作成したときに、着信EEGデータを表示する方法を選択する必要がありました。 Web Bluetoothを使用する場合、新しいパケットが受信されるたびにイベントが発生します。 各パケットには、1つの電極からの12個の測定サンプルが含まれています。 新しいデータが受信されるたびに呼び出されるJavaScript関数を登録することも考えられますが、RxJSライブラリ（JavaScript用のReactive Extensions Library）を使用してこれを実装することにしました。 データストリームを操作するためのメソッドが含まれています。 それらは変換、作成でき、必要なものはそれらから抽出できます。

RxJSの強みは、ライブラリがMuseヘッドセットから受信した生データのストリームを操作して処理できる一連の関数を提供し、それらをさらなる作業に便利なものに変換することです（すぐに行います）。

可視化

新しいmuse-js —



ライブラリに基づいて何ができるかを考えるときに最初に思い浮かぶのmuse-js —



データの視覚化です。 夜のハッカソン中に、アレックスと私はアンギュラーミューズプロジェクトに取り組み始めました。 これは、脳波データを視覚化し、頭の位置を表示するAngularアプリケーションです。





私の最初のMuseデータ視覚化プロトタイプ



実際、MuseとWeb Bluetoothをサポートするブラウザーがあれば、 このページを開いて自分ですべてを試すことができます。





ミューズ、アンギュラー、スムージーチャートを使用した脳の電気的活動の視覚化



このアプリケーションを使用すると、ヘッドセットからのデータが実際にブラウザーに入ることがわかります。 ただし、正直なところ、チャートを観察することは興味深いことですが、データで他に何もできなければすぐに疲れてしまうでしょう（ただし、この興味の喪失がチャートにどのように現れるかは興味深いことです...）。

瞬く間に

EEG診断中に実行される操作の1つは、頭部のさまざまな領域の電位（電圧）の測定です。 測定された信号は脳活動の副作用であり、脳の一般的な状態（集中レベル、予期しない刺激の検出など）を判断するために使用できます。



脳の活動を調べる脳波記録法に加えて、眼電位記録法（EOG）などがあります。 これは、目の動きを検出できる研究です（残念なことに、私のガールフレンドは視力矯正の専門家です。彼女は私に何が起こっているのかを説明しました）。 ミューズには、目の近くの額に2つの電極があります。 （これらはAF7およびAF8と呼ばれます-EEG「10-20％」で電極を配置するための標準システムに従って）これにより、眼球運動を追跡する機会が与えられます。





人間の目。 前の角膜は正に帯電しています。 網膜、後部、負に帯電



脳波の「Hello World」の電極からの信号を使用して、目の動きを追跡してまばたきを検出します。

はじめに

このように動作します：ヘッドセットからのEEGデータのストリームを取得します（ muse-js



は、観察可能なRxJSオブジェクトとしてこのデータへのアクセスを提供します）。 次に、必要な電極（AF7）からのデータのみを選択します。AF7は左目の上にあり、信号のピーク、つまり絶対値が500μVを超えるサンプルを探します。これは、そのようなピークの瞬間の電位の大きな変化を示しています。 電極は目の近くにあるため、眼球の動きによって大きな電位差が生じると予想されます。



これはまばたきの瞬間を判断する最も正確な方法ではないかもしれませんが、私の場合は非常にうまくいきました。 さらに、コードはシンプルで、わかりやすいコードであることがわかりました（これらはすべて、「Hello World」の兆候です）。



EEGデータの操作を開始する前に、 muse-js



インストールします。

 npm install --save muse-js
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、ライブラリをコードにインポートします。 この場合、Angularアプリケーション-Angular CLIを使用して作成された通常の空のプロジェクトについて話しています。 必要に応じて、ReactまたはVue.jsを使用してこのすべてを再現できます。この例では、フレームワークに緊密にバインドされているコードはほとんどありません。



次に、 muse-js



をアプリケーションのメインコンポーネントにインポートします。

 import { MuseClient, channelNames } from `muse-js`;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MuseClient



クラスMuseClient



ヘッドセットとの対話を担当し、 channelNames —



チャンネル名を便利な外観にキャストするために使用される単なる配列です。



コンポーネントで、新しいMuseClient



インスタンスを作成します。

 this.muse = new MuseClient();
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

次に、より複雑なものを示します。ヘッドセットに接続するためのコードです。



Web Bluetoothでは、接続を開始するためにユーザーの介入が必要です。 そのため、コンポーネントにボタンを追加する必要があります。 ユーザーがボタンをクリックした後にのみ、ヘッドセットに接続します。 onConnectButtonClick



メソッドにヘッドセット接続ロジックを実装します。

 async onConnectButtonClick() { await this.muse.connect(); this.muse.start(); // TODO:      }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

MuseClient



オブジェクトのconnect()



メソッドは、ヘッドセットへの接続を開始します。 次に、 start()



メソッドはヘッドセットにコマンドを送信して、EEGデータの収集とアプリケーションへの転送を開始します。





Web Bluetoothを使用してMuseヘッドセットに接続する



次に行うことは、 muse.eegReadings



対象のmuse.eegReadings



オブジェクトで利用可能なEEGデータをサブスクライブすることです（これは、上記のコードでTODO



コメントがある場所で行われます）。

   const leftEyeChannel = channelNames.indexOf('AF7'); this.leftBlinks = this.muse.eegReadings   .filter(r => r.electrode === leftEyeChannel)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードは、デバイスからのEEG測定値を受け入れ、左眼の上にあるAF7電極に関連するもののみを選択します。 各パケットには12個のサンプルが含まれ、その結果、監視対象ストリームの各要素は次の構造を持つオブジェクトになります。

 interface EEGReading { electrode: number; timestamp: number; samples: number[]; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

electrode



変数には、 electrode



の数値インデックスが含まれます（ channelNames



配列を使用して、このインデックスを電極に対してより理解しやすくします）、 timestamp



には、測定が行われたときの測定開始からの相対時間を含み、 samples —



12の浮動小数点数を含む配列です、各要素には1つのEEG測定値が含まれ、マイクロボルト（μV）で表されます。



次のステップでは、各パケットから最大値を選択する必要があります（つまり、最大出力値を使用した測定）。 ここで、RxJS map



オペレーターを使用して受信したストリームを処理し、目的の値を取得します。

   this.leftBlinks = this.muse.eegReadings   .filter(r => r.electrode === leftEyeChannel)   .map(r => Math.max(...r.samples.map(n => Math.abs(n))))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これで、通常の数字のストリームがあるので、それをフィルター処理して、500より大きい値のみをスキップできます。これらの値は点滅に対応する場合があり、これがまさに必要なものです。

   this.leftBlinks = this.muse.eegReadings   .filter(r => r.electrode === leftEyeChannel)   .map(r => Math.max(...r.samples.map(n => Math.abs(n))))   .filter(max => max > 500)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

この段階では、単純なRxJSベースのまばたき検出パイプラインがありますが、データの受信を開始するには、まだサブスクライブする必要があります。 通常のconsole.log



から始めましょう。

  this.leftBlinks.subscribe(value => {   console.log('Blink!', value); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このコードを実行すると、ヘッドセットを装着しているときに多くの「点滅」メッセージが表示される可能性があります。これは、この時点で多くの静的ノイズが発生するためです。 ヘッドセットが安全に装着されるとすぐに、点滅するときのみメッセージが表示されます。





プログラムは点滅に応答します



点滅するたびに、いくつかの「点滅」メッセージが表示される場合があります。 その理由は、瞬きごとに電位にいくつかの変化が生じるためです。 不要なメッセージを取り除くには、Arduinoでメカニカルボタンを操作するときに使用されるものと同様のアンチバウンスフィルタを適用する必要があります。



したがって、プロジェクトに別の改善を追加します。生データをコンソールに出力する代わりに、点滅が検出されたときに値1を発行し、最後の潜在的な変更後0.5秒待機し、0を返します。これにより、複数のBlink！イベントが除外されます。見られる：

   this.leftBlinks = this.muse.eegReadings   .filter(r => r.electrode === leftEyeChannel)   .map(r => Math.max(...r.samples.map(n => Math.abs(n))))   .filter(max => max > 500)   .switchMap(() =>     Observable.merge(       Observable.of(1),       Observable.timer(500).map(() => 0)     )   );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

switchMap



の秘密はswitchMap



ですか？ そして、次のことが起こります。新しい要素が到着すると、 switchMap



は前のストリームを破棄し、指定された関数を呼び出して新しいストリームを作成します。 この新しいストリームには2つの要素が含まれます：値1、 Observable.of



を使用してすぐに発行し、値0（500ミリ秒後に返されます）、もちろん、新しい要素がfilter



ラインから到着してswitchMap



を再起動し、 0の期待値を破棄します。



これで、この観察可能なleftBlinks



オブジェクトを使用して瞬きを視覚化できます。 このデータは、非同期パイプラインを使用してAngularテンプレートに関連付けることができます：







このコードは、点滅時に目のアイコンを非表示にします。 代わりに、CSSクラスを切り替えて、色を使用したり、点滅時に目のシンボルをアニメーション化したりできます。







いずれにしても、可能であれば、片目だけでまばたきしてコードをチェックすることをお勧めします。



同じアプローチを使用してReactアプリケーションを作成する場合、この監視対象オブジェクトをサブスクライブし、点滅するときにコンポーネントの状態を更新できます。

   this.leftBlinks.subscribe(value => {   this.setState({blinking: value}); });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

それでやった！ ここに、EEGヘッドセットの「Hello World」があります！





「Hello World」に対応



ここで 、このプロジェクトのコードを見つけることができます。 RxJSコードの準備に協力してくれたBen Leshに深く感謝します。

まとめ

数年前、「脳波記録」という言葉は、病院や研究機関にしかアクセスできない、かさばる、非常に高価な機器についての考えを呼び起こしました。 今日、あなたや私のようなWeb開発者は、ブラウザ、RxJS、Angular、非常に手頃な価格のヘッドセットなどの通常のツールを使用して、脳の電気的活動に関するデータを扱うことができます。



おそらくEEGはあなたのトピックではありませんが、新しい世代の「スマート」デバイスがプログラマーにとって多くの興味深い機会を生み出す方法を見るのを止めることはできません。 ああ、何時だ！



親愛なる読者！ Web開発でEEGヘッドセットを使用する場合、どのオプションが最も興味深く、有望ですか？