如何使用javascript检测现场摄像头中的手势？

Question

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

Answer 1

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

手势检测可以使用Haar级联分类器（从OpenCV移植）使用js-objectdetect或HAAR.js在JavaScript中完成。

在JavaScript / HTML5中使用js-objectdetect

示例：打开与封闭式手部检测（美国手语字母表的“A”手势）

Answer 2

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

Answer 3

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

在这里，您可以找到如何制作它。 Motion detection and rendering

有关kinect General info

的更多信息

Answer 4

在Medium https://medium.com/@muehler.v/simple-hand-gesture-recognition-using-opencv-and-javascript-eb3d6ced28a0上找到了这篇文章，其中包含指向Github存储库的链接。

Answer 5

尽管这是一个确实很老的问题，但仍有一些新的机会可以使用快速神经网络和网络摄像头中的图像进行手动跟踪。并使用Javascript。我建议使用Handtrack.js库，它为此目的而使用Tensorflow.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>

Demo Running codepen

还可以看到类似的神经网络implementation in python-

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