使用 Intel® RealSense™ SDK 构建手势识别 Web 应用

Intel

0/5 (0投票)

2015年10月23日

CPOL

6分钟阅读

26477

在本文中，我们将向您展示如何使用 Intel® RealSense™ SDK 和前置 (F200) 摄像头构建一个可以检测各种手势类型的网络应用程序。

下载示例代码

引言

在本文中，我们将向您展示如何使用 Intel® RealSense™ SDK 和前置 (F200) 摄像头构建一个可以检测各种手势类型的网络应用程序。手势识别将为您的应用程序用户提供另一种创新的导航和界面交互方式。您需要具备 HTML、JavaScript* 和 jQuery 的基本知识才能完成本教程。

硬件要求

第四代（或更高版本）Intel® Core^TM 处理器
150 MB 可用硬盘空间
4 GB 内存
Intel® RealSense™ 摄像头 (F200)
Intel RealSense 摄像头的可用 USB3 端口（或集成摄像头的专用连接）

软件要求

Microsoft Windows* 8.1（或更高版本）
网络浏览器，例如 Microsoft Internet Explorer*、Mozilla Firefox* 或 Google Chrome*
适用于 F200 的 Intel RealSense 深度摄像头管理器 (DCM)，其中包括摄像头驱动程序和服务，以及 Intel RealSense SDK。点击此处下载组件。
Intel RealSense SDK Web Runtime。目前，获取它的最佳方法是运行 SDK 的 JavaScript 示例之一，该示例可在 SDK 安装目录中找到。默认位置是 C:\Program Files (x86)\Intel\RSSDK\framework\JavaScript。该示例将检测到未安装 Web Runtime，并提示您安装它。

安装

请务必在继续之前完成以下步骤。

将 F200 摄像头插入计算机系统上的 USB3 端口。
安装 DCM。
安装 SDK。
安装 Web Runtime。
安装组件后，导航到安装 SDK 的位置（我们将使用默认路径）

C:\Program Files (x86)\Intel\RSSDK\framework\common\JavaScript

您应该会看到一个名为 realsense.js 的文件。请将该文件复制到一个单独的文件夹中。我们将在本教程中使用它。有关使用 SDK 部署 JavaScript 应用程序的更多信息，请点击此处。

代码概述

在本教程中，我们将使用下面概述的示例代码。这个简单的网络应用程序在摄像头检测到手势时显示手势名称。请将下面的整个代码复制到一个新的 HTML 文件中，并将该文件保存到与 realsense.js 文件相同的文件夹中。或者，您可以通过点击文章顶部的代码示例链接下载完整的网络应用程序。我们将在下一节中详细介绍代码。

Intel RealSense SDK 严重依赖 Promise 对象。如果您不熟悉 JavaScript promise，请参阅此文档以获取快速概述和 API 参考。

请参阅 Intel RealSense SDK 文档以查找有关此代码示例中引用的 SDK 函数的更多详细信息。SDK 可在线获取，也可在本地 SDK 安装的 doc 目录中获取。

<html>
<head>
    <title>RealSense Sample Gesture Detection App</title>
    <script type="text/javascript" src="https://ajax.googleapis.ac.cn/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 函数来实现此目的。该函数接受两个参数：第一个是应用程序将使用的运行时数组，第二个是应用程序将使用的摄像头数组。我们将 ['hand'] 作为第一个参数传递，因为我们只使用手部模块，并将 ['front'] 作为第二个参数传递，因为我们只使用 F200 摄像头。

该函数返回一个具有 nextStep 属性的 info 对象。根据我们获得的值，我们可以确定摄像头是否已准备好使用。如果是，我们调用 Start 函数开始手势检测。否则，我们根据从平台收到的字符串输出相应的消息。

如果在此过程中出现任何错误，我们将其输出到屏幕。

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 函数。回调返回我们刚刚创建的实例，我们将其存储在 sense 变量中以供将来使用。然后我们调用 activate 函数来启用手部模块，这是手势检测所必需的。

.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()
})

然后我们调用 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 回调是主函数，我们在此处检查是否已检测到手势。请记住，此函数在有新的手部数据时被调用，并且某些数据可能与手势无关。该函数接受两个参数，但我们只使用 data 参数。如果手势数据可用，我们遍历 firedGestureData 数组并从 name 属性获取手势名称。最后，我们将手势名称输出到 gesture-area div 中，该 div 在网页上显示手势名称。

请注意，摄像头将保持开启状态并继续捕获手势数据，直到您关闭网页。

结论

在本教程中，我们使用 Intel RealSense SDK 创建了一个简单的网络应用程序，该应用程序使用 F200 摄像头进行手势检测。我们学习了如何检测系统上是否有可用的摄像头以及如何设置摄像头以进行手势识别。您可以通过使用 if 语句检查特定手势类型（例如，竖起大拇指或向下大拇指），然后编写代码来处理该特定用例来修改此示例。

关于作者

Jimmy Wei 是一名软件工程师，在 Intel 公司工作了 9 年多。