企业官网建设流程全解析

DepthJS 是一个开源的浏览器扩展 + 原生插件，能让任意网页通过 JavaScript 与 Microsoft Kinect 深度摄像头交互。本文将带你完成 DepthJS 跨平台部署的完整流程：安装 OpenNI/NiTE 驱动、用 FireBreath 编译 NPAPI 原生插件，并分别在 Windows / Mac / Linux 的 Chrome 与 Mac 的 Safari 上加载扩展，最后用官方 Demo 页验证手势事件。

1️⃣ 部署前先看懂：DepthJS 的跨平台架构

DepthJS 采用分层设计，数据流为：

Kinect → 原生浏览器插件（C++/NPAPI）→ 浏览器扩展 → JavaScript 事件 → 任意网页

各目录的分工如下：

各平台支持情况一览：

如果没有本地源码，先克隆仓库：git clone https://gitcode.com/gh_mirrors/de/depthjs

2️⃣ 通用前置：安装 OpenNI / NiTE 驱动栈

所有平台编译前，必须先装好 Kinect 的驱动与手势识别库（这是最容易踩坑的一步）：

1. 下载 OpenNI 历史版本 SDK（包含 OpenNI 核心、Sensor 驱动、NiTE 三个包），以及 SensorKinect 传感器驱动；
2. 按顺序逐个运行每个包的 install 安装脚本；
3. Mac / Linux 上确认/var/lib/ni/目录存在且可写；
4. 用niReg -l检查模块是否注册成功，输出中应能看到XnDeviceSensorV2KM（SensorKinect 设备）等条目，验证方法见 README.md。

3️⃣ Mac（Chrome）：编译 FireBreath 插件 → 加载扩展

Mac 依赖已在仓库中静态编译完毕，流程最短：

1. 安装 CMake 2.6+、OpenNI/NiTE，并下载 FireBreath 框架；

2. 在插件目录下执行：

   ${FIREBREATH_DIR}/prepmac.sh . build/ open build/FireBreath.xcodeproj

3. Xcode 打开后直接 Build 即可，插件会输出到扩展目录的plugin/下；

4. 打开chrome://extensions，启用"开发者模式"，用Load unpacked extension选择 chrome-extension/ 目录加载。

默认 manifest.json 指向 Mac 预编译插件plugin/DepthJSPlugin.plugin，无需改动。

4️⃣ Windows（Chrome）：Visual Studio 编译 + 切换 manifest

Windows 需要 Visual Studio + CMake + OpenNI/NiTE：

${FIREBREATH_DIR}/prep2010.cmd . build/ start build\FireBreath.sln

在 Visual Studio 中编译成功后，构建后脚本 copy_binary_win32.bat 会自动把npdepthjsplugin.dll拷贝进chrome-extension/plugin/，并将 manifest 切换为 manifest.json.WIN32（插件路径改为.dll）。若使用预编译插件，手动复制该文件覆盖manifest.json即可，然后同样在chrome://extensions加载扩展。

5️⃣ Linux（Chrome）：自编译 X11 原生插件

Linux 支持 Chrome，但仓库不提供预编译依赖，需要自行准备 OpenCV 等库：

1. 用 FireBreath 的prep脚本（或 CMake）进入构建目录，平台定义由 X11/projectDef.cmake 提供，最终产物为depthjsplugin.so；
2. 编译脚本会基于 CMakeLists.txt 中的find_package(OpenNI)/find_package(NITE)自动探测 SDK，找不到时会提示Can't find OpenNI!，此时可通过-DOpenNI_LIBS=... -DNITE_LIBS=...手动指定；
3. 把产物放入chrome-extension/plugin/，并将 manifest.json.LINUX 复制为manifest.json（其中插件路径已指向plugin/depthjsplugin.so）；
4. 加载扩展，流程同 Chrome 各平台。

6️⃣ Safari（Mac）：旧版扩展方案

Safari 因 macOS 10.7 起 NPAPI 插件不能后台单例运行，已非 DepthJS 的活跃开发平台，但仍可部署：

1. 在终端执行硬链接脚本（Safari 扩展包不喜欢软链接）：

   cd safari-extension-mac/DepthJS.safariextension && ./createHardLinks.sh

   脚本见 createHardLinks.sh，它会把 extension-common/ 下的共用脚本复制进扩展包（脚本清单在 Info.plist）；

2. 用 Xcode 编译并运行 webkit-plugin-mac/ 中的插件工程；

3. 在 Safari 中打开"开发 → 显示网页开发工具"，进入 Extension Builder 添加 safari-extension-mac/ 目录下的扩展；

4. 点击Inspect Global Pages，控制台会输出是否成功连上 Kinect（确认摄像头已插好）。

7️⃣ 验证部署：跑通官方 Demo 页

部署完成后，用本地文件方式打开演示页 BasicDemo.html：

• 页面状态变为"DepthJS + Kinect detected"即表示插件工作正常；
• 手进入视野时会实时显示 x / y / z 坐标，挥手、推掌等手势也会打印对应事件；
• 网页侧只需引入 depth.js，覆写全局DepthJS对象上的回调即可（如onKinectInit、onMove、onPush、onSwipeLeft），默认手势语言为：挥手开始追踪（出现"蓝色指针"）、推掌点击、画圈结束追踪。

8️⃣ 常见问题排查清单

按以上步骤走完，DepthJS 即可在三大桌面平台的 Chrome 与 Mac Safari 上把 Kinect 手势事件送达任意网页。