В этой статье мы рассмотрим создание веб-приложения, способного распознавать различные типы жестов с помощью Intel RealSense SDK и камеры переднего обзора (F200). Благодаря распознаванию жестов пользователи приложения получают новый удобный способ навигации и взаимодействия с интерфейсом. Для выполнения этой работы требуются базовые знания HTML, JavaScript и jQuery.

Требования к оборудованию

Процессор Intel CoreTM 4-го поколения (или более позднего)
150 МБ свободного места на жестком диске
ОЗУ 4 ГБ
Камера Intel RealSense (F200)
Доступный порт USB3 для камеры Intel RealSense (или выделенное подключение для встроенной камеры)

Требования к программному обеспечению

Microsoft Windows* 8.1 (или более поздней версии)
Веб браузер, например Microsoft Internet Explorer*, Mozilla Firefox* или Google Chrome*
Пакет Intel RealSense Depth Camera Manager (DCM) для камеры F200, включающий драйвер камеры, службу и пакет Intel RealSense SDK. Загрузить компоненты можно здесь.
Среда выполнения веб-приложений Intel RealSense SDK. В настоящее время наиболее удобным способом запуска этой среды является запуск одного из примеров кода JavaScript в SDK, находящихся в папке установки SDK. Расположение по умолчанию: C:\Program Files (x86)\Intel\RSSDK\framework\JavaScript. Образец обнаружит, что среда выполнения веб-приложений не установлена, и предложит ее установить.

Установка

Перед выполнением дальнейших действий сделайте следующее:

Подключите камеру F200 к порту USB3 на компьютере.
Установите DCM.
Установите SDK.
Установите среду выполнения веб-приложений.
После установки этих компонентов перейдите в папку, в которую установлен пакет SDK (мы используем путь по умолчанию):
C:\Program Files (x86)\Intel\RSSDK\framework\common\JavaScript.

Там должен быть файл realsense.js. Скопируйте этот файл в отдельную папку. Мы будем использовать его в этом руководстве. Дополнительные сведения о развертывании приложений JavaScript с помощью SDK см. здесь.

Обзор кода

В этом учебном руководстве мы будем использовать описанный ниже образец кода. Это простое веб-приложение показывает названия жестов по мере их обнаружения камерой. Скопируйте весь показанный ниже код в новый HTML-файл и сохраните его в ту же папку, куда был скопирован файл realsense.js. Также можно загрузить все веб-приложение, щелкнув ссылку на образец кода, приведенную в начале этой статьи. Мы подробнее разберем код в следующем разделе.

Пакет Intel RealSense SDK использует объект Promise. Если вы не имеете опыта использования объектов Promise в JavaScript, ознакомьтесь с этой документацией, в ней содержится краткий обзор и справочник по API.

Сведения о функциях SDK, использующихся в этом примере кода, см. в документации Intel RealSense SDK. Документация по SDK доступна в Интернете, а также во вложенной папке doc внутри папки, в которую установлен SDK.

<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. Эта функция использует два параметра. Первый — массив сред выполнения, которые будут использованы приложением, второй — массив камер, с которыми будет работать приложение. Мы передаем ['hand'] в качестве первого аргумента, поскольку будем работать только с модулем hand, и передаем ['front'] в качестве второго аргумента, поскольку будем использовать только камеру F200.

Функция возвращает объект info со свойством nextStep. В зависимости от полученного значения мы определяем, готова ли камера к использованию. Если да, то мы вызываем функцию 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, чтобы включить модуль hand, который потребуется нам для распознавания жестов.

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

После этого нужно сохранить экземпляр модуля hand tracking, возвращенный функцией 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. Затем мы устанавливаем значение true для свойства allAlerts, чтобы включить уведомления обо всех оповещениях. Уведомления об оповещениях дают нам дополнительные сведения: номер кадра, штамп времени и идентификатор hand, вызвавший срабатывание оповещения. Мы также устанавливаем для свойства 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 — основная функция, в которой мы проверяем, обнаружен ли жест. Помните, что эта функция вызывается всякий раз при поступлении новых данных из модуля hand и часть этих данных может быть связана или не связана с жестами. Эта функция принимает два параметра, но мы используем только параметр данных. При доступности данных жеста мы последовательно перебираем массив firedGestureData и получаем имя жеста из свойства name. Наконец, мы выводим имя жеста в строку gesture-area, которая отображает название жеста на веб-странице.

Обратите внимание, что камера остается включенной и продолжает получать данные жестов до закрытия веб-страницы.

Заключение

В этом учебном руководстве мы использовали Intel RealSense SDK для создания простого веб-приложения, использующего камеру F200 для распознавания жестов. Мы узнали, как обнаружить доступность камеры в системе и как настроить камеру для распознавания жестов. Можно изменить этот пример, реализовав проверку определенных жестов (например, thumbsup или thumbsdown) с помощью инструкций if, а затем написав код для обработки этого конкретного случая использования.

Создание веб-приложений для распознавания жестов с помощью Intel RealSense SDK