pull/22/head
parent
bf859d24fd
commit
478c571b6d
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,201 @@
|
|||||||
|
(function() {
|
||||||
|
/*
|
||||||
|
|
||||||
|
Copyright The Closure Library Authors.
|
||||||
|
SPDX-License-Identifier: Apache-2.0
|
||||||
|
*/
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
function h(a) {
|
||||||
|
var c = 0;
|
||||||
|
return function() {
|
||||||
|
return c < a.length ? {
|
||||||
|
done: !1,
|
||||||
|
value: a[c++]
|
||||||
|
} : {
|
||||||
|
done: !0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var l = "function" == typeof Object.defineProperties ? Object.defineProperty : function(a, c, b) {
|
||||||
|
if (a == Array.prototype || a == Object.prototype) return a;
|
||||||
|
a[c] = b.value;
|
||||||
|
return a
|
||||||
|
};
|
||||||
|
|
||||||
|
function m(a) {
|
||||||
|
a = ["object" == typeof globalThis && globalThis, a, "object" == typeof window && window, "object" == typeof self && self, "object" == typeof global && global];
|
||||||
|
for (var c = 0; c < a.length; ++c) {
|
||||||
|
var b = a[c];
|
||||||
|
if (b && b.Math == Math) return b
|
||||||
|
}
|
||||||
|
throw Error("Cannot find global object");
|
||||||
|
}
|
||||||
|
var n = m(this);
|
||||||
|
|
||||||
|
function p(a, c) {
|
||||||
|
if (c) a: {
|
||||||
|
var b = n;a = a.split(".");
|
||||||
|
for (var d = 0; d < a.length - 1; d++) {
|
||||||
|
var e = a[d];
|
||||||
|
if (!(e in b)) break a;
|
||||||
|
b = b[e]
|
||||||
|
}
|
||||||
|
a = a[a.length - 1];d = b[a];c = c(d);c != d && null != c && l(b, a, {
|
||||||
|
configurable: !0,
|
||||||
|
writable: !0,
|
||||||
|
value: c
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function q(a) {
|
||||||
|
var c = "undefined" != typeof Symbol && Symbol.iterator && a[Symbol.iterator];
|
||||||
|
return c ? c.call(a) : {
|
||||||
|
next: h(a)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var r = "function" == typeof Object.assign ? Object.assign : function(a, c) {
|
||||||
|
for (var b = 1; b < arguments.length; b++) {
|
||||||
|
var d = arguments[b];
|
||||||
|
if (d)
|
||||||
|
for (var e in d) Object.prototype.hasOwnProperty.call(d, e) && (a[e] = d[e])
|
||||||
|
}
|
||||||
|
return a
|
||||||
|
};
|
||||||
|
p("Object.assign", function(a) {
|
||||||
|
return a || r
|
||||||
|
});
|
||||||
|
p("Array.prototype.fill", function(a) {
|
||||||
|
return a ? a : function(c, b, d) {
|
||||||
|
var e = this.length || 0;
|
||||||
|
0 > b && (b = Math.max(0, e + b));
|
||||||
|
if (null == d || d > e) d = e;
|
||||||
|
d = Number(d);
|
||||||
|
0 > d && (d = Math.max(0, e + d));
|
||||||
|
for (b = Number(b || 0); b < d; b++) this[b] = c;
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
function t(a) {
|
||||||
|
return a ? a : Array.prototype.fill
|
||||||
|
}
|
||||||
|
p("Int8Array.prototype.fill", t);
|
||||||
|
p("Uint8Array.prototype.fill", t);
|
||||||
|
p("Uint8ClampedArray.prototype.fill", t);
|
||||||
|
p("Int16Array.prototype.fill", t);
|
||||||
|
p("Uint16Array.prototype.fill", t);
|
||||||
|
p("Int32Array.prototype.fill", t);
|
||||||
|
p("Uint32Array.prototype.fill", t);
|
||||||
|
p("Float32Array.prototype.fill", t);
|
||||||
|
p("Float64Array.prototype.fill", t);
|
||||||
|
var u = this || self;
|
||||||
|
|
||||||
|
function v(a, c) {
|
||||||
|
a = a.split(".");
|
||||||
|
var b = u;
|
||||||
|
a[0] in b || "undefined" == typeof b.execScript || b.execScript("var " + a[0]);
|
||||||
|
for (var d; a.length && (d = a.shift());) a.length || void 0 === c ? b[d] && b[d] !== Object.prototype[d] ? b = b[d] : b = b[d] = {} : b[d] = c
|
||||||
|
};
|
||||||
|
var w = {
|
||||||
|
color: "white",
|
||||||
|
lineWidth: 4,
|
||||||
|
radius: 6,
|
||||||
|
visibilityMin: .5
|
||||||
|
};
|
||||||
|
|
||||||
|
function x(a) {
|
||||||
|
a = a || {};
|
||||||
|
return Object.assign(Object.assign(Object.assign({}, w), {
|
||||||
|
fillColor: a.color
|
||||||
|
}), a)
|
||||||
|
}
|
||||||
|
|
||||||
|
function y(a, c) {
|
||||||
|
return a instanceof Function ? a(c) : a
|
||||||
|
}
|
||||||
|
|
||||||
|
function z(a, c, b) {
|
||||||
|
return Math.max(Math.min(c, b), Math.min(Math.max(c, b), a))
|
||||||
|
}
|
||||||
|
v("clamp", z);
|
||||||
|
v("drawLandmarks", function(a, c, b) {
|
||||||
|
if (c) {
|
||||||
|
b = x(b);
|
||||||
|
a.save();
|
||||||
|
var d = a.canvas,
|
||||||
|
e = 0;
|
||||||
|
c = q(c);
|
||||||
|
for (var f = c.next(); !f.done; f = c.next())
|
||||||
|
if (f = f.value, void 0 !== f && (void 0 === f.visibility || f.visibility > b.visibilityMin)) {
|
||||||
|
a.fillStyle = y(b.fillColor, {
|
||||||
|
index: e,
|
||||||
|
from: f
|
||||||
|
});
|
||||||
|
a.strokeStyle = y(b.color, {
|
||||||
|
index: e,
|
||||||
|
from: f
|
||||||
|
});
|
||||||
|
a.lineWidth = y(b.lineWidth, {
|
||||||
|
index: e,
|
||||||
|
from: f
|
||||||
|
});
|
||||||
|
var g = new Path2D;
|
||||||
|
g.arc(f.x * d.width, f.y * d.height, y(b.radius, {
|
||||||
|
index: e,
|
||||||
|
from: f
|
||||||
|
}), 0, 2 * Math.PI);
|
||||||
|
a.fill(g);
|
||||||
|
a.stroke(g);
|
||||||
|
++e
|
||||||
|
} a.restore()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
v("drawConnectors", function(a, c, b, d) {
|
||||||
|
if (c && b) {
|
||||||
|
d = x(d);
|
||||||
|
a.save();
|
||||||
|
var e = a.canvas,
|
||||||
|
f = 0;
|
||||||
|
b = q(b);
|
||||||
|
for (var g = b.next(); !g.done; g = b.next()) {
|
||||||
|
var k = g.value;
|
||||||
|
a.beginPath();
|
||||||
|
g = c[k[0]];
|
||||||
|
k = c[k[1]];
|
||||||
|
g && k && (void 0 === g.visibility || g.visibility > d.visibilityMin) && (void 0 === k.visibility || k.visibility > d.visibilityMin) && (a.strokeStyle = y(d.color, {
|
||||||
|
index: f,
|
||||||
|
from: g,
|
||||||
|
to: k
|
||||||
|
}), a.lineWidth = y(d.lineWidth, {
|
||||||
|
index: f,
|
||||||
|
from: g,
|
||||||
|
to: k
|
||||||
|
}), a.moveTo(g.x * e.width, g.y * e.height), a.lineTo(k.x * e.width, k.y * e.height));
|
||||||
|
++f;
|
||||||
|
a.stroke()
|
||||||
|
}
|
||||||
|
a.restore()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
v("drawRectangle", function(a, c, b) {
|
||||||
|
b = x(b);
|
||||||
|
a.save();
|
||||||
|
var d = a.canvas;
|
||||||
|
a.beginPath();
|
||||||
|
a.lineWidth = y(b.lineWidth, {});
|
||||||
|
a.strokeStyle = y(b.color, {});
|
||||||
|
a.fillStyle = y(b.fillColor, {});
|
||||||
|
a.translate(c.xCenter * d.width, c.yCenter * d.height);
|
||||||
|
a.rotate(c.rotation * Math.PI / 180);
|
||||||
|
a.rect(-c.width / 2 * d.width, -c.height / 2 * d.height, c.width * d.width, c.height * d.height);
|
||||||
|
a.translate(-c.xCenter * d.width, -c.yCenter * d.height);
|
||||||
|
a.stroke();
|
||||||
|
a.fill();
|
||||||
|
a.restore()
|
||||||
|
});
|
||||||
|
v("lerp", function(a, c, b, d, e) {
|
||||||
|
return z(d * (1 - (a - c) / (b - c)) + e * (1 - (b - a) / (b - c)), d, e)
|
||||||
|
});
|
||||||
|
}).call(this);
|
||||||
Binary file not shown.
@ -0,0 +1,194 @@
|
|||||||
|
|
||||||
|
var Module = typeof createMediapipeSolutionsPackedAssets !== 'undefined' ? createMediapipeSolutionsPackedAssets : {};
|
||||||
|
|
||||||
|
if (!Module.expectedDataFileDownloads) {
|
||||||
|
Module.expectedDataFileDownloads = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
Module.expectedDataFileDownloads++;
|
||||||
|
(function() {
|
||||||
|
// When running as a pthread, FS operations are proxied to the main thread, so we don't need to
|
||||||
|
// fetch the .data bundle on the worker
|
||||||
|
if (Module['ENVIRONMENT_IS_PTHREAD']) return;
|
||||||
|
var loadPackage = function(metadata) {
|
||||||
|
|
||||||
|
var PACKAGE_PATH = '';
|
||||||
|
if (typeof window === 'object') {
|
||||||
|
PACKAGE_PATH = window['encodeURIComponent'](window.location.pathname.toString().substring(0, window.location.pathname.toString().lastIndexOf('/')) + '/');
|
||||||
|
} else if (typeof process === 'undefined' && typeof location !== 'undefined') {
|
||||||
|
// web worker
|
||||||
|
PACKAGE_PATH = encodeURIComponent(location.pathname.toString().substring(0, location.pathname.toString().lastIndexOf('/')) + '/');
|
||||||
|
}
|
||||||
|
var PACKAGE_NAME = 'blaze-out/k8-opt/genfiles/third_party/mediapipe/web/solutions/hands/hands_solution_packed_assets.data';
|
||||||
|
var REMOTE_PACKAGE_BASE = 'hands_solution_packed_assets.data';
|
||||||
|
if (typeof Module['locateFilePackage'] === 'function' && !Module['locateFile']) {
|
||||||
|
Module['locateFile'] = Module['locateFilePackage'];
|
||||||
|
err('warning: you defined Module.locateFilePackage, that has been renamed to Module.locateFile (using your locateFilePackage for now)');
|
||||||
|
}
|
||||||
|
var REMOTE_PACKAGE_NAME = Module['locateFile'] ? Module['locateFile'](REMOTE_PACKAGE_BASE, '') : REMOTE_PACKAGE_BASE;
|
||||||
|
|
||||||
|
var REMOTE_PACKAGE_SIZE = metadata['remote_package_size'];
|
||||||
|
var PACKAGE_UUID = metadata['package_uuid'];
|
||||||
|
|
||||||
|
function fetchRemotePackage(packageName, packageSize, callback, errback) {
|
||||||
|
if (typeof process === 'object' && typeof process.versions === 'object' && typeof process.versions.node === 'string') {
|
||||||
|
require('fs').readFile(packageName, function(err, contents) {
|
||||||
|
if (err) {
|
||||||
|
errback(err);
|
||||||
|
} else {
|
||||||
|
callback(contents.buffer);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('GET', packageName, true);
|
||||||
|
xhr.responseType = 'arraybuffer';
|
||||||
|
xhr.onprogress = function(event) {
|
||||||
|
var url = packageName;
|
||||||
|
var size = packageSize;
|
||||||
|
if (event.total) size = event.total;
|
||||||
|
if (event.loaded) {
|
||||||
|
if (!xhr.addedTotal) {
|
||||||
|
xhr.addedTotal = true;
|
||||||
|
if (!Module.dataFileDownloads) Module.dataFileDownloads = {};
|
||||||
|
Module.dataFileDownloads[url] = {
|
||||||
|
loaded: event.loaded,
|
||||||
|
total: size
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
Module.dataFileDownloads[url].loaded = event.loaded;
|
||||||
|
}
|
||||||
|
var total = 0;
|
||||||
|
var loaded = 0;
|
||||||
|
var num = 0;
|
||||||
|
for (var download in Module.dataFileDownloads) {
|
||||||
|
var data = Module.dataFileDownloads[download];
|
||||||
|
total += data.total;
|
||||||
|
loaded += data.loaded;
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
total = Math.ceil(total * Module.expectedDataFileDownloads/num);
|
||||||
|
if (Module['setStatus']) Module['setStatus']('Downloading data... (' + loaded + '/' + total + ')');
|
||||||
|
} else if (!Module.dataFileDownloads) {
|
||||||
|
if (Module['setStatus']) Module['setStatus']('Downloading data...');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.onerror = function(event) {
|
||||||
|
throw new Error("NetworkError for: " + packageName);
|
||||||
|
}
|
||||||
|
xhr.onload = function(event) {
|
||||||
|
if (xhr.status == 200 || xhr.status == 304 || xhr.status == 206 || (xhr.status == 0 && xhr.response)) { // file URLs can return 0
|
||||||
|
var packageData = xhr.response;
|
||||||
|
callback(packageData);
|
||||||
|
} else {
|
||||||
|
throw new Error(xhr.statusText + " : " + xhr.responseURL);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send(null);
|
||||||
|
};
|
||||||
|
|
||||||
|
function handleError(error) {
|
||||||
|
console.error('package error:', error);
|
||||||
|
};
|
||||||
|
|
||||||
|
var fetchedCallback = null;
|
||||||
|
var fetched = Module['getPreloadedPackage'] ? Module['getPreloadedPackage'](REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE) : null;
|
||||||
|
|
||||||
|
if (!fetched) fetchRemotePackage(REMOTE_PACKAGE_NAME, REMOTE_PACKAGE_SIZE, function(data) {
|
||||||
|
if (fetchedCallback) {
|
||||||
|
fetchedCallback(data);
|
||||||
|
fetchedCallback = null;
|
||||||
|
} else {
|
||||||
|
fetched = data;
|
||||||
|
}
|
||||||
|
}, handleError);
|
||||||
|
|
||||||
|
function runWithFS() {
|
||||||
|
|
||||||
|
function assert(check, msg) {
|
||||||
|
if (!check) throw msg + new Error().stack;
|
||||||
|
}
|
||||||
|
Module['FS_createPath']("/", "third_party", true, true);
|
||||||
|
Module['FS_createPath']("/third_party", "mediapipe", true, true);
|
||||||
|
Module['FS_createPath']("/third_party/mediapipe", "modules", true, true);
|
||||||
|
Module['FS_createPath']("/third_party/mediapipe/modules", "palm_detection", true, true);
|
||||||
|
Module['FS_createPath']("/third_party/mediapipe/modules", "hand_landmark", true, true);
|
||||||
|
|
||||||
|
/** @constructor */
|
||||||
|
function DataRequest(start, end, audio) {
|
||||||
|
this.start = start;
|
||||||
|
this.end = end;
|
||||||
|
this.audio = audio;
|
||||||
|
}
|
||||||
|
DataRequest.prototype = {
|
||||||
|
requests: {},
|
||||||
|
open: function(mode, name) {
|
||||||
|
this.name = name;
|
||||||
|
this.requests[name] = this;
|
||||||
|
Module['addRunDependency']('fp ' + this.name);
|
||||||
|
},
|
||||||
|
send: function() {},
|
||||||
|
onload: function() {
|
||||||
|
var byteArray = this.byteArray.subarray(this.start, this.end);
|
||||||
|
this.finish(byteArray);
|
||||||
|
},
|
||||||
|
finish: function(byteArray) {
|
||||||
|
var that = this;
|
||||||
|
|
||||||
|
Module['FS_createPreloadedFile'](this.name, null, byteArray, true, true, function() {
|
||||||
|
Module['removeRunDependency']('fp ' + that.name);
|
||||||
|
}, function() {
|
||||||
|
if (that.audio) {
|
||||||
|
Module['removeRunDependency']('fp ' + that.name); // workaround for chromium bug 124926 (still no audio with this, but at least we don't hang)
|
||||||
|
} else {
|
||||||
|
err('Preloading file ' + that.name + ' failed');
|
||||||
|
}
|
||||||
|
}, false, true); // canOwn this data in the filesystem, it is a slide into the heap that will never change
|
||||||
|
|
||||||
|
this.requests[this.name] = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var files = metadata['files'];
|
||||||
|
for (var i = 0; i < files.length; ++i) {
|
||||||
|
new DataRequest(files[i]['start'], files[i]['end'], files[i]['audio'] || 0).open('GET', files[i]['filename']);
|
||||||
|
}
|
||||||
|
|
||||||
|
function processPackageData(arrayBuffer) {
|
||||||
|
assert(arrayBuffer, 'Loading data file failed.');
|
||||||
|
assert(arrayBuffer instanceof ArrayBuffer, 'bad input to processPackageData');
|
||||||
|
var byteArray = new Uint8Array(arrayBuffer);
|
||||||
|
var curr;
|
||||||
|
// Reuse the bytearray from the XHR as the source for file reads.
|
||||||
|
DataRequest.prototype.byteArray = byteArray;
|
||||||
|
var files = metadata['files'];
|
||||||
|
for (var i = 0; i < files.length; ++i) {
|
||||||
|
DataRequest.prototype.requests[files[i].filename].onload();
|
||||||
|
} Module['removeRunDependency']('datafile_blaze-out/k8-opt/genfiles/third_party/mediapipe/web/solutions/hands/hands_solution_packed_assets.data');
|
||||||
|
|
||||||
|
};
|
||||||
|
Module['addRunDependency']('datafile_blaze-out/k8-opt/genfiles/third_party/mediapipe/web/solutions/hands/hands_solution_packed_assets.data');
|
||||||
|
|
||||||
|
if (!Module.preloadResults) Module.preloadResults = {};
|
||||||
|
|
||||||
|
Module.preloadResults[PACKAGE_NAME] = {fromCache: false};
|
||||||
|
if (fetched) {
|
||||||
|
processPackageData(fetched);
|
||||||
|
fetched = null;
|
||||||
|
} else {
|
||||||
|
fetchedCallback = processPackageData;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
if (Module['calledRun']) {
|
||||||
|
runWithFS();
|
||||||
|
} else {
|
||||||
|
if (!Module['preRun']) Module['preRun'] = [];
|
||||||
|
Module["preRun"].push(runWithFS); // FS is not initialized yet, wait for it
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
loadPackage({"files": [{"filename": "/third_party/mediapipe/modules/palm_detection/palm_detection_lite.tflite", "start": 0, "end": 1985440}, {"filename": "/third_party/mediapipe/modules/palm_detection/palm_detection_full.tflite", "start": 1985440, "end": 4326720}, {"filename": "/third_party/mediapipe/modules/hand_landmark/handedness.txt", "start": 4326720, "end": 4326731}], "remote_package_size": 4326731, "package_uuid": "f2b11ac8-0259-41a9-b49f-d0fb8d91f87d"});
|
||||||
|
|
||||||
|
})();
|
||||||
File diff suppressed because one or more lines are too long
Binary file not shown.
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,27 @@
|
|||||||
|
{
|
||||||
|
"name": "@mediapipe/hands",
|
||||||
|
"version": "0.4.1646424915",
|
||||||
|
"description": "Mediapipe Hands Solution",
|
||||||
|
"main": "hands.js",
|
||||||
|
"module": "hands.js",
|
||||||
|
"jsdelivr": "hands.js",
|
||||||
|
"unpkg": "hands.js",
|
||||||
|
"types": "index.d.ts",
|
||||||
|
"author": "mhays@google.com",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"homepage": "https://google.github.io/mediapipe/solutions/hands",
|
||||||
|
"keywords": [ "AR", "ML", "Augmented" ],
|
||||||
|
"devDependencies": {
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
},
|
||||||
|
"browser": {
|
||||||
|
"node-fetch": false,
|
||||||
|
"util": false,
|
||||||
|
"crypto": false
|
||||||
|
},
|
||||||
|
"sideEffects" : []
|
||||||
|
}
|
||||||
@ -0,0 +1,162 @@
|
|||||||
|
<!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>
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/camera_utils/camera_utils.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/control_utils/control_utils.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
|
||||||
|
<title>手语翻译</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./main/test1.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div class="top">
|
||||||
|
</div>
|
||||||
|
<div class="container">
|
||||||
|
<canvas class="output_canvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="container1">
|
||||||
|
<script type="module">
|
||||||
|
const videoElement = document.createElement("video");
|
||||||
|
const canvasElement = document.getElementsByClassName('output_canvas')[0];
|
||||||
|
const canvasCtx = canvasElement.getContext('2d');
|
||||||
|
|
||||||
|
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) {
|
||||||
|
for (const landmarks of results.multiHandLandmarks) {
|
||||||
|
console.log(landmarks)
|
||||||
|
drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS,
|
||||||
|
{color: '#00FF00', lineWidth: 5});
|
||||||
|
drawLandmarks(canvasCtx, landmarks, {color: '#FF0000', lineWidth: 2});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
canvasCtx.restore();
|
||||||
|
}
|
||||||
|
|
||||||
|
const hands = new Hands({locateFile: (file) => {
|
||||||
|
return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${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>
|
||||||
|
</div>
|
||||||
|
<div class="button1">
|
||||||
|
<button>START</button>
|
||||||
|
<button>DESTORY</button>
|
||||||
|
<button>SUMIT</button>
|
||||||
|
</div>
|
||||||
|
<div class="output">
|
||||||
|
<output name = "shuchu" type = "text"></output>
|
||||||
|
</div>
|
||||||
|
<div class="button2">
|
||||||
|
<a href="./test1.html">
|
||||||
|
<button id="btn4" class="btn">VIDEO</button>
|
||||||
|
</a>
|
||||||
|
<a href="./test2.html">
|
||||||
|
<button id="btn5" class="btn">WORD</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands_solution_packed_assets_loader.js" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands_solution_simd_wasm_bin.js" crossorigin="anonymous">
|
||||||
|
</script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,36 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>手语翻译</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="./main/test2.css">
|
||||||
|
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports":{
|
||||||
|
"three":"./main/three.module.js",
|
||||||
|
"three/addons/":"./main/"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div id="container">
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input id="txt" type="text">
|
||||||
|
<button type="button" id="btn" onclick="loadXMLDoc(txt.value)">start</button>
|
||||||
|
</div>
|
||||||
|
<div class="button2">
|
||||||
|
<a href="./test1.html">
|
||||||
|
<button id="btn4" class="btn4" onclick="add">VIDEO</button>
|
||||||
|
</a>
|
||||||
|
<a href="./test2.html">
|
||||||
|
<button id="btn5" class="btn5">WORD</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script type="module" src="./main/main2_class2.js" ></script>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>手语翻译</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/1.css">
|
||||||
|
<script src="/static/three.js-r122/build/three.js"></script>
|
||||||
|
<script src="/static/three.js-r122/examples/jsm/controls/OrbitControls.js" type="module"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="box">
|
||||||
|
<div id="container">
|
||||||
|
</div>
|
||||||
|
<div class="input">
|
||||||
|
<input type="text">
|
||||||
|
</div>
|
||||||
|
<div class="button2">
|
||||||
|
<a href="./test1.html">
|
||||||
|
<button id="btn4" class="btn4">VIDEO</button>
|
||||||
|
</a>
|
||||||
|
<a href="./test2.html">
|
||||||
|
<button id="btn5" class="btn5">WORD</button>
|
||||||
|
</a>
|
||||||
|
<a href="./test3.html">
|
||||||
|
<button id="btn6" class="btn6">SETTING</button>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<script type="module" src="/static/three.js" ></script>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in new issue