「ソフテックだより」では、ソフトウェア開発に関する情報や開発現場における社員の取り組みなどを定期的にお知らせしています。
さまざまなテーマを取り上げていますので、他のソフテックだよりも、ぜひご覧下さい。

ソフテックだより（発行日順）のページへ
 ソフテックだより技術レポート（技術分野別）のページへ
 ソフテックだより現場の声（シーン別）のページへ

ソフテックだより第３９３号（2022年1月5日発行）
技術レポート

「Webブラウザを使用したオンプレミス型カメラの動画表示」

1. はじめに

近年、カメラを利用したシステムが普及してきています。会社や工場などで使用する防犯・監視目的の大規模なシステムだけでなく、家庭内のペットや赤ちゃん・高齢者の様子を遠隔地からモニタリングする目的の小規模なシステムも登場しています。こうしたシステムで使用されるカメラは、「オンプレミス」型と「クラウド」型の大きく2つに分けることができます。私が携わった案件で、オンプレミス型カメラの動画をWebブラウザに表示させる機会がありましたので、今回はその方法についてご紹介します。

2. オンプレミス型カメラの動画をWebブラウザで表示する方法

2-1. 事例紹介

表示方法をご紹介するにあたり、まずは私が携わった案件を元にした簡単な事例をご紹介します。システム概要としては、異常が発生した場合にアラームが出る既存システムがあり、アラーム発生時に異常が起きている箇所を映しているカメラのライブ動画をWebブラウザで表示できるようにする、というものです。その際、VMS(※)が提供する専用のアプリではなく、自作アプリを使用します。自作する理由はログインの自動化です。
なお、今回はライブ動画の表示としていますが、録画データの表示もほぼ同様の方法で実現できます。

図1. 専用アプリと自作アプリのシステム構成比較

2-2. オンプレミス型カメラの動画をWebブラウザで表示する利点

そもそも「オンプレミス」型と「クラウド」型の違いは何か？という点については、他のWebページに多くの解説や比較情報が掲載されていますので、ここでは詳細な説明を省略させていただきます。簡潔に言えば、自社で必要な設備を揃えて運用まで対応できるのがオンプレミス型、インターネット経由のクラウドサービスを使用するのがクラウド型です。

ほとんどのVMSには専用のWindowsアプリやWebアプリが用意されており、多くはセキュリティ対策のため、ユーザーにパスワードなどのログイン情報を入力させ、ログインしてからでなければ動画を閲覧できないようになっています。
しかし都度ユーザーにログインを求める方法では、先述の事例のような緊急時にだけ動画を表示させたいような場合、リアルタイム性に欠けます。そこで、自作のアプリで自動的にログインする仕組みにすることで、リアルタイム性を補うようにしています。
なお、VMSによっては、動画表示用の専用アプリの一部機能を、SDK(Software Development Kit - ソフトウェア開発用キット)として提供しているものがあります。これを自作アプリに組み込むことで、メインとなる動画表示機能は提供された機能をそのまま使用できます。

Webブラウザを使用する利点は汎用性を高めるためです。Windowsフォームアプリケーションには、ブラウザコンポーネントというWebページを表示できるコントロールがあります。よって、Microsoft EdgeやGoogle ChromeなどのWebブラウザで動画を表示するだけでなく、Windowsフォームアプリケーションにも表示できるようにしています。
注意点として、VMSによってはブラウザ表示に証明書の認証が必要になることがあります。EdgeやChromeはOSが認証している証明書をそのまま使用できますが、FireFoxなどはブラウザ独自に証明書を管理していますので、OSとは別に認証が必要になることがあります。

図2. VMS専用アプリを使用した場合のWebブラウザ表示システム構成

2-3. Webブラウザでの動画表示方法

2-3-1. システム構成

さて、本題のWebブラウザで動画を表示する方法ですが、使用するVMSや既存システムなどで異なります。今回の事例では、VMSからWebブラウザに動画を表示するためのSDKが提供されていましたので、Webページへの動画表示にはSDKを使用します。
システム構成は、1台のPCの中に、既存システムのアプリ、自作のコンソールアプリ、htmlファイル、スクリプトファイルの4つのアプリを入れます。

今回のシステム構成の特徴として、Webページ(htmlファイル)の置き場所が異なります。VMS専用アプリを使用する場合はVMSサーバーがWebサーバーも兼ねている一方で、今回のシステムではWebサーバーを立てずに既存システムのアプリから直接ローカルのhtmlファイルを起動させます。VMS専用のWebページでは表示時に手入力のログインが必須になるため、自動ログインできるようWebページを自作し、且つ簡単な構成で表示できるようにしています。

また、今回携わった案件については、動画を既存システムのアプリにあるブラウザコンポーネントに表示しました。しかし本ページでは、理由は後述しますが、Chromeで表示した画像を掲載しています。予めご了承ください。携わった案件の構成図は下図の通りです。

図3. 携わった案件でのシステム構成図

2-3-2. 各アプリ・ファイルの動作

・コンソールアプリ
アラーム発生時に、既存システムからコンソールアプリを起動してもらいます。その際、引数にアラーム発生箇所を入れてもらいます。コンソールアプリは、アラーム発生箇所とカメラとを紐づけたデータを設定ファイルから取得して、引数のアラーム発生箇所から表示する動画を撮影しているカメラを割り出します。割り出したカメラやVMSログイン用のパスワードなどから作成したURL文字列を、既存システムのアプリの所定の場所に書き込みます。

・htmlファイル
htmlファイルの内容はシンプルで、VMSの提供するSDKを使用して、VMSサーバーからライブ動画を表示できる動画プレイヤーを埋め込むだけです。必要に応じて一時停止や早送りといったボタンを設けることもできますが、今回の事例ではライブ動画を表示するだけのシンプルな内容としています。

・スクリプトファイル
URL文字列の内容から、該当するカメラやログインパスワードなどを取得します。取得したログイン情報を使用してVMSサーバーにログインし、該当カメラのライブ動画を取得します。

既存システムのブラウザコンポーネントではURL文字列が見られない仕様のため、Chromeに表示した例が下図です。ログイン情報の入力無しで、起動直後から動画表示を実現できます。

図4. Chromeに動画を表示した例

URLの「C:/Users/Public/Sample.html」は、ローカルのhtmlファイルのパスです。Webサーバーを立てずにブラウザ表示する場合は、このようにファイルパスを指定します。
URLの「name = ***」と「pass = ***」はVMSへのログイン情報で、「id = ***」の部分は該当するカメラの識別IDです。ここに設定された情報をスクリプトファイルで取得して、該当カメラのライブ動画をhtmlファイルの動画プレイヤーに表示させます。

3. おわりに

クラウド型のVMSの場合、クラウドサーバーはサービス提供業者が管理しているため、専用アプリ以外からのアクセスはできないようにしているものもあるようです。今回ご紹介した自動ログイン機能のように、カスタマイズ性が高い部分はオンプレミス型の良い点です。
使用するVMSなどで実現方法も変わるため、技術面であまり具体的なお話ができず申し訳ございませんでしたが、オンプレミス型カメラを使用したVMSの動画表示方法の１つとして本稿がご参考になれば幸いです。

（T．H．）

※VMSとはVideo Management System（ビデオマネジメントシステム）の略で、主に監視カメラでの映像を保存・管理するためのシステムを指します。