使用媒体管道姿势时会出现几个不同的错误

Question

I wanted to try and use the new Mediapipe pose as an alternative to posenet, but I encountered several errors when using it in my webpage, which can be found at https://glitch.com/edit/#!/prong-periwinkle-friend .我想尝试使用新的 Mediapipe 姿势来替代posenet，但在我的网页中使用它时遇到了几个错误，可以在https://glitch.com/edit/#!/prong-periwinkle-找到朋友。

Html Code: 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 Code: 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()

You may not receive these errors, but I received them all at some point in time.您可能不会收到这些错误，但我在某个时间点收到了所有错误。 I don't exactly know why each error was to pop up.我不完全知道为什么会弹出每个错误。

I received:我收到了：

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)

and和

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)

as well as也

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)

and finally最后

WebGL: INVALID_OPERATION: texParameter: no texture bound to target

and also one about Memory out of bounds, but I can't seem to get that error running again.还有一个关于 Memory 越界，但我似乎无法再次运行该错误。

Sometimes, Mediapipe Pose would work for a few seconds and then show the last and second-to-last errors, and sometimes it would just not work at all.有时，Mediapipe Pose 会工作几秒钟，然后显示最后一个和倒数第二个错误，有时它根本不起作用。 Somehow, it would work in a different project, but it would suddenly not work when I copy-and-pasted the exact same bits of code into this one.不知何故，它可以在不同的项目中工作，但是当我将完全相同的代码位复制并粘贴到这个项目中时，它突然不起作用。 I really don't understand what I'm missing here.我真的不明白我在这里缺少什么。

"working" example(it doesn't work on glitch but it somehow works on my local device): https://glitch.com/edit/#!/surf-super-aphid “工作”示例（它不适用于故障，但它以某种方式在我的本地设备上工作）： https://glitch.com/edit/#!/surf-super-aphid

I'm not sure if this is a problem with mediapipe or with me.我不确定这是媒体管道的问题还是我的问题。 What did I write wrongly here, and why did one example work while the other didn't?我在这里写错了什么，为什么一个例子有效而另一个无效？

EDIT: I think I have to run the pose.send() function before I run any other lines of code in my animation function, but that's just a guess.编辑：我想我必须先运行pose.send() function，然后再在我的animation function中运行任何其他代码行，但这只是一个猜测。 I'm not really sure if that is the case, and I would have to modify my existing code greatly in order to get it to work.我不确定是否是这种情况，我必须对现有代码进行大量修改才能使其正常工作。

Answer 1

The work around for this is changing the version to 0.2... please see the below code:解决此问题的方法是将版本更改为 0.2... 请参阅以下代码：

const pose = new Pose({locateFile: (file) => {return https://cdn.jsdelivr.net/npm/@mediapipe/pose@0.2/${file} ;},}); const pose = new Pose({locateFile: (file) => {return https://cdn.jsdelivr.net/npm/@mediapipe/pose@0.2/${file} ;},});

使用媒体管道姿势时会出现几个不同的错误

问题描述

1 个解决方案

解决方案1
2 2021-05-10 15:10:41

使用媒体管道姿势时会出现几个不同的错误

问题描述

1 个解决方案

解决方案1 2 2021-05-10 15:10:41

解决方案1
2 2021-05-10 15:10:41