こんにちは、なりかくんと申します。
この記事はなりかくん Advent Calender 2023の7日目の記事です。
この話は、1日目から始めた学校の食堂をIT化させる話の続きとなります。前回でカメラの映像をリアルタイムに送信する部分が出来ました。
今回は、ウェブページからリアルタイムにカメラの映像と人数・混雑度を確認できるようにしたいと思います。
どのようにリアルタイムに取得するか
まず、前回も話しましたがリアルタイムに取得する手順はポーリングでリアルタイム風に取得したいと思います。
今回のカメラでは、1秒間隔でデータを更新するので、ウェブページ側では2秒ごとの情報更新を行っていこうと思います。
ページを作る
今回は、Nuxt3でページを作っていこうと思います。
最終的な取得するコードがこのようになります。
カメラは現時点で１台しかセットアップしていませんが、複数台に対応できるように配列で定義しています。
また、カメラのデータに関しては、キャッシュを無視したいのでタイムスタンプをパラメーターに設定しています。
const cameraList = ref([
{
name: "Camera 1",
data: {
count: 0,
timestamp: 0
},
max: 120,
imgId: "camera-1"
}
])
onMounted(() => {
for (const cameraKey in cameraList.value) {
setInterval(async () => {
const { pending, data: getData } = await useLazyFetch(`https://<domain>/${cameraList.value[cameraKey].imgId}/data.json?t=${new Date().getTime()}`, {
key: String(new Date().getTime())
});
cameraList.value[cameraKey].data = getData.value;
}, 1000);
}
});
表示部分はこのようになっています。（Tailwindcssを使ってます。クソ長いクラス部分はすべて排除してます。）
シンプルに表示するだけです。なお、画像のリンクはキャッシュが効くように最終データのタイムスタンプを活用しています。
<div v-for="camera in cameraList">
<img :src="`https://<domain>/${camera.imgId}/image.png?t=${camera.data.timestamp}`" v-if="camera.data.timestamp"/>
<div>
<div class="flex flex-row justify-between">
<p class="font-bold text-2xl">{{ camera.name }}</p>
<div class="flex flex-row text-gray-500">
<p>データ更新時間: </p>
<p>{{ new Date(camera.data.timestamp).toLocaleDateString() }} {{ new Date(camera.data.timestamp).toLocaleTimeString() }}</p>
</div>
</div>
<div class="grid grid-cols-2">
<div class="flex flex-col">
<p class="text-xl py-1">人数</p>
<div class="flex flex-row flex-nowrap">
<p class="text-4xl">{{ camera.data.count }}</p>
<p class="text-2xl ml-2 mt-2">人</p>
</div>
</div>
<div class="flex flex-col">
<p class="text-xl py-1">混雑度</p>
<div class="flex flex-row flex-nowrap">
<p class="text-4xl">{{ (( Number(camera.data.count) / camera.max ) * 100).toFixed(2) }}</p>
<p class="text-2xl ml-2 mt-2">%</p>
</div>
</div>
</div>
</div>
</div>
ページの認証
今回、学校の生徒だけがページを見れるようにしたいのでGoogleアカウントで認証を設けました。
内部としては、Firebase Authenticationを使ってメールアドレスのドメイン部分が学校のメールアドレスであれば認証を通すようにしています。
コードは、まあネットにありふれているようなコードなので省略します。
最後に
最近ちょっと時間が無くて、記事の内容が大分大雑把になっていますが、書きたいことはかけたので満足です。
最後までお読みいただきありがとうございました。