运行 poseNet 在网络摄像头视频上出错
Error while running poseNet on Webcam video
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
<title>Yoga Pose Assessment Through Webcam</title>
</head>
<body>
<div>
<video id="video" width="640" height="640" autoplay playsinline style=" -moz- transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
;"</video>
</div>
<script>
// Load camera
async function setupCamera() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error(
'Browser API navigator.mediaDevices.getUserMedia not available');
}
const video = document.getElementById('video');
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': true,
});
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
async function loadVideo() {
const video = await setupCamera();
video.play();
//return video;
}
async function detect() {
let video;
video = await loadVideo();
let net;
// Load posenet
net = await posenet.load();
flipHorizontal = true;
// Scale the image. The smaller the faster
const imageScaleFactor = 0.75;
// Stride, the larger, the smaller the output, the faster
const outputStride = 32;
// Store all the poses
let poses = [];
let minPoseConfidence;
let minPartConfidence;
const pose = await net.estimateSinglePose(video,
imageScaleFactor,
flipHorizontal,
outputStride);
console.log(pose);
}
detect();
</script>
</body>
</html>
当我在 Firefox 中 运行 上述代码时,出现以下错误
TypeError: t is undefined posenet:17:10511
当我运行上面的代码在googlechrome我得到以下错误
Uncaught (in promise) TypeError: Cannot read property 'height' of undefined
at U (posenet:17)
at t.<anonymous> (posenet:17)
at posenet:17
at Object.next (posenet:17)
at posenet:17
at new Promise (<anonymous>)
at u (posenet:17)
at t.estimateSinglePose (posenet:17)
at detect (demo.html:106)
我正在尝试记录姿势对象。我正在使用从网络摄像头拍摄并传递给 poseNet 的视频。
我也想知道我现在用的方法好不好,有什么需要修改的吗
在向用户显示网络摄像头视频时,我使用 css 翻转视频,在将视频传递给 poseNet 时再次将 flipHorizontal 设置为 true。做法是否正确?
如有任何帮助,我们将不胜感激。提前致谢。
你能试着取消注释 loadVideo
中的 return:
async function loadVideo() {
const video = await setupCamera();
video.play();
return video;
}
同时更新 video
标签,如 @cherryblossom
所述:
<video id="video" width="640" height="640" autoplay playsinline
style="-moz-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);"></video>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/posenet"></script>
<title>Yoga Pose Assessment Through Webcam</title>
</head>
<body>
<div>
<video id="video" width="640" height="640" autoplay playsinline style=" -moz- transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
;"</video>
</div>
<script>
// Load camera
async function setupCamera() {
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
throw new Error(
'Browser API navigator.mediaDevices.getUserMedia not available');
}
const video = document.getElementById('video');
const stream = await navigator.mediaDevices.getUserMedia({
'audio': false,
'video': true,
});
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => {
resolve(video);
};
});
}
async function loadVideo() {
const video = await setupCamera();
video.play();
//return video;
}
async function detect() {
let video;
video = await loadVideo();
let net;
// Load posenet
net = await posenet.load();
flipHorizontal = true;
// Scale the image. The smaller the faster
const imageScaleFactor = 0.75;
// Stride, the larger, the smaller the output, the faster
const outputStride = 32;
// Store all the poses
let poses = [];
let minPoseConfidence;
let minPartConfidence;
const pose = await net.estimateSinglePose(video,
imageScaleFactor,
flipHorizontal,
outputStride);
console.log(pose);
}
detect();
</script>
</body>
</html>
当我在 Firefox 中 运行 上述代码时,出现以下错误
TypeError: t is undefined posenet:17:10511
当我运行上面的代码在googlechrome我得到以下错误
Uncaught (in promise) TypeError: Cannot read property 'height' of undefined
at U (posenet:17)
at t.<anonymous> (posenet:17)
at posenet:17
at Object.next (posenet:17)
at posenet:17
at new Promise (<anonymous>)
at u (posenet:17)
at t.estimateSinglePose (posenet:17)
at detect (demo.html:106)
我正在尝试记录姿势对象。我正在使用从网络摄像头拍摄并传递给 poseNet 的视频。 我也想知道我现在用的方法好不好,有什么需要修改的吗
在向用户显示网络摄像头视频时,我使用 css 翻转视频,在将视频传递给 poseNet 时再次将 flipHorizontal 设置为 true。做法是否正确?
如有任何帮助,我们将不胜感激。提前致谢。
你能试着取消注释 loadVideo
中的 return:
async function loadVideo() {
const video = await setupCamera();
video.play();
return video;
}
同时更新 video
标签,如 @cherryblossom
所述:
<video id="video" width="640" height="640" autoplay playsinline
style="-moz-o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1);"></video>