新型コロナの密対策を画像処理でやってみる
コロナ禍の悩み
会社のミーテイングなどの際、換気をしてるとはいえ、人数多くないと思ったことはありませんか？私はあります。しかももう集まってるし、言い出しづらい。
作ったもの
index.htmlにアクセス → obnizのidを入力 → カメラ起動 → 人を検出 →(ここでエラー？) → obnizでスピーカを鳴らす → 完
エラー内容
人間を検出したらエラーがでてしまいます。chromeの検証ツールでは以下のｱﾗｰﾑが出ています。
sketch.js:62 Uncaught TypeError: Cannot read property 'play' of undefined
at sketch.js:62
at Array.forEach (<anonymous>)
at draw (sketch.js:52)
at h.i.redraw (p5.min.js:3)
at h.<anonymous> (p5.min.js:3)
動かないコード
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Real time Object Detection using YOLO and p5.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.min.js"></script>
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
<script src="https://unpkg.com/obniz@3.5.0/obniz.js" crossorigin="anonymous"></script>
</head>
<body>
<h1>蜜対策</h1>
<p id="status">Loading Model...</p>
<script src="sketch.js"></script>
</body>
</html>
sketch.js
let video;
let detector;
let detections;
let bodyPix;
let obniz = new Obniz("OBNIZ_ID_HERE");
let speaker;
obniz.onconnect = async function() {
let speaker = obniz.wired("Speaker", { signal: 0, gnd: 4 });
if (detection.label === 'person') {
speaker.play(1000);
}
};
function setup() {
createCanvas(480, 360);
video = createCapture(VIDEO);
video.size(width, height);
video.hide();
detector = ml5.objectDetector('yolo', modelReady)
console.log(detector);
}
function modelReady() {
console.log('model loaded')
detect();
}
function detect() {
detector.detect(video, gotResults);
}
function gotResults(err, results) {
if (err) {
console.log(err);
return
}
// console.log(detector);
detections = results;
detect();
}
function draw() {
image(video, 0, 0, width, height);
if (detections) {
detections.forEach(detection => {
noStroke();
fill(255);
strokeWeight(2);
text(detection.label, detection.x + 4, detection.y + 10)
noFill();
strokeWeight(3);
if (detection.label === 'person') {
stroke(0, 255, 0);
speaker.play(1000);
console.log(detection.label);
} else {
stroke(0, 0, 255);
}
rect(detection.x, detection.y, detection.width, detection.height);
})
}
}
動かない
Ml5.jsからYOLOのサンプルコードを引っ張ってきて、取り敢えず人間を検出する所まで行きました、続いてそのプログラムの中にobnizにコネクタできるコードを加えて、人を検出したらスピーカを鳴らすコードを作りました、で試そうと思いましたがうまくいきません。人間を検出したらエラーがでてしまいます。エラーを見て解決を試みますが、うまくいかず・・・今後の課題です。
0
