ListCam ライブ画像を発信するＨＴＭＬの書き方

ListCam

	定点観測画像記録発信システム
	Sorry, Only for JAP. & IE3.02 Copyright Muse Ishikawa. 1998

ライブ画像を発信するＨＴＭＬの書き方

ライブ画像を発信するＨＴＭＬの書き方
Windows95/98 や WindowsNT などは、Web ソフトがフリーウェア等でも流通していますので、カメラサーバーとWeb サーバーを兼用することが出来ます。ただし、かなりリソースとPC のパフォーマンスを必要としますので、通常は、カメラサーバーとWeb サーバーは別々のＰＣで用意します。Web サーバーは専用線に接続されていなければなりません。

カメラサーバーとWeb サーバーがLAN で接続出来ない環境ではFTP 転送で、カメラサーバーからWeb サーバーに定期的に送信します。ただ、常時更新画像の提供では、FTP は転送時間が掛かってしまう場合がありますので（回線が混んでるときなど）、輻輳してエラーを起こしてしまったり、ダイヤルアップの回数が増えてプロバイダーの課金が増えるという問題もあります。１時間おき程度の更新でも良いという用途以外では、専用線を確保して行いたいところです。

キャプチャPC のネットワークドライブに接続されたWeb サーバーから、ライブ画像を発信する最も簡単な方法は、ＨＴＭＬに配信する画像ファイル名を記述することです。下記の参考例は、６０秒おきに画像を自動更新する一番簡単な設定です。

★ 注意
しばしば見かけるのが、更新間隔を非常に短く設定しているにもかかわらず、装飾の画像をてんこ盛りにして、回線が混雑している時間帯に画像が全て表示される前にリロードが掛かってしまっている情けないページです。また、一画面に収まりきらない縦長のページで、読む部分が多いくせに、全部読み切れないうちにリロードされちゃって、下の方が読めないページがあります。更新間隔は比較的遅い回線速度のユーザーや、混雑時のトラフィックを考慮して、表示するための時間が十分に得られる間隔を配慮しましょう。また、回線資源節約の為、出来るだけページ全体ではなく、画像だけを更新するようにスクリプトを工夫しましょう。

METAタグでライブ画像ページ全体を強制更新するＨＴＭＬの書き方
もっとも簡単な方法です。 METAタグを使って、強制的にページ全体を更新します。下の例では６０秒おきに更新します。画像のページのコンテンツ量が少ない場合には、ページ全体を更新しても良いでしょう。閲覧する側はブラウザのキャッシュを常時更新に設定しておく必要があります。そうしないとページは更新されても、ブラウザ側で表示してくれません。

<HTML><HEAD>
<TITLE>webcam. html</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<META HTTP-EQUIV="refresh" CONTENT=60>　６０秒おきにリロードさせる設定
</HEAD>
<BODY>
<CENTER>
	<IMG SRC="licam.jpg" WIDTH="320" HEIGHT="240" ALT="image">　
			320×240のlicam.jpgという画像を指定
</CENTER>
</BODY>
</HTML>

JavaScriptでライブ画像を強制更新するＨＴＭＬの書き方
JavaScriputを使って、強制的にページの中の画像のみを更新する事も可能です。下の例では１０秒おきに更新します。ただし、回線帯域が細いと１０秒以上かかるので、もう少し長い時間にする必要があります。どのような帯域幅のユーザーが見るかを考えながら、更新時間を設定するのが良いでしょう。

<HTML>
<HEAD>
	<TITLE>Java Live Camera Sample</TITLE>
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
	<SCRIPT LANGUAGE="JavaScript">
		<!--
		function RefreshImg()
		{
		    uniq = new Date();
		    uniq = "?"+uniq.getTime();
		    newImage = document.imgToLoad.src;
		    index = newImage.indexOf("?", 0);
		    if (index > 0)
		        {
		            newImage = newImage.substr(0, index);
		        }
		    document.imgToLoad.src = "licam.jpg"+uniq;
		}
		// -->
	</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<IMG SRC="licam.jpg" ALT="LiveCamera" name=imgToLoad 
	onload='setTimeout("RefreshImg()", 10000)' 
	onerror='setTimeout("RefreshImg()", 5000)' 
	onabort='setTimeout("RefreshImg()", 10000)' 
	id=imgToLoad naturalsizeflag=0>
</CENTER>
</BODY>
</HTML>

JavaApletでライブ画像を強制更新するＨＴＭＬの書き方
JavaApletを使って、にページの中の画像のみを更新する事も可能です。詳細は以下ページが参考になります。
http://www.t-net.ne.jp/%7Eahi_samo/Live_Cam/howto/howtoLive.htm

Copyright Muse Ishikawa .1997,1998 /画像、ＣＧ、ソフトウェア等の著作権は全て私に帰属しております。転載、引用、いずれの文章へのリンクもなさって構いませんが、是非ご連絡下さい。なお、当サイトに掲載の情報を、 Microsoft社の関係者が入手・利用することをお断りします。私はMicrosoft社の利益独占に反対します。