问题描述
我想尝试使用新的 Mediapipe 姿势作为posenet 的替代方案,但在我的网页中使用它时遇到了几个错误,可在https://glitch.com/edit/#!/prong-periwinkle-friend 中找到。
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,canvas.width,canvas.height)
}
window.requestAnimationFrame(startThreeJSAnimation);
}
function stopVideo(){
shouldStop = true;
ctx.clearRect(0,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
有时,Mediapipe Pose 会工作几秒钟,然后显示最后一个和倒数第二个错误,有时它根本不起作用。不知何故,它可以在不同的项目中工作,但是当我将完全相同的代码复制并粘贴到这个项目中时,它突然无法工作。我真的不明白我在这里错过了什么。
“工作”示例(它对故障不起作用,但它以某种方式在我的本地设备上工作):https://glitch.com/edit/#!/surf-super-aphid
我不确定这是 mediapipe 的问题还是我的问题。 我在这里写错了什么,为什么一个例子有效而另一个无效?
编辑:我想我必须先运行 pose.send()
函数,然后才能在我的动画函数中运行任何其他代码行,但这只是一个猜测。我不确定是否是这种情况,我必须对现有代码进行大量修改才能使其正常工作。
解决方法
解决此问题的方法是将版本更改为 0.2 ...请参阅以下代码:
const pose = new Pose({locateFile: (file) => {return
https://cdn.jsdelivr.net/npm/@mediapipe/pose@0.2/${file};},});