はじめに

OpenCVをDocker環境で動かそうとしたら、ホストOSにアプリのインストールが必要だったりとGUI環境の構築が面倒だったのでブラウザで表示できるようにしました。

ファイル

$ tree .
.
├── main.py
├── routes.py
├── sample.mp4
├── videos
│   └── output.webm
├── templates
    └── show.html
├── Dockerfile
└── docker-compose.yml

コード

main.py

import cv2

def run():
    videoCapture = cv2.VideoCapture('sample.mp4') # 読み込む動画
    video = cv2.VideoWriter('videos/output.webm', cv.VideoWriter_fourcc(*'VP90'), fps, size)
    while (videoCapture.isOpend()):
        success, frame = videoCapture.read()
        if not success:
            break

        # 任意の処理

        video.write(frame)

    video.release()

MP4でも動画の生成はできるのですが、WebM形式じゃないとブラウザで表示できなかったのでWebM形式で出力しています。

routes.py

from flask import Flask, render_template, request
import main

app = Flask(__name__, static_folder='videos') # static_folderは出力した動画のdirectory

@app.route('/show', methods=['GET'])
def show():    
    main.run()
    return render_template('show.html', video_url='videos/output.webm')

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=8000, threaded=True)

show.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>opencv_web</title>
</head>
<body>
  <video controls src="{{video_url}}" type="video/webm"></video>
</body>
</html>

Dockerfile

FROM python:3.10

RUN apt-get update && apt-get upgrade -y
RUN pip3 install --upgrade pip setuptools

# OpenCV
RUN apt-get install -y libgl1-mesa-glx
RUN pip3 install opencv-python

# Flask
RUN pip3 install Flask

RUN apt-get clean

CMD ["python3", "routes.py"]

docker-compose.yml

version: '3'
services:
  opencv_web:
    tty: true
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - ./:/app
    working_dir: /app
    ports:
      - 8000:8000

使い方

$ docker compose up --build

で起動して、ブラウザでhttp://localhost:8000/showにアクセスすると表示されます。
OpenCV: FFMPEG: tag 0x30395056/'VP90' is not supported with codec id 167 and format 'webm / WebM'というエラーメッセージが出ますが動画は出力されるのでおそらく問題ないです。

感想

表示されるまでに少し時間かかるので、大きいサイズの動画の場合はローカルに環境を構築したほうがいいかもしれないです。