teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問HTML,JavaScriptを用いたサーバサイドのカメラ映像をクライアントサイドへ出力させるプログラム

編集履歴

質問編集履歴

1

書式の改善を行いました。また追加でプログラムを載せました。

2019/07/21 13:56

投稿

Ryu-i
Ryu-i

スコア12

test CHANGED
File without changes
test CHANGED
@@ -4,7 +4,9 @@
4
4
 
5
5
 
6
6
 
7
- ### 発生している問題・エラーメッセージ
7
+ ### 発生している問題・エラーメッセージ-
8
+
9
+
8
10
 
9
11
  今の段階で操縦者用のコントロール画面を左右で分け、左側をサーバサイドPCに存在するカメラからの映像を出力させ、右側にロボットを操縦するボタンを配置したいのですが、左側のカメラ映像がサーバサイドに接続されているカメラからの映像ではなく操縦者用のPC内部のカメラからの映像が出力されてしまいます。
10
12
 
@@ -12,9 +14,15 @@
12
14
 
13
15
  どのようなプログラムを書けばサーバサイドの映像を出力できるのでしょうか？
14
16
 
15
-
17
+ また下に操縦者用の画面の右側に表示するボタンのプログラムとカメラのプログラムとボタンのプログラムを左右に合わせて表示するプログラムも載せています。
16
-
18
+
19
+
20
+
17
- ### 該当のソースコード
21
+ ```HTML,JavaScript
22
+
23
+ <!--カメラの映像を出力するプログラム-->
24
+
25
+ <!--camera2.03_0522.html-->
18
26
 
19
27
  <!DOCTYPE html>
20
28
 
@@ -100,13 +108,223 @@
100
108
 
101
109
  </html>
102
110
 
103
- ```ここに言語名を入力
111
+
104
-
105
- HTML、JavaScript
112
+
106
-
107
- ```
113
+ ```
114
+
108
-
115
+ [参考にしたカメラ映像出力のURL]
116
+
109
-
117
+ (https://qiita.com/shiba_mitue/items/6b6b6c1482c8815226de)
118
+
119
+
120
+
121
+ **右側の操縦するためのボタンプログラム**
122
+
123
+ ```
124
+
125
+ <!--コントロール画面のボタン側プログラム-->
126
+
127
+ <!--button02_0522.html-->
128
+
129
+ <!DOCTYPE html>
130
+
131
+ <html lang="ja">
132
+
133
+
134
+
135
+ <head>
136
+
137
+ <!--<meta http-equiv="Content-Script-Type" content="text/javascript" />-->
138
+
139
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
140
+
141
+ <title>コントロール画面</title>
142
+
143
+
144
+
145
+ <style>
146
+
147
+
148
+
149
+ /*ボタンの加工は以下のサイト　http://monopocket.jp/blog/css/1587/　*/
150
+
151
+ .button01 {
152
+
153
+ font-size: 4.0em; /* 文字サイズを1.4emに指定 */
154
+
155
+ font-weight: bold; /* 文字の太さをboldに指定 */
156
+
157
+ padding: 30px 120px; /* 縦方向に10px、 * 横方向に30pxの余白を指定 */
158
+
159
+ background-color: #248; /* 背景色を濃い青色に指定 */
160
+
161
+ color: #fff; /* 文字色を白色に指定 */
162
+
163
+ border-style: none; /* ボタン間のボーダーをなくす */
164
+
165
+ }
166
+
167
+
168
+
169
+ .button01:hover { /*ボタンの位置にマウスを移動させたときの変化*/
170
+
171
+ background-color: #24d; /*ボタン色*/
172
+
173
+ color: #fff; /*ボタンの文字の色*/
174
+
175
+ }
176
+
177
+
178
+
179
+ .button1 { /*div classがbutton1の位置を指定*/
180
+
181
+ position: absolute;
182
+
183
+ left: 50%;
184
+
185
+ top: 20%;
186
+
187
+ }
188
+
189
+
190
+
191
+ .button2 { /*div classがbutton2の位置を指定*/
192
+
193
+ position: absolute;
194
+
195
+ left: 50%;
196
+
197
+ top: 80%;
198
+
199
+ }
200
+
201
+
202
+
203
+ .button3 { /*div classがbutton3の位置を指定*/
204
+
205
+ position: absolute;
206
+
207
+ left: 20%;
208
+
209
+ top: 50%;
210
+
211
+ }
212
+
213
+
214
+
215
+ .button4 { /*div classがbutton4の位置を指定*/
216
+
217
+ position: absolute;
218
+
219
+ left: 80%;
220
+
221
+ top: 50%;
222
+
223
+ }
224
+
225
+ </style>
226
+
227
+ </head>
228
+
229
+
230
+
231
+ <body>
232
+
233
+ <!--div classの使い方は以下のサイト　https://udemy.benesse.co.jp/development/web/html-div-class.html -->
234
+
235
+ <div class="button1">
236
+
237
+ <button class="button01" position: onclick="alert('前進します!')">前進</button> <!--前進のボタンを作成-->
238
+
239
+ </div>
240
+
241
+
242
+
243
+ <div class="button2">
244
+
245
+ <button class="button01" position: onclick="alert('後退します!')">後退</button> <!--後退のボタンを作成-->
246
+
247
+ </div>
248
+
249
+
250
+
251
+ <div class="button3">
252
+
253
+ <button class="button01" position: onclick="alert('左に曲がります!')">左</button> <!--左のボタンを作成-->
254
+
255
+ </div>
256
+
257
+
258
+
259
+ <div class="button4">
260
+
261
+ <button class="button01" position: onclick="alert('右に曲がります!')">右</button> <!--右のボタンを作成-->
262
+
263
+ </div>
264
+
265
+
266
+
267
+
268
+
269
+ </body>
270
+
271
+ </html>
272
+
273
+
274
+
275
+ ```
276
+
277
+ **カメラからの映像を出力するプログラムとコントロールボタンのプログラムを合わせた操縦者画面のプログラム**
278
+
279
+ ```
280
+
281
+ <!--操縦者画面のプログラム-->
282
+
283
+ <!DOCTYPE HTML PUBLIC>
284
+
285
+ <html>
286
+
287
+ <head>
288
+
289
+
290
+
291
+ <title>操縦者画面</title> <!--ページの上にでる部分を表す-->
292
+
293
+ </head>
294
+
295
+
296
+
297
+ <frameset cols="800,*">
298
+
299
+ <!--画面を横に分ける(左は800,右は残り全部)-->
300
+
301
+
302
+
303
+ <frame src="camera2.03_0522.html"> <!--上段から左、右の順。左の部分にscreen.htmlを表示させる-->
304
+
305
+ <frame src="button02_0522.html"> <!--分けた右の部分にbutton01.htmlを表示させる-->
306
+
307
+
308
+
309
+ <noframes> <!--表示させるときにフレームに対応していない場合は以下の部分を表示する。-->
310
+
311
+ <body> <!--7行目、<frameset>には<body>はいらないが(警告は出る)<noframes>の間には<body>はなくてはいけない-->
312
+
313
+ <p>このページはフレームを使用しています</p>
314
+
315
+ </body>
316
+
317
+ </noframes>
318
+
319
+
320
+
321
+ </frameset>
322
+
323
+
324
+
325
+ </html>
326
+
327
+ ```
110
328
 
111
329
  ### 試したこと
112
330
 
@@ -118,7 +336,7 @@
118
336
 
119
337
  ### 補足情報（FW/ツールのバージョンなど）
120
338
 
121
- HTMLを表示させるwebブラウザはFirefoxを想定しています。
339
+ HTMLを表示させる環境はUbuntu16.04でwebブラウザはFirefoxを想定しています。
122
340
 
123
341
  この現在のカメラ映像の出力もネットに上がっていたものを引用したため細かい部分までわかっていない状況です。
124
342