You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
162 lines
7.2 KiB
162 lines
7.2 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script src="/static/hand/camera_utils.js" crossorigin="anonymous"></script>
|
|
<script src="/static/hand/control_utils.js" crossorigin="anonymous"></script>
|
|
<script src="/static/hand/drawing_utils.js" crossorigin="anonymous"></script>
|
|
<script src="/static/hand/hands.js" crossorigin="anonymous"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<canvas class="output_canvas" width="1280px" height="720px"></canvas>
|
|
</div>
|
|
<button id="clean" onclick="clean()">清空</button>
|
|
<div id="txtHint"></div>
|
|
<script>
|
|
function clean() {
|
|
var obj = document.getElementById("txtHint");
|
|
obj.innerHTML="";
|
|
}
|
|
</script>
|
|
<script type="module">
|
|
function ajax(str) {
|
|
var xmlhttp;
|
|
if (str.length==0)
|
|
{
|
|
document.getElementById("txtHint").innerHTML="";
|
|
return;
|
|
}
|
|
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
|
|
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
|
|
xmlhttp.onreadystatechange=function()
|
|
{
|
|
if (xmlhttp.readyState==4 && xmlhttp.status==200)
|
|
{
|
|
var xml = xmlhttp.responseText
|
|
xml = xml.slice(33,xml.length-2);
|
|
document.getElementById("txtHint").innerHTML+=xml;
|
|
num=0
|
|
}
|
|
}
|
|
xmlhttp.open("GET","/trans?str="+str,true)
|
|
xmlhttp.send();
|
|
}
|
|
|
|
const videoElement = document.createElement("video");
|
|
const canvasElement = document.getElementsByClassName('output_canvas')[0];
|
|
const canvasCtx = canvasElement.getContext('2d');
|
|
var str =""
|
|
var pre=str
|
|
var num=2
|
|
function onResults(results) {
|
|
canvasCtx.save();
|
|
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
|
|
canvasCtx.drawImage(results.image, 0, 0, canvasElement.width, canvasElement.height);
|
|
if (results.multiHandLandmarks) {
|
|
var Left=[0,0,0,0,0,0,0,0,0]
|
|
var Right=[0,0,0,0,0,0,0,0,0]
|
|
for (let i = 0; i < results.multiHandLandmarks.length; i++) {
|
|
var hand_lable=results.multiHandedness[i].label
|
|
if (hand_lable=="Left"){
|
|
Left[0]=1
|
|
var wrist=results.multiHandLandmarks[i][0]
|
|
var index_finger_mcp=results.multiHandLandmarks[i][5]
|
|
var index_finger_tip=results.multiHandLandmarks[i][8]
|
|
var middle_finger_mcp=results.multiHandLandmarks[i][9]
|
|
var middle_finger_tip=results.multiHandLandmarks[i][12]
|
|
var ring_finger_mcp=results.multiHandLandmarks[i][13]
|
|
var ring_finger_tip=results.multiHandLandmarks[i][16]
|
|
var pinky_mcp=results.multiHandLandmarks[i][17]
|
|
var pinky_tip=results.multiHandLandmarks[i][20]
|
|
|
|
var one_x = index_finger_mcp.x-pinky_mcp.x
|
|
var one_y = index_finger_mcp.y-pinky_mcp.y
|
|
|
|
if (Math.abs(one_x)>Math.abs(one_y)) {
|
|
Left[3]=1;//平
|
|
if (one_x>0) Left[1]=1;//正
|
|
var tow = index_finger_mcp.y-wrist.y;
|
|
if (tow<0) Left[2]=1;//上
|
|
var length = Math.abs(middle_finger_mcp.y-wrist.y)/3;
|
|
if (Math.abs(index_finger_tip.y-index_finger_mcp.y)>length) Left[5]=1;
|
|
if (Math.abs(middle_finger_tip.y-middle_finger_mcp.y)>length) Left[6]=1;
|
|
if (Math.abs(ring_finger_tip.y-ring_finger_mcp.y)>length) Left[7]=1;
|
|
if (Math.abs(pinky_tip.y-pinky_mcp.y)>length) Left[8]=1;
|
|
} else {
|
|
var length = Math.abs(one_y)/3;
|
|
if (Math.abs(index_finger_mcp.x-index_finger_tip.x)>length) Left[5]=1;
|
|
if (Math.abs(middle_finger_mcp.x-middle_finger_tip.x)>length) Left[6]=1;
|
|
if (Math.abs(ring_finger_mcp.x-ring_finger_tip.x)>length) Left[7]=1;
|
|
if (Math.abs(pinky_mcp.x-pinky_tip.x)>length) Left[8]=1;
|
|
}
|
|
} else {
|
|
Right[0]=1
|
|
var wrist=results.multiHandLandmarks[i][0]
|
|
var index_finger_mcp=results.multiHandLandmarks[i][5]
|
|
var index_finger_tip=results.multiHandLandmarks[i][8]
|
|
var middle_finger_mcp=results.multiHandLandmarks[i][9]
|
|
var middle_finger_tip=results.multiHandLandmarks[i][12]
|
|
var ring_finger_mcp=results.multiHandLandmarks[i][13]
|
|
var ring_finger_tip=results.multiHandLandmarks[i][16]
|
|
var pinky_mcp=results.multiHandLandmarks[i][17]
|
|
var pinky_tip=results.multiHandLandmarks[i][20]
|
|
|
|
var one_x = index_finger_mcp.x-pinky_mcp.x
|
|
var one_y = index_finger_mcp.y-pinky_mcp.y
|
|
if (Math.abs(one_x)>Math.abs(one_y)) {
|
|
Right[3]=1;//平
|
|
if (one_x>0) Right[1]=1;//正
|
|
var tow = index_finger_mcp.y-wrist.y;
|
|
if (tow<0) Right[2]=1;//上
|
|
var length = Math.abs(middle_finger_mcp.y-wrist.y)/3;
|
|
if (Math.abs(index_finger_tip.y-index_finger_mcp.y)>length) Right[5]=1;
|
|
if (Math.abs(middle_finger_tip.y-middle_finger_mcp.y)>length) Right[6]=1;
|
|
if (Math.abs(ring_finger_tip.y-ring_finger_mcp.y)>length) Right[7]=1;
|
|
if (Math.abs(pinky_tip.y-pinky_mcp.y)>length) Right[8]=1;
|
|
} else {
|
|
var length = Math.abs(one_y)/3;
|
|
if (Math.abs(index_finger_mcp.x-index_finger_tip.x)>length) Right[5]=1;
|
|
if (Math.abs(middle_finger_mcp.x-middle_finger_tip.x)>length) Right[6]=1;
|
|
if (Math.abs(ring_finger_mcp.x-ring_finger_tip.x)>length) Right[7]=1;
|
|
if (Math.abs(pinky_mcp.x-pinky_tip.x)>length) Right[8]=1;
|
|
}
|
|
}
|
|
pre=str
|
|
str=''
|
|
for (let j = 0; j < Left.length; j++) str+=Left[j]
|
|
str+='|'
|
|
for (let j = 0; j < Right.length; j++) str+=Right[j]
|
|
if (pre==str) num=num+1
|
|
console.log(pre,str,num)
|
|
if (num==20) ajax(str)
|
|
drawConnectors(canvasCtx, results.multiHandLandmarks[i], HAND_CONNECTIONS,
|
|
{color: '#00FF00', lineWidth: 5});
|
|
drawLandmarks(canvasCtx, results.multiHandLandmarks[i], {color: '#FF0000', lineWidth: 2});
|
|
}
|
|
}
|
|
canvasCtx.restore();
|
|
}
|
|
|
|
const hands = new Hands({locateFile: (file) => {
|
|
return `/static/hand/${file}`;
|
|
}});
|
|
hands.setOptions({
|
|
maxNumHands: 2,
|
|
modelComplexity: 1,
|
|
minDetectionConfidence: 0.5,
|
|
minTrackingConfidence: 0.5
|
|
});
|
|
hands.onResults(onResults);
|
|
const camera = new Camera(videoElement, {
|
|
onFrame: async () => {
|
|
await hands.send({image: videoElement});
|
|
},
|
|
width: 1280,
|
|
height: 720
|
|
});
|
|
camera.start();
|
|
</script>
|
|
</body>
|
|
</html> |