【企画部】

Web 技術を用いた IoT デバイスの画像による目視確認の試み
水矢
１．

亨(企画部新事業戦略グループ)

はじめに

最近では，デジタル技術の利活用といえば DX が注目を集めているが、DX 白書 2023（1）によれば，IoT は DX で利活用されるデータの獲得手段と位置づけられる．また同白書では、IoT はセンサー・無線/有線通信・IoT ゲートウェ
イ・IoT プラットフォームなど、複数の構成要素からなる複合的技術であり，その技術的な複雑さが IoT 利用の難しさが IoT 導入・運用上の障害として顕在化する可能性を指摘している（1）．

図2

KISTEC では，実際に手を動かして複合的技術である
IoT の基本的な部分を体感してもらうための実習を重視し実習用ツール(Web アプリケーション)の画面(2)ながら，IoT 分野の人材育成に継続的に取組んできた．その一環として，リモートワークの普及などの情勢をふまえ，
令和 4 年度には「Web 技術を活用した IoT 実習のオンライン化」に取組んだところ、「実機の様子を画像により遠隔からも確認したい」というニーズが明らかになった（2）．
これに対応するため，Web ブラウザから IoT デバイスの画像による動作状況の目視確認を目的として、Web 技術(WebSocket)を用いて IoT デバイス側から Web ブラウザに
図 3 工業系通信とファイアーウォールの関係(3)画像を伝送する簡易システムの試作を行った．

IoT 分野の人材育成での Web 技術の活用

WebSocket は FRC 6455（2011 年)(4)で標準化されており，IoT は前述のように複合的技術であり，その習得のためWeb ブラウザとサーバ間での双方向通信を可能とする．
前述の IoT 実習用ツールにおいても，Web ブラウザとサ

２．には IoT デバイスの実機を使った実習が有効である．しかし，IoT デバイスを実際に動かしてみるには，そのためのーバの双方向通信が実現できる WebSocket を利用している．WebSocket 通信により，中継サーバを介して受講者が(ソフトウェア，配線や通信等の)環境構築が必要であり，学習者にとって最初のハードルとなっている．

各自に割り当てられたリモートの実機にアクセスし，プログラムの実行や停止などの操作をすることができる．また，そこで，KISTEC では予め環境設定を済ませた IoT デバイス(Raspberry Pi)を用意し，Web アプリケーションを利用

プログラムの標準出力など文字情報による確認も可能であったが，LED の点灯など「実機の様子を画像により遠して遠隔から IoT デバイスを利用する形態により，実習のオンライン化（図 1）に取組んできた．実習用のツールと隔からも確認したい」との要望があり，今後の機能追加が求められている．

して Web アプリケーション(図 2)を用いることで，受講者側で（Web ブラウザ以外の)ソフトウェアのインストール３．

等の作業が発生しないようにしている．
IoT デバイスが Web システムやクラウドとデータ通信を

WebSocket による画像伝送の実装と評価

IoT デバイス側から Web ブラウザに画像を伝送する簡易システムの概略を図 4 に示す．Web ブラウザ，中継サーバ，するには，IAF(Industrial Automation Forum)の ia-cloud プロジェクト(3)が指摘する(図 3)ように，REST API（JSON デー

IoT デバイス（Raspberry Pi 4B）が主な構成要素である．
また，Raspberry Pi 4B(と USB カメラ)でキャプチャーしたタ利用)や WebSocket といった Web 技術が必要となる．

画像を，WebSocket 通信で中継サーバを経由して Web ブラウザに送信するのが，本簡易システムの基本機能である．
IoT 実習用ツールへの活用を想定していることもあり，
画像は JPEG 形式のバイナリデータを Base64 でアスキー文字からなる文字列に変換したうえで JSON の値に含めてWebSocket で伝送した．
図１

Raspberry Pi 4B(Python は 3.7.3)では，USB 接続したオンラインでの IoT 実習のイメージ(2)3KISTEC研究報告2023

【企画部】

図 6 送信間隔 100ms の場合の応答時間
図 4 簡易システムの概略

Web カメラの画像キャプチャーに openCV（4.1.0.25)を，WebSocket 通信には websocket-client (1.6.1)を用いた．中継サーバは WebSocket サーバと Web サーバを兼ねており，Web ブラウザに表示する HTML ファイルも送信する．中継サーバには Deno(1.32.3)を利用し，Deno が標準で提供する HTTP と WebSocket の通信機能を用いた．Web アプリケーションの構築には Hono(3.4.3)を用いた．Web ブラウザ側（Core i5-8265, メモリ 16GB で Windows 10 の PC 上のChrome)では，Web 標準である WebSocket API を用いた．

図 7 送信間隔 200ms の場合の応答時間

簡易システムの評価のため，160×120(QQVGA)，320×240(QVGA)，640×480(VGA)の各サイズの画像を送信間隔４．

（送信処理間の停止時間）は 100[ms], 200[ms]で 300 回送
信を行い，IoT デバイス側で Web ブラウザからの応答を受考察及び今後の課題

図 6 及び図 7 に示した結果から，QVGA(320×240)の画像であれば，5FPS 程度の送信が可能であることが分かった．5FPS であれば，LED の 0.5 秒間隔と 1 秒間隔の点滅信するまでの時間を応答時間として計測した．図 5 は，受信した QVGA 画像を Web ブラウザで表示した例である．の違いを認識でき，IoT 実習の用途で利用可能と考えられる．ただし，実際に目視で確認したところ画像の表示には遅延時間の計測結果を図 6 及び図 7 に示す．なお図中のエラーバーは標準偏差を示している．送信間隔 100ms の1 秒程度の遅延が生じており，Web ブラウザでの描画時間も注意する必要がある．また、実用の際には WebSocketo

場合は，各サイズで平均応答時間が 100ms を超えており，応答の受信前に次の画像を送信するケースが多いと考えと TLS による暗号化と組合わせて利用することが想定され，その処理時間も考慮する必要がある．

られる．送信間隔が 200ms の場合は，QQVGA と QVGA
では平均応答時間が送信間隔の 200ms を下回っており，今後は，IoT 実習用ツールに WebSocket による画像伝送機能を追加する計画である。IoT 実習用ツールに追加実装

応答受信後に次の画像を送信しているケースが多いと考えられる．なお，JPEG データを Base64 での変換で得られし，Raspberry Pi と Web ブラウザの組が複数ある場合の画像伝送の評価を行うことは実用上も重要と考えられる．

た文字列は，QQVGA で約 13000 文字、QVGA で約 33000文字、VGA で約 92000 文字であった。

【謝辞】「Web 技術を活用した IoT 実習のオンライン化の取組み」は公益財団法人 JKA の補助を受けて実施しました．
【参考文献】
1．情報処理推進機構：DX 白書 2023(2023).
2．神奈川県立産業技術総合研究所：「Web 技術を活用したIoT 実習のオンライン化の取組み」，オンライン IoT 実習を含む IoT 技術の人材育成フォーラム事業成果報告書(2023).
3. ia-cloud プロジェクト：ia-cloud の概要
https://ia-cloud.com/about (2023.08.18 閲覧)
4. IETF: RFC 6455 “The WebSocket Protocol”(2011).

図 5 受信した画像(320×240)のブラウザでの表示

4KISTEC研究報告2023