Webブラウザ上でWebカメラから物体認識をしたく、色々と調査した結果Tensorflowjsとcocossdで認識出来そうというところまで来ました。
参考サイト
https://hackernoon.com/tensorflow-js-real-time-object-detection-in-10-lines-of-code-baf15dfb95b2
もとがReactで書かれているものをpureJSで書き直して見たのですが、認識出来るときと認識出来ずエラーで止まる時があります。
おそらく「cocoSsd.load()」でエラーが起きているのですが、jqueryでonloadのタイミングで実行してみたり、videoタグがスタートしたタイミングで実行してみたりと試行錯誤してもエラーが発生してしまいます。
参考サイトでは問題なく動作するようなのですが、、、
コード
js
1<!DOCTYPE html> 2<html> 3 4<head> 5 <title>Object ditection</title> 6 <meta charset="UTF-8"> 7 <meta name="description" content="" /> 8 <meta name="keywords" content="" /> 9 <meta name="viewport" content="width=640"> 10 <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 11 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script> 12 <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script> 13 <style> 14 #canvas { 15 position: fixed; 16 top: 0; 17 left: 0; 18 } 19 20 #video { 21 position: relative; 22 top: 0; 23 left: 0; 24 } 25 26 #debug { 27 word-break: break-all; 28 width: 100%; 29 } 30 31 </style> 32</head> 33 34<body> 35 <div> 36 <video id="video" className="size" autoPlay muted width="600" height="500"></video> 37 <div id="log"></div> 38 <hr> 39 <div id="debug">ログ</div> 40 41 </div> 42 43 <script> 44 const videoSrc = document.getElementById('video'); 45 let modelSrc; 46 let frames; 47 // const modelPromise = cocoSsd.load(); 48 49 if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) { 50 const webCamPromise = navigator.mediaDevices 51 .getUserMedia({ 52 audio: false, 53 video: { 54 facingMode: "user" 55 } 56 }) 57 .then(stream => { 58 video.srcObject = stream; 59 return new Promise((resolve, reject) => { 60 videoSrc.onloadedmetadata = () => { 61 videoSrc.play(); 62 resolve(); 63 }; 64 }); 65 }); 66 const modelPromise = cocoSsd.load(); 67 Promise.all([modelPromise, webCamPromise]).then(values => { 68 detectFrame(videoSrc, values[0]); 69 }); 70 } 71 72 73 //requestAnimationFrame 74 function detectFrame(video, model) { 75 modelSrc = model; 76 model.detect(video).then(predictions => { 77 78 console.log(predictions); 79 $('#debug').html(JSON.stringify(predictions)); 80 frames = requestAnimationFrame(() => { 81 detectFrame(video, model); 82 }); 83 }) 84 }; 85 86 87 </script> 88 89</body> 90 91</html> 92
やりたいこと
スマートフォン(Android、iOSの最新版)ブラウザ上で物体認識をさせて結果を判定したいです。
エラー
error
1Uncaught (in promise) Error: Tensor must have a shape comprised of positive integers but got shape [0,] 2tfjs:2
cocoSsd.load()を実行したときにエラーが発生しますが、
まれに2,3回認識してからエラーになることもあります。
Tensorflowに正しい値が渡っていない気がするのはエラーからも推測できますが、今の所解決策がありません。。
本家のReactソースからは例外処理などは無く普通に動いているように見えるので謎です。。
なにか足りないのだとは思いますが、ぜひ知見をお聞かせいただければと思います。
よろしくお願いいたします。
あなたの回答
tips
プレビュー