質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

0回答

2147閲覧

tensorflowjsでWebカメラから物体認識をしたい

kuroneko334

総合スコア8

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/04/23 09:21

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ソースからは例外処理などは無く普通に動いているように見えるので謎です。。

なにか足りないのだとは思いますが、ぜひ知見をお聞かせいただければと思います。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問