我想尝试使用新的Mediapipe pose作为posenet的替代品,但在我的网页中使用它时遇到了几个错误,可以在https://glitch.com/edit/#/尖头长春花的朋友。
Html代码:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 id = "label">Mediapipe Pose Test</h1>
<h3 id="loading-text"></h3>
<div id = "container">
<video autoplay="true" id="video"></video>
<canvas id = "draw" ></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js" crossorigin="anonymous"></script>
<script src="./script.js" type="module"></script>
</body>
</html>
Javascript代码:
var video = document.getElementById("video");
var canvas = document.getElementById("draw");
var ctx = canvas.getContext("2d");
var container = document.getElementById("container");
const pose = new Pose({locateFile: (file) => {
return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;
}});
pose.setOptions({
upperBodyOnly: true,
smoothLandmarks: true,
minDetectionConfidence: 0.5,
minTrackingConfidence: 0.5
});
pose.onResults((results) => {console.log(results)});
var shouldStop = true;
async function startVideo(){
var constraints = { audio: false, video: { width: canvas.width, height: canvas.height} };
try{
var stream = await navigator.mediaDevices.getUserMedia(constraints);
video.srcObject = stream;
} catch(err){
console.log(err.name + ": " + err.message);
}
}
function setWidths(){
const w =Math.min(window.innerWidth, window.innerHeight)/1.5;
const h = Math.min(window.innerWidth, window.innerHeight)/1.5;
container.width = w;
container.height = h;
container.style.width = w + "px";
container.style.height = h + "px";
canvas.width = w;
canvas.height = h;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
video.width = w;
video.height = h;
video.style.width = w + "px";
video.style.height = h + "px";
}
console.log("Program started");
console.log(video)
setWidths();
startVideo();
const FRAMES_PER_SECOND = 10;
const FRAME_MIN_TIME = (1000/60) * (60 / FRAMES_PER_SECOND) - (1000/60) * 0.5;
var lastFrameTime = 0;
async function predict(){
await pose.send({image: video})
}
async function startThreeJS(){
shouldStop = false;
var startThreeJSAnimation = async function (time){
if(!shouldStop){
if(time-lastFrameTime < FRAME_MIN_TIME){
requestAnimationFrame(startThreeJSAnimation);
return;
}
lastFrameTime = time;
window.requestAnimationFrame(startThreeJSAnimation);
}
predict()
ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
}
window.requestAnimationFrame(startThreeJSAnimation);
}
function stopVideo(){
shouldStop = true;
ctx.clearRect(0, 0, canvas.width, canvas.height);
scene.remove.apply(scene, scene.children);
}
var stopvideo = document.getElementById("stopVideo");
var threeJS = document.getElementById("threeJS");
async function main(){
await startVideo();
startThreeJS();
}
main()
您可能不会收到这些错误,但我在某个时间点收到了所有错误。我不知道为什么每个错误都会突然出现。
我收到:
Uncaught TypeError: Cannot read property 'https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_packed_assets.data' of undefined
at XMLHttpRequest.xhr.onprogress (VM140 pose_solution_packed_assets_loader.js:48)
和
Uncaught (in promise) RuntimeError: abort(Assertion failed: undefined) at Error
at jsStackTrace (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:67548)
at stackTrace (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:67724)
at abort (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:41039)
at assert (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:28443)
at Object.addRunDependency (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:39866)
at DataRequest.open (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_packed_assets_loader.js:117:37)
at runWithFS (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_packed_assets_loader.js:143:84)
at callRuntimeCallbacks (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:66525)
at preRun (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:38114)
at run (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:380126)
at abort (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:41070)
at assert (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:28443)
at Object.addRunDependency (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:39866)
at DataRequest.open (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_packed_assets_loader.js:117:37)
at runWithFS (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_packed_assets_loader.js:143:84)
at callRuntimeCallbacks (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:66525)
at preRun (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:38114)
at run (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:380126)
at runCaller (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:379984)
at removeRunDependency (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:40825)
以及
VM345 pose_solution_wasm_bin.js:9 Uncaught (in promise) RuntimeError: abort(Module.arguments has been replaced with plain arguments_ (the initial value can be provided on Module, but after startup the value is only looked for on a local variable of that name)) at Error
at jsStackTrace (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:67548)
at stackTrace (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:67724)
at abort (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:41039)
at Object.get (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:21812)
at https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:21636
at da.h (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:28:51)
at Q (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:10:294)
at ka.next (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:11:89)
at k (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:22:318)
at abort (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:41070)
at Object.get (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:21812)
at https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose_solution_wasm_bin.js:9:21636
at da.h (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:28:51)
at Q (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:10:294)
at ka.next (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:11:89)
at k (https://cdn.jsdelivr.net/npm/@mediapipe/pose/pose.js:22:318)
最后是
WebGL: INVALID_OPERATION: texParameter: no texture bound to target
还有一个关于内存越界的问题,但我似乎再也无法运行那个错误了。
有时,媒体管道姿势会工作几秒钟,然后显示最后一个和倒数第二个错误,有时根本不起作用。不知怎的,它会在不同的项目中工作,但当我将完全相同的代码复制并粘贴到这个项目中时,它突然不工作了。我真的不明白我在这里错过了什么。
"工作";例如(它不适用于小故障,但不知何故它适用于我的本地设备(:https://glitch.com/edit/#/冲浪超级蚜虫
我不确定这是mediapipe的问题还是我的问题。我在这里写错了什么,为什么一个例子有效,而另一个没有?
编辑:我想在运行动画函数中的任何其他代码行之前,我必须先运行pose.send()
函数,但这只是猜测。我真的不确定是不是这样,为了让它发挥作用,我必须极大地修改我现有的代码。
解决方法是将版本更改为0.2…请参阅以下代码:
const pose = new Pose({locateFile: (file) => {return
https://cdn.jsdelivr.net/npm/@中间管道/pose@0.2/${file};},});