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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

ネットワーク

ネットワークとは、複数のコンピューター間を接続する技術です。インターネットが最も主流なネットワークの形態で、TCP/IP・HTTP・DNSなどの様々なプロトコルや、ルータやサーバーなどの様々な機器の上に成り立っています。

HTML

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

Q&A

解決済

1回答

2265閲覧

WEBサーバと同一LAN内にあるカメラをWebサイト内で確認したい

madayosh

総合スコア9

Webサーバー

Webサーバーとは、HTTPリクエストに応じて、クライアントに情報を提供するシステムです。

ネットワーク

ネットワークとは、複数のコンピューター間を接続する技術です。インターネットが最も主流なネットワークの形態で、TCP/IP・HTTP・DNSなどの様々なプロトコルや、ルータやサーバーなどの様々な機器の上に成り立っています。

HTML

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

0グッド

0クリップ

投稿2020/10/23 02:51

編集2020/10/23 05:31

実現したいこと

家庭内にwebサーバと、IPカメラ(ブラウザで確認できるもの)を同一LAN内に複数設置し、
Webサイト内で切り替えることでカメラの映像を確認したい。

###現状
現在2台のIPカメラA(192.168.0.10)、IPカメラB(192.168.0.11)を設置している。
一時的にカメラにそれぞれ8000番と8001番を割り当てポート開放・ルーティングし、スマホ(外部インターネット)から
「<グローバルIPアドレス>:8000」で操作画面に入れることを確認できた。

ただし、求めているのは操作画面ではなく撮影中の映像のみであり、操作画面を外から見れるようにするのは危なそうなので避けたい。
カメラの画角などはローカルで入ったPCで操作する為、外部からは定点カメラとして見られれば十分。
そこでカメラに直接アクセスするのではなく、窓口的なWEBサーバを設置することにした。下記のように映像のみをindex.htmlに埋め込み、
ポートの入力とボタン操作でカメラを切り替えるようにできた。
(AXISとはカメラの名前です。)

HTML

1 2ポート:<input type="text" id="port" size="40"> 3<input type="button" value="カメラにアクセス" onclick="ChangeCamera();"></br> 4<img src="http://<グローバルIPアドレス>:8000/axis-cgi/mjpg/video.cgi?resolution=800x450" class="camera center"/>

Javascript

1function ChangeCamera(){ 2 camera.location.href ="ht"+"tp://<グローバルIPアドレス>:" 3 +document.getElementById("port").value 4 +"/axis-cgi/mjpg/video.cgi?resolution=800x450"; 5 return; 6}

現在はカメラを一時的にポート8000番と8001番をポート開放・ルーティングしているためimgのソースを
グローバルIPアドレス:ポートとしているが、同一LAN内にあるためこれをローカルIPアドレスで呼び出せないか。
IPカメラも実質webサーバとしての働きがあるので、本質的には同一LAN内に複数存在するWEBサーバ同士でのやり取りである。
(これが実現すると、外部からはカメラに直接アクセスできず、必ずWEBページを経由するようになるはず・・・)

これから必要になるのはネットワークの設定でしょうか。html側だけで何とかできるのでしょうか。
ご教授お願いします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

これから必要になるのはネットワークの設定でしょうか。html側だけで何とかできるのでしょうか。

まず、HTMLはクライアント側で自由に改竄が出来るものであるという認識が必要です。
そのため、仮にHTMLで何とか出来たとしてもセキュリティ的には問題のある状態になります。

また、ルーターやファイアウォールが高機能なものであれば、ネットワークの設定だけで可能(:8000については/axis-cgi/mjpg/video.cgi?resolution=800x450だけアクセスを許可する)という事も可能ですが、家庭用のルータでは出来ないと思います。


現状はクライアントと各webサーバ(webサーバとそれぞれのカメラ)がそれぞれ通信している状態なので、まずはクライアントとwebサーバのみが通信する様にする必要があります。

例えば

HTML

1ポート:<input type="text" id="port" size="40"> 2<input type="button" value="カメラにアクセス" onclick="ChangeCamera();"></br> 3<img src="/cam_a" class="camera center"/> 4

みたいな感じです(JavaScriptの方はcam_a↔cam_bを差し替えるような形に修正)

次に、webサーバ側で、/cam_aのリクエストを受けた場合にhttp://192.168.0.10/axis-cgi/mjpg/video.cgi?resolution=800x450にアクセスして結果をブラウザに返すような設定を行います。
これはリバースプロキシの設定を行うか、HTMLでは無く適当なサーバサイド言語でwebアプリケーションとして実装することで実現が可能です。

例えば、使用しているwebサーバがApacheなら
Apache リバースプロキシをキーワードにして検索すると必要な設定について調べられますので、調べてみてください。

投稿2020/10/23 03:14

tanat

総合スコア18713

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問