html - 如何使用javascript检测实时网络摄像头中的手势？

Question

我将实时网络摄像头嵌入到 html 页面。现在我想找到手势。如何使用 JavaScript 做到这一点，我不知道。我用谷歌搜索了很多，但没有得到任何好主意来完成这个。那么有人知道这件事吗？这该怎么做。

Answer 1

访问网络摄像头需要 HTML5 WebRTC API，该 API 在除 Internet Explorer 或 iOS 之外的大多数现代浏览器中都可用。

手势检测可以使用带有js-objectdetect或HAAR.js的 Haar Cascade Classifiers（从 OpenCV 移植）在 JavaScript 中完成。

在 JavaScript/HTML5 中使用 js-objectdetect 的示例：打开与闭合手检测（美国手语字母表的“A”手势）

Answer 2

这是一个 JavaScript 手部跟踪演示——它依赖于尚未在所有典型浏览器中启用的 HTML5 功能，它在这里根本无法正常工作，而且我不相信它涵盖了手势，但它可能是一个为您开始：http ://code.google.com/p/js-handtracking/

Answer 3

你需要有一些运动检测设备（相机），你可以使用 kinect 来获取身体不同部位的运动。您必须在浏览器中发送数据，告诉您可以根据需要在哪些位置操作数据的身体部位和位置

在这里您可以找到如何制作它。运动检测和渲染

更多关于 kinect一般信息

Answer 4

虽然这是一个非常古老的问题，但使用快速神经网络和来自网络摄像头的图像进行手部追踪有一些新的机会。在 Javascript 中。我推荐使用 Tensorflow.js 的Handtrack.js库。

简单的使用示例。

<!-- Load the handtrackjs model. -->
<script src="https://cdn.jsdelivr.net/npm/handtrackjs/dist/handtrack.min.js"> </script>

<!-- Replace this with your image. Make sure CORS settings allow reading the image! -->
<img id="img" src="hand.jpg"/> 
<canvas id="canvas" class="border"></canvas>

<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
  // Notice there is no 'import' statement. 'handTrack' and 'tf' is
  // available on the index-page because of the script tag above.

  const img = document.getElementById('img'); 
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  // Load the model.
  handTrack.load().then(model => {
    // detect objects in the image.
    model.detect(img).then(predictions => {
      console.log('Predictions: ', predictions); 
    });
  });
</script>

演示 运行 codepen

还可以在 python 中看到类似的神经网络实现-

免责声明..我维护这两个项目。