javascript - メディアパイプポーズを使用すると、いくつかの異なるエラーが発生する

Question

新しい Mediapipe ポーズを posenet の代替として使用したかったのですが、Web ページで使用するといくつかのエラーが発生しました。 https://glitch.com/edit/#!/prong-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

また、Memory out of bounds に関するものもありますが、そのエラーが再度実行されるようには見えません。

Mediapipe Pose が数秒間機能した後、最後と最後から 2 番目のエラーが表示されることもあれば、まったく機能しないこともありました。どういうわけか、別のプロジェクトでは機能しますが、まったく同じコードをコピーしてこのプロジェクトに貼り付けると、突然機能しなくなります。ここで何が欠けているのか本当にわかりません。

「動作する」例(グリッチでは動作しませんが、私のローカルデバイスでは何とか動作します): https://glitch.com/edit/#!/surf-super-aphid

これがメディアパイプの問題なのか、私の問題なのかはわかりません。私はここで何を間違って書いたのでしょうか? また、なぜ一方の例は機能し、もう一方の例は機能しませんでしたか?

編集:pose.send()アニメーション関数で他のコード行を実行する前に関数を実行する必要があると思いますが、それは単なる推測です。それが事実であるかどうかはよくわかりません。それを機能させるには、既存のコードを大幅に変更する必要があります。

javascript - メディアパイプ ポーズを使用すると、いくつかの異なるエラーが発生する

1 に答える 1

Related

Reference

javascript - メディアパイプポーズを使用すると、いくつかの異なるエラーが発生する