如何使用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中。我推荐使用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>

Demo Running codepen

另见一个类似的神经网络implementation in python -

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