目次
はじめに
WordPressにライブカメラの静止画像を埋め込んでページ更新させる方法が簡単に実現できるが、一歩踏み込んでJavaScriptで画像のみ更新させて動画風に表示させてみた。
ライブカメラの設定
最初にライブカメラで撮った静止画像をサーバーに毎秒上書き保存する設定を行う。
パナソニック製カメラのFTP設定
「サーバー」項目の設定
「設定画面 － サーバー － FTPタブ」から各項目を設定
FTPサーバーがローカルサーバーの場合，アドレスは名前解決のいらないIPアドレスを指定すれば，外部にパケットが出なくて不要な処理が省かれる。
「ネットワーク」項目の設定
「設定画面 － ネットワーク － FTP定期タブ」から各項目を設定する
この項目はSDカード保存を指定しているとグレーアウトして設定できない。
「定期送信」をOnとしてディレクトリー名は，ルート保存の場合は「\」，専用ディレクトリー保存の場合は「\livecamera」などとする。尚，保存するディレクトリーはweb公開可能なエリアをFTPサーバーの設定で指定する。（例：D:/www/public_html\livecamera）
ファイル名は任意の名前を指定して固定・毎秒上書き処理する。
送信間隔を1秒毎・解像度はVGAとする。
スケジュールは毎日・24時間を指定する。
WordPressの設定
各ライブカメラが保存した画像を読み込みに行くのに，JavaScriptを使用して読み込み・表示させるコードをWordPressの投稿画面に登録する。
下記のコードをWordPressの投稿記事編集画面のカスタムHTMLから登録する。
修正箇所は画像登録URL 「’https://example.com/live/camera1.jpg’」のパスを修正する。
画像登録URLはブラウザから表示されるか確認しておく。その際セキュリティ対策を解除しておくこと。運用時はセキュリティ対策はしっかり設定する。
下記の例は4枚の画像表示用なので適宜追加・削除する。その際ID「figure・」の修正も行う。
<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener('DOMContentLoaded', function(){
// ページ表示完了した1.1秒後にリロード 1000mSec = 1Sec 書き込みタイミングとずらす
const RELOAD_SPAN = 1100;
function reload(){
// 画像URLにクエリパラメータ付加
document.getElementById('figure1').src = 'https://example.com/live/camera1.jpg' + '?' + Date.now();
document.getElementById('figure2').src = 'https://example.com/live/camera2.jpg' + '?' + Date.now();
document.getElementById('figure3').src = 'https://example.com/live/camera3.jpg' + '?' + Date.now();
document.getElementById('figure4').src = 'https://example.com/live/camera4.jpg' + '?' + Date.now();
}
setInterval(reload, RELOAD_SPAN);
});
</script>
</head>
<body>
<img decoding="auto" loading="eager" alt="" onerror="this.src='https://example.com/live/camera1.jpg';" id="figure1" src="https://example.com/live/camera1.jpg" width="330" height="220">
<img decoding="auto" loading="eager" alt="" onerror="this.src='https://example.com/live/camera2.jpg';" id="figure2" src="https://example.com/live/camera2.jpg" width="330" height="220">
<img decoding="auto" loading="eager" alt="" onerror="this.src='https://example.com/live/camera3.jpg';" id="figure3" src="https://example.com/live/camera3.jpg" width="330" height="220">
<img decoding="auto" loading="eager" alt="" onerror="this.src='https://example.com/live/camera4.jpg';" id="figure4" src="https://example.com/live/camera4.jpg" width="330" height="220">
</body>
</html>コード説明
上記のコードの10-13,20-23行の画像URLを指定してカスタムHTMLに埋め込み
画像読み込み時のチラつきを防止するためimgタグに「decoding=”auto” loading=”eager”」を指定する。WordPressではimg要素とiframe要素に「loading=”lazy”」が自動的に組み込まれる仕組み。
複数の画像を表示させる場合は，10-13,20-23行目のid 「figure」を画像毎に異なるidとする。（例：1枚目画像「figure1」，2枚目画像「figure2」・・・）
時々，画像データ取得に失敗して表示されない事象が発生する。ライブカメラからのFTP書き込みとブラウザからの読み込みが同時に発生してブラウザ側アクセスが排他制御されているようだ。非同期通信でアクセス確認してから読み込みさせる方法を試したが，確認時はOKでも読み込み時にNGとなる。読み込みエラー時にキャッシュした画像を表示させるように指定することにした。「onerror=”this.src=’画像URL’;”」を設定してキャッシュされた画像を表示させる。それでも時々は白くなるのは，ブラウザ毎の挙動により発生していると思われる。Microsoft EdgeやGoogle Chromeは発生するが，iPadのSafariはほぼ発生しない。
ライブカメラからの書き込み頻度1秒毎に対してブラウザからの読み込み頻度を1.1秒としたら気持ち白色フラッシュ発生頻度は減少したように感じる。この読み込み頻度の秒数はページに表示させる画像数によって調整が必要。6枚表示では，1.0秒で良かった。この値はカメラのFTP送信能力・サーバーのFTP受信・画像書込み・読み込み能力・ブラウザのJavaScript処理能力により変わってくるのかな。
ライブカメラ画像
1台のライブカメラ画像を表示させてみた。
読み込みエラー時にキャッシュした画像を表示させるようにしたので，ページを最初に表示させた時の画像がキャッシュされており，時々画像が過去に戻る。
おわりに
複数台のライブカメラ画像をFTP転送で毎秒保存することで，ネットワーク負荷が気になったがそれほどでもなかった。自宅サーバー環境なのでWEBサーバーやFTPサーバーも自宅LANに接続されており，またWEB公開用LANとライブカメラが接続する非公開用LANは物理的に別々に敷設しており負荷分散されている。
