🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1789閲覧

ブラウザ上でWEBカメラのストリーミングが開始されない

oowt

総合スコア10

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

3クリップ

投稿2019/10/19 08:23

前提・実現したいこと

※初の質問となります。表現が拙い部分がかなり多いかと思いますがどうかご容赦いただけたらと思います。

[第16回 TensorFlow.jsで「じゃんけん」を判別してみよう]
https://book.mynavi.jp/manatee/detail/id=99768

このサイトに倣って現在、ブラウザ上で動作するTensorFlow.jsを使ったじゃんけんゲームを作っています。

サイトの7-1節のWebカメラのストリーミングのサンプルコードを参照しながら書いていますが、HTMLファイルを直接ブラウザで開いてもストリーミングが開始されません。

サンプルコード内のHTMLとpredict.jsファイルを丸写ししたものを
デスクトップに入れていても動きません。

何が足りておらずストリーミングが開始されないのかを教えていただきたいです。

発生している問題・エラーメッセージ

該当のソースコード

[HTML]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href=""> </head> <body> <article id="article"> <h1 id="title" class="text-center h2">Sign Language Digits Clasification<br><small class="text-muted">with Tensorflow.js</small></h1> <div class="container-image"> <video id="main-stream-video" width="480" height="360"></video> </div> <div class="container-b"> <div class="btn-toolbar"> <div class="btn-group"> <button id="start-button" class="btn btn-outline-dark">???? Start</button> </div> <div class="btn-group"> <button id="predict-button" class="btn btn-outline-dark">???? Predict</button> </div> <div class="btn-group"> <button id="clear-button" class="btn btn-outline-dark">✨ Clear</button> </div> </div> </div> <div class="container-b"> <div class="output"> <ul id="console" class="list-unstyled"> <li>hello. please load model.</li> </ul> </div> </div> </article> <footer class="text-center"> <small>&#169; 2018 Studio Identical Twins All Rights Reserved.</small> </footer> <script src="js/tensorflow.min.js"></script> <script src="js/jquery.min.js"></script> <script src="js/predict.js"></script> </body> </html>

[Java Script]

//-----------------------
// start button event
//-----------------------

$("#start-button").click(function(){
loadModel() ;
startWebcam();
});

// //-----------------------
// // load model
// //-----------------------

let model;
async function loadModel() {
console.log("model loading..");
$("#console").html(<li>model loading...</li>);
model=await tf.loadModel(http://localhost:8080/sign_language_vgg16/model.json);
console.log("model loaded.");
$("#console").html(<li>VGG16 pre trained model loaded.</li>);
};

//-----------------------
// start webcam
//-----------------------

var video;
function startWebcam() {
console.log("video streaming start.");
$("#console").html(<li>video streaming start.</li>);
video = $('#main-stream-video').get(0);
vendorUrl = window.URL || window.webkitURL;

navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; navigator.getMedia({ video: true, audio: false }, function(stream) { localStream = stream; video.srcObject = stream; video.play(); }, function(error) { alert("Something wrong with webcam!"); });

}

ryuii👍を押しています

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

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

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

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

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

guest

回答2

0

ご回答ありがとうございます!

jQuery.min.jsがディレクトリ内の"js"ファイル内に入っていなかったことと、本来フォルダ名を"js"とすべきところを"ja"としてしまっていたのが問題だったようで、自己解決できました。
初歩的なミスでお恥ずかしい限りです...

直ちにNavigator.getUserMedia()はnavigator.mediaDevices.getUserMedia()に書き換えようと思います。ご教授いただきありがとうございました!

投稿2019/10/19 14:15

oowt

総合スコア10

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

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

0

ベストアンサー

Navigator.getUserMedia()は名前が変更されて、navigator.mediaDevices.getUserMedia()なったことと、対応ブラウザが限られているので、ご確認ください。

Navigator.getUserMedia() - MDN

投稿2019/10/19 10:26

ryuii

総合スコア438

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問