[7日目] 学校の食堂をIT化させる話 混雑度カメラの状況をリアルタイムで見れるようにする

こんにちは、なりかくんと申します。
この記事はなりかくん 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を使ってメールアドレスのドメイン部分が学校のメールアドレスであれば認証を通すようにしています。

コードは、まあネットにありふれているようなコードなので省略します。

最後に

最近ちょっと時間が無くて、記事の内容が大分大雑把になっていますが、書きたいことはかけたので満足です。
最後までお読みいただきありがとうございました。