【プレビュー画像をつけよう！】
プレビュー画像をつけると、ライブページへ入る前に現在の状況が確認できるので、サイトへ遊びに来てくれた人に親切です。
どんなものかイメージを見てみたい方は当サイトのトップページをご覧になってみてください。左上の「うさぎライブカメラ」の画像です。
プレビュー画像のつけ方：
ライブカメラのＵＲＬの後に、image.jpgとつけたものがプレビュー画像のＵＲＬとなります。
例えば、当サイトのライブカメラのＵＲＬはhttp://usagimary.dyndns.org/ ですが、これにimage.jpgをつけた、
http://usagimary.dyndns.org/image.jpgがプレビュー画像のＵＲＬとなります。
image.jpgはアクセスした瞬間の画像をキャプチャーしています。サイズは320x240ピクセルです。
ちなみにimage2.jpgとすると、小さいサムネイル画像（56x42ピクセル）も表示できます。
- - - - - - - - - - -
（応用編）
このプレビュー画像は、当然のことながらTeveo Liveが起動していないときはエラーとなって表示されません。
そこでJavascriptを使って、ライブ休止中の時は自動的に休止用の画像に差し替えるという機能をつけてみました。
<head>〜</head>タグ内に、
<script language="JavaScript">
<!--
function setImage(name1, src1) {
if (document.images) {
document.images[name1].src = src1;
}
}
// -->
</script>
を入れ、プレビュー画像のタグは以下のように変更。
<img name="img0" src="http://ライブカメラのＵＲＬ/image.jpg" onError="setImage('img0','images/live_off.jpg')">
（注：ライブカメラのＵＲＬの部分はご自分のライブカメラのＵＲＬに置き換えてください）
|
黄色のマーカー部分がポイント。これは何をやっているかというと、「もしプレビュー画像の読込みがエラーだったら、setImageというプログラムを動かして、画像の読込先を"images/live_off.jpg"(休止用画像)に変えなさい」ということをやっているわけです。
ちなみに休止用の画像はimages/live_off.jpgという名前にする必要はありません。何でもオッケーです。
【写真撮影ボタンをつけよう！】
ライブを見ているとたまに面白いシーンに出くわすことがあります。そんな時、写真撮影ボタンをつけておけばバッチリ記録に残しておくことが出来ますね。
するどい方はお気づきかもしれませんが、このしくみは写真ボタンを押したときに、320x240ピクセルで新しくウインドウを開き、そこに上で紹介したプレビュー画像を表示させているだけです。
ですのでやり方はいろいろあるのですが、ここではJavascriptを使って、タイトルバーに自動で連番を振ることができるボタンのソースを載せておきたいと思います。
（ちなみにこのソースはもふもふのariさんが作成したものです。）
<head>〜</head>タグ内に、
<script language="JavaScript">
<!--
imgcnt = 0;
function photo(){
imgcnt++;
imgWin = window.open("","imgwin" + imgcnt,"width=320,height=240,scrollbars=no,toolbar=no,location=no,directories=no,status=no,resizable=no");
with(imgWin.document){
write('<HTML><HEAD><TITLE>Snapshot' + imgcnt + '</TITLE>');
write('</HEAD><BODY topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">');
write('<img border="0" src="http://ライブカメラのＵＲＬ/image.jpg" width="320" height="240">');
write('</BODY></HTML>');
close();
}
}
// -->
</script>
を入れ、ボタンをつけたい位置に以下のタグを入れる
<input type="button" name="snap" value="写真" onClick="photo();">
（注：ライブカメラのＵＲＬの部分はご自分のライブカメラのＵＲＬに置き換えてください）
|
ちなみにボタンが押されてから画像を取得しに行くので、実際キャプチャーされる画像には少しタイムラグがあります。
【ライブ小窓をつけよう！】
ライブ小窓とは、Teveo Liveを小さいウインドウで開くというだけのものですが、コンパクトでジャマにならないので、
小窓で開いてデスクトップの片隅に置きながら他の作業をする、という方も多く、なかなか人気があります。
１．テキストリンクで設置：
<a href=# onClick="window.open('http://ライブカメラのＵＲＬ/','','width=320,height=240,location=no,menubar=no,scrollbars=no,status=no,toolbar=no')">ライブ小窓</a>
２．ボタンで設置：
<input type="button" name="komado" value="ライブ小窓" onClick="window.open('http://ライブカメラのＵＲＬ/','','width=320,height=240,location=no,menubar=no,scrollbars=no,status=no,toolbar=no')">
（注：ライブカメラのＵＲＬの部分はご自分のライブカメラのＵＲＬに置き換えてください）
|
ここで注意すべき点が１つ。
これを設置する場合は、ライブのページ(guest.htm)のbodyタグ内に、topmargin="0" leftmargin="0" marginheight="0" marginwidth="0"の属性を入れてください。
そうしないと、小窓の上側と左側に余白ができてしまい、画面がちょっとずれてしまいます。
【静止画ライブを作ろう！】
Teveo LiveはJavaアプレットで動作しているので、ＰＣの環境によっては見れない方もいると思います。
そんな時でも静止画ライブなら問題なく見ることができます。静止画ライブは上で紹介したプレビュー画像を、
一定時間おきに再読込みさせるだけです。やり方は、
１．ページ自体を再読込みする方法
２．Javascriptを使って静止画像だけを再読込みする方法
の２通りがありますが、どちらでもかまわないでしょう。当サイトでは１の方法でやっています。
１．ページ自体を再読込みする方法
image.jpgを配置したページをつくり、<head>〜</head>タグ内に、
<meta http-equiv="refresh" content="10">
を入れます。content="10"は10秒おきに再読込みするという意味です。30にすれば30秒更新になります。
|
２．Javascriptを使って静止画像だけを再読込みする方法 はここでは割愛します。
|