Clever Geek Handbook

Intel RealSense SDKを使用してWebベースのジェスチャー認識アプリケーションを作成します



この記事では、Intel RealSense SDKとフロントビューカメラ（F200）を使用して、さまざまな種類のジェスチャを認識できるWebアプリケーションの作成について説明します。 ジェスチャの認識のおかげで、アプリケーションユーザーは、インターフェイスをナビゲートして対話する新しい便利な方法を受け取ります。 この仕事には、HTML、JavaScript、およびjQueryの基本的な知識が必要です。



ハードウェア要件





ソフトウェア要件





設置



続行する前に、次を実行します。

  1. F200カメラをコンピューターのUSB3ポートに接続します。
  2. DCMをインストールします。
  3. SDKをインストールします。
  4. Webアプリケーションランタイムをインストールします。
  5. これらのコンポーネントをインストールしたら、SDKがインストールされているフォルダーに移動します（デフォルトのパスを使用します）。

    C：\ Program Files（x86）\ Intel \ RSSDK \ framework \ common \ JavaScript


realsense.jsファイルがあるはずです。 このファイルを別のフォルダーにコピーします。 このガイドで使用します。 SDKを使用したJavaScriptアプリケーションのデプロイの詳細については、 こちらをご覧ください 。



コードレビュー



このチュートリアルでは、以下で説明するサンプルコードを使用します。 この単純なWebアプリケーションは、カメラによって検出されたジェスチャの名前を表示します。 以下に示すすべてのコードを新しいHTMLファイルにコピーし、realsense.jsファイルがコピーされたフォルダーと同じフォルダーに保存します。 この記事の冒頭にあるサンプルコードへのリンクをクリックして、Webアプリケーション全体をダウンロードすることもできます。 次のセクションで、コードをより詳細に分析します。



Intel RealSense SDKはPromiseオブジェクトを使用します。 JavaScriptでPromiseオブジェクトを使用した経験がない場合は、 このドキュメントで概要とAPIリファレンスを確認してください。



このサンプルコードで使用されているSDK機能の詳細については、Intel RealSense SDKのドキュメントを参照してください。 SDKドキュメントは、インターネット 、およびSDKがインストールされているフォルダー内のdocサブフォルダーで入手できます 。 



<html> <head> <title>RealSense Sample Gesture Detection App</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="https://autobahn.s3.amazonaws.com/autobahnjs/latest/autobahn.min.jgz"></script> <script type="text/javascript" src="https://www.promisejs.org/polyfills/promise-6.1.0.js"></script> <script type="text/javascript" src="realsense.js"></script> <script> var sense, hand_module, hand_config var rs = intel.realsense function DetectPlatform() { rs.SenseManager.detectPlatform(['hand'], ['front']).then(function (info) { if (info.nextStep == 'ready') { Start() } else if (info.nextStep == 'unsupported') { $('#info-area').append('<b> Platform is not supported for Intel(R) RealSense(TM) SDK: </b>') $('#info-area').append('<b> either you are missing the required camera, or your OS and browser are not supported </b>') } else if (info.nextStep == 'driver') { $('#info-area').append('<b> Please update your camera driver from your computer manufacturer </b>') } else if (info.nextStep == 'runtime') { $('#info-area').append('<b> Please download the latest web runtime to run this app, located <a href="https://software.intel.com/en-us/realsense/webapp_setup_v6.exe">here</a> </b>') } }).catch(function (error) { $('#info-area').append('Error detected: ' + JSON.stringify(error)) }) } function Start() { rs.SenseManager.createInstance().then(function (instance) { sense = instance return rs.hand.HandModule.activate(sense) }).then(function (instance) { hand_module = instance hand_module.onFrameProcessed = onHandData return sense.init() }).then(function (result) { return hand_module.createActiveConfiguration() }).then(function (result) { hand_config = result hand_config.allAlerts = true hand_config.allGestures = true return hand_config.applyChanges() }).then(function (result) { return hand_config.release() }).then(function (result) { sense.captureManager.queryImageSize(rs.StreamType.STREAM_TYPE_DEPTH) return sense.streamFrames() }).catch(function (error) { console.log(error) }) } function onHandData(sender, data) { for (g = 0; g < data.firedGestureData.length; g++) { $('#gesture-area').append(data.firedGestureData[g].name + '<br />') } } $(document).ready(DetectPlatform) </script> </head> <body> <div id="info-area"></div> <div id="gesture-area"></div> </body> </html>




以下のスクリーンショットは、カメラの前でさまざまなジェスチャーを実演するときに、アプリケーションを起動した後のアプリケーションの外観を示しています。







システムでのIntel RealSenseカメラ検出



カメラをジェスチャー認識に使用する前に、システムの撮影準備ができていることを確認する必要があります。 この目的のために、 detectPlatform関数を使用します。 この関数は2つのパラメーターを使用します。 1つ目はアプリケーションで使用されるランタイムの配列、2つ目はアプリケーションが動作するカメラの配列です。 handモジュールのみを使用するため、 ['hand']を最初の引数として渡し、F200カメラのみを使用するため、2番目の引数として['front']を渡します。



この関数は、 nextStepプロパティを持つ情報オブジェクトを返します。 取得した値に応じて、カメラを使用する準備ができているかどうかを判断します。 その場合、 開始機能を呼び出してジェスチャ認識を開始します。 それ以外の場合、プラットフォームから受信した行に応じて、対応するメッセージを表示します。



このプロセス中にエラーが発生した場合、それらを表示します。 



 rs.SenseManager.detectPlatform(['hand'], ['front']).then(function (info) { if (info.nextStep == 'ready') { Start() } else if (info.nextStep == 'unsupported') { $('#info-area').append('<b> Platform is not supported for Intel(R) RealSense(TM) SDK: </b>') $('#info-area').append('<b> either you are missing the required camera, or your OS and browser are not supported </b>') } else if (info.nextStep == 'driver') { $('#info-area').append('<b> Please update your camera driver from your computer manufacturer </b>') } else if (info.nextStep == 'runtime') { $('#info-area').append('<b> Please download the latest web runtime to run this app, located <a href="https://software.intel.com/en-us/realsense/webapp_setup_v6.exe">here</a> </b>') } }).catch(function (error) { $('#info-area').append('Error detected: ' + JSON.stringify(error)) })




ジェスチャー認識のためのカメラの構成 



 rs.SenseManager.createInstance().then(function (instance) { sense = instance return rs.hand.HandModule.activate(sense) })




カメラをジェスチャー認識用に構成するには、いくつかのアクションを実行する必要があります。 最初にSenseManagerの新しいインスタンスを作成し、カメラをオンにして手の動きを検出します。 SenseManagerは 、カメラのコンベアを制御するために使用されます。



これを行うには、 createInstance関数を呼び出します。 コールバックは新しく作成されたインスタンスを返し、将来の使用のためにセンス変数に保存します。 次に、 アクティベート関数を呼び出して、 手のモジュールを有効にします。これは、ジェスチャーを認識する必要があります。 



 .then(function (instance) { hand_module = instance hand_module.onFrameProcessed = onHandData return sense.init() })




その後、 activate関数によって返されたハンドトラッキングモジュールのインスタンスを変数hand_moduleに保存する必要があります。 次に、新しいフレームデータが使用可能になるたびに、 onFrameProcessedプロパティを独自のonHandDataコールバック関数に割り当てます。 最後に、 Init関数を呼び出して、カメラパイプラインを処理用に初期化します。 



 .then(function (result) { return hand_module.createActiveConfiguration() })




ジェスチャ認識用のハンドトラッキングモジュールを構成するには、アクティブな構成のインスタンスを作成する必要があります。 これを行うには、 createActiveConfiguration関数を呼び出します 。 



 .then(function (result) { hand_config = result hand_config.allAlerts = true hand_config.allGestures = true return hand_config.applyChanges() })




CreateActiveConfiguration関数は、 hand_config変数に格納されている構成インスタンスを返します。 次に、 allAlertsプロパティにtrueを設定して、すべてのアラートの通知を有効にします。 アラート通知は、追加情報を提供します：フレーム番号、タイムスタンプ、アラートをトリガーしたハンド識別子。 また、 allGesturesプロパティをtrueに設定します。これは、ジェスチャーの検出に必要です。 最後に、 applyChanges関数を呼び出して、すべてのパラメーターへの変更をハンドトラッキングモジュールに適用します。 この場合、現在の構成がアクティブになります。 



 .then(function (result) { return hand_config.release() })




次に、 リリース関数を呼び出して構成を解放します。 



 .then(function (result) { sense.captureManager.queryImageSize(rs.StreamType.STREAM_TYPE_DEPTH) return sense.streamFrames() }).catch(function (error) { console.log(error) })




最後に、次の一連の関数は、フレームのストリーミングを開始するようにカメラを設定します。 新しいフレームのデータが利用可能になると、 onHandData関数が呼び出されます。 エラーが検出された場合、それらをインターセプトし、すべてのエラーをコンソールに出力します。



OnHandData関数 



 function onHandData(sender, data) { for (g = 0; g < data.firedGestureData.length; g++) { $('#gesture-area').append(data.firedGestureData[g].name + '<br />') } }




onHandDataコールバックは、ジェスチャが検出されたかどうかを確認する主な機能です。 この関数は、新しいデータがhandモジュールから到着するたびに呼び出され、このデータの一部はジェスチャーに関連付けられている場合と関連付けられていない場合があることに注意してください。 この関数は2つのパラメーターを取りますが、dataパラメーターのみを使用します。 ジェスチャデータが利用可能になると、 firedGestureData配列を順番にループ処理し、nameプロパティからジェスチャ名を取得します。 最後に、ジェスチャの名前をジェスチャ領域の文字列に出力し、Webページにジェスチャの名前を表示します。



カメラはオンのままで、Webページが閉じるまでジェスチャデータを受信し続けることに注意してください。



おわりに



このチュートリアルでは、Intel RealSense SDKを使用して、ジェスチャ認識にF200を使用する単純なWebアプリケーションを作成しました。 システム内のカメラの可用性を検出する方法と、ジェスチャ認識用にカメラを構成する方法を学びました。 if文を使用して特定のジェスチャー（ thumbsupやthumbsdownなど ）をチェックし、この特定のユースケースを処理するコードを記述することにより、この例を変更できます。


More articles:


All Articles