前提・実現したいこと
現在研究でサーバサイドの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を想定しています。
この現在のカメラ映像の出力もネットに上がっていたものを引用したため細かい部分までわかっていない状況です。
初歩的な質問になってしまうかもしれませんが、ご教授いただければ幸いです。
よろしくお願いいたします。