stackoom
  简体   繁体   中英

Several different errors occur when using mediapipe pose

 原文  2020-12-21 04:33:24  4   1    javascript/ machine-learning/ pose/ mediapipe

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 .

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 answers

solution1
 2  2021-05-10 15:10:41

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/pose@0.2/${file} ;},});

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Mediapipe pose SegmentationMask python javascript differences Javascript constructors - when do errors occur? Do not show iframe when errors occur How to output the json response from Laravel using Jquery ajax (when errors occur) Several errors using executeScript and insertCSS Run the same code when 2 different events occur Using several different modals How to disable alert dialogs when errors occur in Atom Electron where the error messages will be inserted when the errors that they represent occur JavaScript: Errors occur when Browser tab loses user focus
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM