Teachable Machineで作成したPoseModelをml5jsで利用したいが、consoleに結果が表示されないです。
Q&A
Closed
質問したいこと
Teachable Machineでモデルを作成し、ml5で利用しようと試みています。
PoseModelで2つのclassを作成し、ウェブカメラで取得した映像を振り分けて、1つ目のclassだった場合は音が出るようにしたいのですが、その前段階で行き詰ってしまいました。
行き詰っている内容としては、consoleに結果が表示されないことです。
コードも調べてみましたが、おかしいところに気づけないので、お知恵をお借りしたく存じます。
下記にソースコードとコンソール画面を共有するので、なにか気づいた方いらっしゃいましたら、コメントいただけますと幸いです。
ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hands Up!!!</title>
</head>
<body>
<h1>Hands Up!!!</h1>
<video id="video" width="640" height="480" autoplay></video>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
<script>
// Model URL
const poseNetModelURL = 'https://teachablemachine.withgoogle.com/models/EyJrXLhjZ/';
async function main() {
// カメラからの映像取得
const stream = await navigator.mediaDevices.getUserMedia({
audio: false,
video: true,
});
// html内のidがvideoのdomを取得
const video = document.getElementById('video');
// videoにカメラ映像を適用
video.srcObject = stream;
// 自作モデルのロード
const poseNet = ml5.poseNet(
poseNetModelURL + 'model.json',
video,
modelLoaded
);
// モデルのロード完了時に実行される
function modelLoaded() {
console.log('Model Loaded!');
}
poseNet.on('pose', function(results) {
poses = results;
console.log(results[0].label);
});
}
main();
</script>
</body>
</html>
コンソール
▲黄色いアラートは出てますが、赤いエラーはひとつも出てないです。
考えたこと
アラートが問題なのかな？と思い、Google再起動なども行いましたが、変わらずでした。
それ以外の解決策がいま自力では見いだせていないです。。。
よろしくお願い致します。
1
