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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

Q&A

1回答

4243閲覧

HTML,JavaScriptを用いたサーバサイドのカメラ映像をクライアントサイドへ出力させるプログラム

Ryu-i

総合スコア12

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

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

WebRTC

WebRTC(Web Real-Time Communication)とは、プラグイン無しでウェブブラウザ間の音声通話・ビデオチャットなどリアルタイムコミュニケーションができるオープンフレームワークです。W3CがAPIレベルで、IETFがプロトコルレベルでそれぞれ標準化が進められています。

0グッド

0クリップ

投稿2019/07/21 08:58

編集2022/01/12 10:55

前提・実現したいこと

現在研究でサーバサイドのPCにロボットとUSBカメラを接続し、サーバサイドに存在するHTMLとJavascriptで作成した操縦者用の画面をクライアントPCの画面に出力させロボットの遠隔操縦を行おうと考えています。

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

今の段階で操縦者用のコントロール画面を左右で分け、左側をサーバサイドPCに存在するカメラからの映像を出力させ、右側にロボットを操縦するボタンを配置したいのですが、左側のカメラ映像がサーバサイドに接続されているカメラからの映像ではなく操縦者用のPC内部のカメラからの映像が出力されてしまいます。

どのようなプログラムを書けばサーバサイドの映像を出力できるのでしょうか?
また下に操縦者用の画面の右側に表示するボタンのプログラムとカメラのプログラムとボタンのプログラムを左右に合わせて表示するプログラムも載せています。

HTML,JavaScript

1<!--カメラの映像を出力するプログラム--> 2<!--camera2.03_0522.html--> 3<!DOCTYPE html> 4<html> 5 6<head> 7 8</head> 9<body> 10 11 <!--id:動画ファイルを指定、width:画面の幅、height:画面の縦、autoplay:自動再生を指定--> 12 <video id="video" width="740" height="580" autoplay></video> 13 14 <!--<input type="button" value="play" onclick="video_play()"> --> <!--playボタンを押すと止まっている画面が動き出す--> 15 <!--<input type="button" value="pause" onclick="video_pause()"> --> <!--pauseボタンを押すと動いている画面を止める--> 16 17 <script type="text/javascript"> 18 19 //動画流す準備 20 var video = document.getElementById("video"); 21 // getUserMedia によるカメラ映像の取得 22 var media = navigator.mediaDevices.getUserMedia({ 23 video: true,//ビデオを取得する 24 //使うカメラをインカメラか背面カメラかを指定する場合には 25 //video: { facingMode: "environment" },//背面カメラ 26 //video: { facingMode: "user" },//インカメラ 27 audio: false,//音声が必要な場合はture 28 }); 29 30 function video_play() { 31 video.play(); //動画を再生する 32 } 33 function video_pause() { 34 video.pause(); //動画を停止する 35 } 36 //リアルタイムに再生(ストリーミング)させるためにビデオタグに流し込む 37 media.then((stream) => { 38 video.srcObject = stream; 39 }); 40 </script> 41 42 43</body> 44</html> 45

[参考にしたカメラ映像出力のURL]
(https://qiita.com/shiba_mitue/items/6b6b6c1482c8815226de)

右側の操縦するためのボタンプログラム

<!--コントロール画面のボタン側プログラム--> <!--button02_0522.html--> <!DOCTYPE html> <html lang="ja"> <head> <!--<meta http-equiv="Content-Script-Type" content="text/javascript" />--> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>コントロール画面</title> <style> /*ボタンの加工は以下のサイト http://monopocket.jp/blog/css/1587/ */ .button01 { font-size: 4.0em; /* 文字サイズを1.4emに指定 */ font-weight: bold; /* 文字の太さをboldに指定 */ padding: 30px 120px; /* 縦方向に10px、 * 横方向に30pxの余白を指定 */ background-color: #248; /* 背景色を濃い青色に指定 */ color: #fff; /* 文字色を白色に指定 */ border-style: none; /* ボタン間のボーダーをなくす */ } .button01:hover { /*ボタンの位置にマウスを移動させたときの変化*/ background-color: #24d; /*ボタン色*/ color: #fff; /*ボタンの文字の色*/ } .button1 { /*div classがbutton1の位置を指定*/ position: absolute; left: 50%; top: 20%; } .button2 { /*div classがbutton2の位置を指定*/ position: absolute; left: 50%; top: 80%; } .button3 { /*div classがbutton3の位置を指定*/ position: absolute; left: 20%; top: 50%; } .button4 { /*div classがbutton4の位置を指定*/ position: absolute; left: 80%; top: 50%; } </style> </head> <body> <!--div classの使い方は以下のサイト https://udemy.benesse.co.jp/development/web/html-div-class.html --> <div class="button1"> <button class="button01" position: onclick="alert('前進します!')">前進</button> <!--前進のボタンを作成--> </div> <div class="button2"> <button class="button01" position: onclick="alert('後退します!')">後退</button> <!--後退のボタンを作成--> </div> <div class="button3"> <button class="button01" position: onclick="alert('左に曲がります!')">左</button> <!--左のボタンを作成--> </div> <div class="button4"> <button class="button01" position: onclick="alert('右に曲がります!')">右</button> <!--右のボタンを作成--> </div> </body> </html>

カメラからの映像を出力するプログラムとコントロールボタンのプログラムを合わせた操縦者画面のプログラム

<!--操縦者画面のプログラム--> <!DOCTYPE HTML PUBLIC> <html> <head> <title>操縦者画面</title> <!--ページの上にでる部分を表す--> </head> <frameset cols="800,*"> <!--画面を横に分ける(左は800,右は残り全部)--> <frame src="camera2.03_0522.html"> <!--上段から左、右の順。左の部分にscreen.htmlを表示させる--> <frame src="button02_0522.html"> <!--分けた右の部分にbutton01.htmlを表示させる--> <noframes> <!--表示させるときにフレームに対応していない場合は以下の部分を表示する。--> <body> <!--7行目、<frameset>には<body>はいらないが(警告は出る)<noframes>の間には<body>はなくてはいけない--> <p>このページはフレームを使用しています</p> </body> </noframes> </frameset> </html>

試したこと

サーバサイドからクライアントサイドに送るためWebRTCやjqueryなどを中心に調べましたが再現できないもしくはクライアント側にソフトウェアなどを入れてビデオ通話のようなものになってしまうことしかできませんでした。

補足情報(FW/ツールのバージョンなど)

HTMLを表示させる環境はUbuntu16.04でwebブラウザはFirefoxを想定しています。
この現在のカメラ映像の出力もネットに上がっていたものを引用したため細かい部分までわかっていない状況です。
初歩的な質問になってしまうかもしれませんが、ご教授いただければ幸いです。
よろしくお願いいたします。

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

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

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

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

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

yasutomi

2019/07/21 11:54

コードブロックを使用してください。
Ryu-i

2019/07/21 13:58

ご指摘ありがとうございます。投稿を行ったことがなかったため修正しましたが、何かまだございましたらお手数をおかけしますがご連絡ください。 ご教授の程よろしくお願いいたします。
guest

回答1

0

結論として、サーバーPCにストリーミングサーバーを立てる必要があります。

参考にされている記事は、あくまでクライアント側のブラウザで、ローカルの内部カメラを使うためのものです。
サーバー側の映像を配信することはできません。

サーバーPCに「HTML/CSS/JS」と「カメラ映像ストリーミング」配信用の2つのサーバーを立て、操縦者PCのブラウザでその両者を取得する必要があります。
もしJavaScriptに精通されているようでしたら、サーバーにNode.jsを採用してください。
ローカルのファイル監視やストリーミング監視、動画配信など、要件に必要な機能は揃っています。

参考になれば幸いです。

投稿2019/07/21 15:15

編集2019/07/21 15:16
ttakatech

総合スコア118

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

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

Ryu-i

2019/07/22 06:33

遅くなってしまいすみません。 現在「HTML/CSS/JS」用にApacheのサーバを立てているのですが、それだけでなく映像用にNode.jsのサーバも立てた方がよろしいでしょうか? またNode.jsのサーバに関する参考サイトなどがありましたらご教授お願い致します。
ttakatech

2019/07/22 07:06

>映像用にNode.jsのサーバも立てた方がよろしいでしょうか? 立てる必要があるかと思います。ただ、別にNode.jsである必要はなく、動画配信サーバーを組み立てられるものであれば何でも構いません。 私は以前コチラのサイトを参考にストリーミングサーバーを立てました。 https://medium.com/better-programming/video-stream-with-node-js-and-html5-320b3191a6b6 ただし、これは既に録画が終わっているファイルの配信サーバーです。今回の要件に合わせるには、ストリーミングAPIを交えた実装に書き直す必要があるかと思います。 https://qiita.com/masakura/items/5683e8e3e655bfda6756 また、Node.jsではないですが、検索の過程でこのようなサイトを見つけました。コチラのほうが実装は楽かもしれません。 https://qiita.com/brly__/items/25cd423c348cbc302b4a
Ryu-i

2019/07/23 02:14

ありがとうございます、参考にして新たなプログラムを作成してみたいと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問