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.
The work around for this is changing the version to 0.2 ... please see the below code:
const pose = new Pose({locateFile: (file) => {returnhttps://cdn.jsdelivr.net/npm/@mediapipe/[email protected]/${file};},});