【Streamlit】Webカメラの映像を表示する方法

JS2IIU

1年前

こんにちは、JS2IIUです。

この記事では、StreamlitとOpenCVを使ってWebカメラの映像をWebアプリ上に表示する方法を解説します。

Streamlitは、Pythonで記述したコードからインタラクティブなWebアプリを簡単に作成できるフレームワークです。データサイエンスや機械学習の分野で人気があり、データの可視化やモデルのデプロイなどに活用されています。

OpenCVとは？
1. OpenCVのインストール
Streamlitとカメラ映像を組み合わせたアプリのアイデア
StreamlitでWebカメラの映像を表示する手順
参考になるWebページ

OpenCVとは？

OpenCV (Open Source Computer Vision Library) は、画像処理やコンピュータビジョンに特化したオープンソースライブラリです。画像や動画の読み込み、表示、処理など、様々な機能を提供しています。顔認識、物体検出、画像分類など、幅広いアプリケーションで利用されています。

OpenCVのインストール

OpenCVは、pipを使って簡単にインストールできます。コマンドプロンプトまたはターミナルで以下のコマンドを実行してください。

Python

pip install opencv-python

Streamlitとカメラ映像を組み合わせたアプリのアイデア

Webカメラの映像をStreamlitアプリに組み込むことで、以下のような様々なアプリケーションを作成できます。

リアルタイム顔認識: OpenCVの顔検出機能と連携し、Webカメラの映像から顔を検出して年齢や性別を推定するアプリ
物体検出: 事前に学習させた物体検出モデルを使って、Webカメラの映像から特定の物体を検出するアプリ
ジェスチャー認識: 手の動きを認識して、アプリを操作するインターフェース
ARエフェクト: Webカメラの映像にリアルタイムでエフェクトをかけるアプリ
セキュリティカメラ: Webカメラを監視カメラとして利用し、Streamlitアプリで映像をモニタリングする

StreamlitでWebカメラの映像を表示する手順

Webカメラの映像をStreamlitアプリに表示する手順は以下の通りです。

OpenCVでWebカメラの映像を取得する
Streamlitのst.empty()でプレースホルダーを作成する
st.image()でOpenCVから取得した画像を表示する

OpenCVでWebカメラの映像を取得する

OpenCVでWebカメラの映像を取得するには、cv2.VideoCapture(0)を使用します。引数0は、デフォルトのWebカメラを示します。もしうまく映らないときは引数は1, 2, ・・・に変えてみて下さい。

Python

import cv2

cap = cv2.VideoCapture(0)

while True:
  ret, frame = cap.read()
  # retはフレームが正しく読み取れたかどうかを示すブール値
  # frameは読み取った画像データ

  if not ret:
    break

  cv2.imshow('Webcam', frame)

  if cv2.waitKey(1) & 0xFF == ord('q'):
    break

cap.release()
cv2.destroyAllWindows()

WEBカメラにアクセスするために、セキュリティの警告が出ることがあります。

Streamlitのst.empty()でプレースホルダーを作成する

st.empty()は、Streamlitアプリ上に空のコンテナを作成する関数です。このコンテナは、後でst.image()などの関数で画像やテキストを配置するために使用します。

シグネチャ:

Python

st.empty()

st.image()でOpenCVから取得した画像を表示する

st.image()は、Streamlitアプリ上に画像を表示する関数です。OpenCVで取得した画像データを引数に渡すことで、Webカメラの映像をアプリ上に表示できます。

シグネチャ:

Python

st.image(image, caption=None, width=None, use_column_width=None, clamp=False, channels="RGB", output_format="auto", *, use_container_width=False)

st.image()関数は、Streamlitアプリに画像を表示するための関数です。以下に、各パラメータの詳細を説明します。

image: 表示する画像。以下のいずれかの形式で指定できます。
- 画像のURL (文字列)
- ローカル画像ファイルへのパス (文字列またはPathオブジェクト)。パスは絶対パスでも、作業ディレクトリからの相対パスでも構いません。
- <svg xmlns=...</svg>のようなSVG文字列。
- 画像を定義するバイト配列。形状(w,h)または(w,h,1)のモノクロ画像、形状(w,h,3)のカラー画像、または形状(w,h,4)のRGBA画像を含みます。ここで、wとhはそれぞれ画像の幅と高さです。
- 上記のいずれかのリスト。Streamlitは、必要に応じて追加の行にオーバーフローする画像の行としてリストを表示します。
caption: 画像のキャプション (文字列または文字列のリスト)。None (デフォルト) の場合、キャプションは表示されません。image が複数の画像のリストである場合、caption はキャプションのリスト (各画像に1つのキャプション) または None でなければなりません。
width: 画像の幅 (整数または None)。None (デフォルト) の場合、Streamlitは親コンテナの幅まで、画像の本来の幅を使用します。デフォルトの幅がないSVG画像を使用する場合は、width を宣言するか、use_container_width=True を使用する必要があります。
use_column_width: 削除予定。 use_column_width は非推奨であり、将来のリリースで削除される予定です。代わりに use_container_width パラメータを使用してください。
- "auto" の場合、画像の幅を自然なサイズに設定しますが、列の幅を超えないようにします。
- "always" または True の場合、画像の幅を列幅に設定します。
- "never" または False の場合、画像の幅を自然なサイズに設定します。
- 注: 設定されている場合、use_column_width は width パラメータよりも優先されます。
clamp: 画像のピクセル値を有効な範囲 (チャンネルあたり0～255) に固定するかどうか (ブール値)。これはバイト配列画像にのみ使用されます。他の画像タイプは常にクランプされます。
channels: 画像のカラーチャンネル (文字列)。"RGB" または "BGR" のいずれかです。デフォルトは "RGB" です。OpenCVを使用している場合は、OpenCVが"BGR"を使用しているため、"BGR"を指定する必要があることに注意してください。
output_format: 画像の出力形式 (文字列)。"auto"、"PNG"、"JPEG" のいずれかです。デフォルトは "auto" で、入力画像の形式に基づいて出力形式が自動的に選択されます。
use_container_width: 画像の幅をコンテナの幅に設定するかどうか (ブール値)。True の場合、画像はコンテナ全体を埋めるように拡大縮小されます。False (デフォルト) の場合、画像は元の縦横比を維持して表示されます。

これらのパラメータを適切に設定することで、Streamlitアプリに画像を思い通りに表示することができます。

サンプルプログラム

Python

import cv2
import streamlit as st

st.title('Webcam')

# カメラ映像を配置するプレースホルダーを作成
placeholder = st.empty()

cap = cv2.VideoCapture(0)

while True:
  ret, frame = cap.read()
  if not ret:
    break

  # OpenCVはBGRフォーマットなので、RGBに変換
  frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

  # `st.image()`でプレースホルダーに画像を表示
  placeholder.image(frame, channels="RGB")

cap.release()

映像はぼやかしてありますが、このような形でStreamlitとWEBカメラを組み合わせることができます。

プログラムの解説

このコードは、Streamlitを使ってWebカメラの映像をWebアプリ上に表示するシンプルなプログラムです。以下に、コードの詳細な解説をステップごとに行います。

1. ライブラリのインポート

Python

import cv2
import streamlit as st

cv2: OpenCVライブラリをインポートします。OpenCVは、画像や動画の処理に特化した強力なライブラリです。
st: Streamlitライブラリをインポートします。Streamlitは、Pythonで記述したコードからインタラクティブなWebアプリを簡単に作成できるフレームワークです。

2. アプリのタイトル設定

Python

st.title('Webcam')

st.title()関数を使って、Webアプリのタイトルを「Webcam」に設定します。

3. プレースホルダーの作成

Python

# カメラ映像を配置するプレースホルダーを作成
placeholder = st.empty()

st.empty()関数を使って、Webカメラの映像を表示するためのプレースホルダーを作成します。プレースホルダーは、後でst.image()関数で画像を配置するために使用されます。

4. Webカメラへのアクセス

Python

cap = cv2.VideoCapture(0)

cv2.VideoCapture(0)を使って、デフォルトのWebカメラにアクセスします。引数0は、通常はコンピュータに内蔵されているWebカメラを示します。

5. 無限ループ

Python

while True:
  # 処理

while True:を使って無限ループを作成します。このループ内で、Webカメラからフレームを取得し、Streamlitアプリに表示する処理を繰り返します。

6. フレームの取得

Python

  ret, frame = cap.read()

cap.read()関数を使って、Webカメラから1フレーム分の画像を取得します。
- ret: フレームが正しく読み取れたかどうかを示すブール値です。
- frame: 読み取られた画像データです。

7. フレーム取得の確認

Python

  if not ret:
    break

retがFalseの場合、フレームの取得に失敗したことを意味するため、break文でループを終了します。

8. カラーフォーマットの変換

Python

  # OpenCVはBGRフォーマットなので、RGBに変換
  frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)

OpenCVはデフォルトでBGR (Blue-Green-Red) のカラーフォーマットで画像を扱いますが、StreamlitはRGB (Red-Green-Blue) を想定しています。そのため、cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)関数を使って、BGRフォーマットからRGBフォーマットに変換します。

9. 画像の表示

Python

  # `st.image()`でプレースホルダーに画像を表示
  placeholder.image(frame, channels="RGB")

placeholder.image()関数を使って、プレースホルダーに画像を表示します。
- frame: 表示する画像データです。
- channels="RGB": 画像のカラーチャンネルをRGBとして指定します。

10. リソースの解放

Python

cap.release()

cap.release()関数を使って、Webカメラのリソースを解放します。

コードの全体的な流れ

このコードは、Webカメラにアクセスし、そこからフレームを繰り返し取得してStreamlitアプリ上に表示するプログラムです。OpenCVを使ってWebカメラの映像を取得し、Streamlitを使ってWebアプリに表示することで、リアルタイムな画像処理アプリケーションを簡単に作成することができます。