Several different errors occur when using mediapipe pose

3.8k views Asked by At

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.

Html Code:

<!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:

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.

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. 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

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. 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.

1

There are 1 answers

0
Sehul Viras On

The work around for this is changing the version to 0.2 ... please see the below code:

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