1

我想尝试使用新的 Mediapipe 姿势作为posenet的替代品，但在我的网页中使用它时遇到了几个错误，可以在https://glitch.com/edit/#!/prog-periwinkle-找到朋友。

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

还有一个关于内存越界的问题，但我似乎无法再次运行该错误。

有时，Mediapipe Pose 会工作几秒钟，然后显示最后一个和倒数第二个错误，有时它根本不起作用。不知何故，它可以在不同的项目中工作，但是当我将完全相同的代码位复制并粘贴到这个项目中时，它突然不起作用。我真的不明白我在这里缺少什么。

“工作”示例（它不适用于故障，但它以某种方式在我的本地设备上工作）：https ://glitch.com/edit/#!/surf-super-aphid

我不确定这是媒体管道的问题还是我的问题。我在这里写错了什么，为什么一个例子有效而另一个无效？

编辑：我认为我必须pose.send()在我的动画函数中运行任何其他代码行之前运行该函数，但这只是一个猜测。我不确定是否是这种情况，我必须对现有代码进行大量修改才能使其正常工作。

4

1 回答 1

2

解决此问题的方法是将版本更改为 0.2 ...请参阅以下代码：

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

于 2021-05-10T15:10:41.800 回答