遠くのカメラ映像を表示

前提・実現したいこと

自分の端末から遠くのカメラ映像を表示させたい。

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

画面の装飾は出来たのですが、肝心な「遠くのカメラ映像を表示」する事が出来ません。
現在はデバイスについているカメラ映像を表示する様になっています。
webcameraは買ってあります。
下の写真の枠の中に入る様にお願いします。

該当のソースコード

写真のソースコード

HTML
1<html>
2<font size="8" color="#ff0000">
3<p class="text_center">CLANE STAR ONLINE  
4           　<hr size="5">          
5<html lang="ja">
6<head>
7
8<meta charset="utf-8">
9<link rel="stylesheet" href="./style.css">
10</head>
11<body>                                       <form action="http://localhost/clane/online/home.html"method="post">
12<input type="image" src="http://localhost/clane/online/image/home.jpg" alt=" "></p>
13<meta http-equiv="content-type" charset="utf-8">
14<head>
15<body bgcolor="#4169e1">
16<font size="8" color="#ff0000">
17
18<title>CLANE STAR ONLINE</title>
19 
20 
21</body>
22</html>
23
24
25
26                               <div id="videoPreview">
27  <p> 
28  <font size="3" color="000000">
29  現在接続状況
30  <font size="3" color="ff0000">
31  良好
32</div>
33
34
35
36
37
38<html>
39<head>
40
41  
42  <style>
43  canvas, video{
44    border: 1px solid gray;
45  }
46  </style>
47</head>
48<body>
49
50
51
52                   <video id="camera"      width="500" height="500"></video>
53
54
55
56<script>
57window.onload = () => {
58  const video  = document.querySelector("#camera");
59  const canvas = document.querySelector("#picture");
60  const se     = document.querySelector('#se');
61
62  
63  const constraints = {
64    audio: false,
65    video: {
66      width: 300,
67      height: 200,
68      facingMode: "user"  
69      
70    }
71  };
72
73
74  navigator.mediaDevices.getUserMedia(constraints)
75  .then( (stream) => {
76    video.srcObject = stream;
77    video.onloadedmetadata = (e) => {
78      video.play();
79    };
80  })
81  .catch( (err) => {
82    console.log(err.name + ": " + err.message);
83  });
84
85
86   document.querySelector("#shutter").addEventListener("click", () => {
87    const ctx = canvas.getContext("2d");
88
89
90    video.pause();  
91    se.play();      
92    setTimeout( () => {
93      video.play();    
94    }, 500);
95
96    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
97  });
98};
99</script>
100</body>
101</html>

HTML PHP

### 試したこと

youtubeのライブ映像をHtmlの埋め込みコードを使い表示させてみました。
何回も埋め込みコードを入れるのは大変なので他に方法はないかとこちらで質問させていただきます。

dit.

2020/02/10 06:52

まずは正しいHTMLに直しましょう。

退会済みユーザー

2020/02/10 06:57

僕はこのプログラムで上手く行きました。問題点はどこですか？

dit.

2020/02/10 07:07

質問に提示のコードはこれで一つのファイルですよね？ツッコミどころが多すぎて私の手には負えません。 http://www.htmllint.net/html-lint/htmllint.html 一度チェックしてみては。 DATAタブに切り替え、現在のコードを張り付けて「チェック」してみてください。

Y.H.

2020/02/10 09:04

> 「遠くのカメラ映像を表示」「遠くのカメラ」というのがどういうものなのかよくわかりませんがまずは「近くのカメラ映像を表示」から頑張ってみては？ (近く：同一LAN内とか・・・)

退会済みユーザー

2020/02/10 09:50

https://validator.w3.org/#validate_by_input

行動規範の内容に同意します

回答1件

自分の端末、がどこにあり、
遠くのカメラ、がどこにあるのか、
その経路はどうなっているのか、次第になります。

カメラができることしかできないので、
まずはカメラの仕様やスペックを確認。

自宅や職場などLAN側に置かれるカメラの場合、
インターネット側に公開するためにルーター上で
ポートフォワーディングとかDMZ指定とかいろいろあるし。

ルーターの問題を乗り越えたあとは、
カメラが対応できるHTMLやjsの記述を施せば公開できるかもしれないけど。

検討するにもなんら技術的な情報が見えてこないから、
実現できるようお祈り申し上げます。

投稿2020/02/10 08:46

退会済みユーザー

総合スコア0

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

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

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

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

ただいまの回答率
85.47%

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

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

質問する

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

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