Javascript 如何使用javascript检测实时网络摄像头中的手势？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10227464/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to detect hand gesture in live webcam using javascript?
提问by Mr. Sajid Shaikh
I embedded live web cam to html page. Now i want to find hand gestures. How to do this using JavaScript, I don't have idea. I Googled lot but didn't get any good idea to complete this. So any one know about this? how to do this.
我将实时网络摄像头嵌入到 html 页面。现在我想找到手势。如何使用 JavaScript 做到这一点，我不知道。我在谷歌上搜索了很多，但没有任何好主意来完成这个。所以有人知道这件事吗？这该怎么做。
回答by le_m
Accessing the webcam requires the HTML5 WebRTC API which is available in most modern browsers apart from Internet Explorer or iOS.
访问网络摄像头需要 HTML5 WebRTC API，除 Internet Explorer 或 iOS 外，大多数现代浏览器都提供该 API。
Hand gesture detectioncan be done in JavaScript using Haar Cascade Classifiers (ported from OpenCV) with js-objectdetector HAAR.js.
可以使用带有js-objectdetect或HAAR.js 的Haar Cascade Classifiers（从 OpenCV 移植）在 JavaScript 中完成手势检测。
Exampleusing js-objectdetect in JavaScript/HTML5: Open vs. closed hand detection (the "A" gesture of the american sign language alphabet)
在 JavaScript/HTML5 中使用 js-objectdetect 的示例：打开与关闭的手检测（美国手语字母表的“A”手势）
回答by Philipp Lenssen
Here is a JavaScript hand-tracking demo -- it relies on HTML5 features which are not yet enabled in all typical browsers, it doesn't work well at all here, and I don't believe it covers gestures, but it might be a start for you: http://code.google.com/p/js-handtracking/
这是一个 JavaScript 手部跟踪演示——它依赖于尚未在所有典型浏览器中启用的 HTML5 功能，它在这里根本无法正常工作，而且我不相信它涵盖手势，但它可能是一个为您开始：http: //code.google.com/p/js-handtracking/
回答by Adil
You need to have some motion detecting device (Camera) and you can use kinect to get the motion of different parts of the body. You will have to send data in browser telling about the body parts and position where you can manipulate the data according to your requirement
你需要有一些运动检测设备（相机），你可以使用 kinect 来获取身体不同部位的运动。您必须在浏览器中发送数据，告知您可以根据需要操作数据的身体部位和位置
Here you can find how you can make it. Motion detection and rendering
在这里，您可以找到如何制作它。运动检测和渲染
More about kinect General info
更多关于 kinect一般信息
回答by ajinkyapuar
Found this article on Medium https://medium.com/@muehler.v/simple-hand-gesture-recognition-using-opencv-and-javascript-eb3d6ced28a0with link to the Githubrepository.
在 Medium https://medium.com/@muehler.v/simple-hand-gesture-recognition-using-opencv-and-javascript-eb3d6ced28a0上找到这篇文章，链接到Github存储库。
回答by Vykthur D .
While this is a really old question, theres some new opportunities to do handtracking using fast neural networks and images from a webcam. And in Javascript. I'd recommend the Handtrack.jslibrary which uses Tensorflow.js just for this purpose.
虽然这是一个非常古老的问题，但使用快速神经网络和来自网络摄像头的图像进行手部追踪有一些新的机会。在 Javascript 中。我推荐使用 Tensorflow.js的Handtrack.js库就是为了这个目的。
Simple usage example.
简单的使用示例。
<!-- 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>
Also see a similar neural network implementation in python-
还可以在 python 中看到类似的神经网络实现-
Disclaimer .. I maintain both projects.
免责声明.. 我维护这两个项目。
