如何使用facemesh.js (tensorflow)让控制台记录特定的关键点，也就是鼻子？
如何使用facemesh.js (tensorflow)让控制台记录特定的关键点，也就是鼻子？
提问于 2020-08-06 23:24:48
<head>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/facemesh"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
<script>
/* running facemesh code */
async function get_facemesh()
{
// load HTML canvas
var canvas = document.getElementById("facemesh");
var draw = canvas.getContext("2d");
// get video stream
const stream = document.getElementById("movie");
// load facemesh model
const model = await facemesh.load(maxFaces=1);
// process input stream frame by frame
while(1)
{
// fill canvas with black background
draw.fillStyle = "black";
draw.fillRect(0, 0, canvas.width, canvas.height);
// detect faces
const faces = await model.estimateFaces(stream);
if(faces.length != 0)
{
// loop through faces array to capture multiple faces
var mesh = faces[0].scaledMesh;
console.log(mesh);
/* highlight facial landmark points on canvas board */
draw.fillStyle = "#00FF00";
for(i=0; i< mesh.length; i++)
{
var [x, y, z] = mesh[i];
draw.fillRect(Math.round(x), Math.round(y), 2, 2);
}
}
else
{
console.log(`no faces detected..`);
}
// loop to process the next frame
await tf.nextFrame();
}
}
</script>
</head>
<body>
<video width=640 height=480 autoplay id="movie"> </video>
<canvas width=640 height=480 id="facemesh"> </canvas>
<br>
<script>
// capture live video stream from web camera
video = document.getElementById("movie");
if(navigator.mediaDevices.getUserMedia)
{
navigator.mediaDevices.getUserMedia({video: true})
.then(function (stream) {video.srcObject = stream; });
}
// run face-mesh model once the video is ready for processing
main();
function main()
{
// check if the video is loaded and ready for processing
if(video.readyState == 4)
{
console.log("video is ready for processing..");
get_facemesh();
}
else
{
console.log("nope, not loaded yet..");
setTimeout(main, 1000/30);
}
}
</script>
</body>
</html>下面是一个示例代码。这段代码将所有面部标志记录到控制台，但我要做的是让它只在鼻子上记录标志。我该怎么做呢？
这是它的github的链接：https://github.com/tensorflow/tfjs-models/tree/master/facemesh。这是面部标志的链接：https://raw.githubusercontent.com/tensorflow/tfjs-models/master/facemesh/mesh_map.jpg。下面是我尝试过的方法:我尝试将一个名为nose的变量设置为等于getUVCoords(19)。var nose = getUVCoords(19)然后我用console.log(nose)替换了console.log(mesh)。它没有起作用。它甚至阻止了整个系统运行tensorflow。如果能得到任何帮助，我将不胜感激。
回答 1
Stack Overflow用户
发布于 2020-08-10 02:25:40
所以看起来你在画点之后覆盖了你的画布。下面是我在编写get_facemesh函数时使用的代码：
async function get_facemesh()
{
// load HTML canvas
var canvas = document.getElementById("facemesh");
var draw = canvas.getContext("2d");
// get video stream
const stream = document.getElementById("movie");
// load facemesh model
const model = await facemesh.load(maxFaces=1);
// process input stream frame by frame
while(1)
{
// detect faces
const faces = await model.estimateFaces(stream);
if(faces.length > 0)
{
// Reset frame
draw.fillStyle = "black";
draw.fillRect(0, 0, canvas.width, canvas.height);
// loop through faces array to capture multiple faces
var mesh = faces[0].scaledMesh;
/* highlight facial landmark points on canvas board */
draw.fillStyle = "#00FF00";
for (var i = 0; i < mesh.length; i++) {
draw.fillRect(mesh[i][0], mesh[i][1], 2, 2);
}
}
else
{
console.log(`no faces detected..`);
}
// loop to process the next frame
await tf.nextFrame();
}
}请注意，您几乎不应该使用while(1)，而应查看requestAnimationFrame()，这是进行动画循环的方法。虽然(1)肯定会给你带来性能问题，因为它是一个无限循环，并且不会等待浏览器做一些事情，所以不要这样做。我将把它作为练习留给您来清理您的代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63293092
复制相关文章
相似问题
腾讯云开发者
