こんにちは、のっくんです。
今日はラズパイとDjangoを使って、画像配信webアプリを作ってみたいと思います。
ラズパイで写真を撮って、ブラウザで表示する流れです。
ラズパイとDjangoは相性バツグンでして、ほとんどの処理をPythonで実装できます。
コードもシンプルなので1日でできました。
- Raspberry Pi 3 model B+
- Kuman カメラモジュール Raspberry Pi用
目次
作るもの
イメージとしては以下の通り。

ブラウザでアクセスすると、ラズパイのカメラで写真を撮りWebアプリ経由で撮影した画像を表示します。
webアプリにはフレームワークDjangoを使います。モデルやDBは使わず撮った画像をファイルとして保存し表示します。
ディレクトリ構成
以下のように、raspiappというプロジェクトを作成し、imgviewというアプリを作ります。
その中に、写真を格納するstaticディレクトリとテンプレートを格納するtemplatesディレクトリを作りました。
raspiapp ├── db.sqlite3 ├── imgview │ ├── __init__.py │ ├── __pycache__ │ ├── admin.py │ ├── apps.py │ ├── migrations │ ├── models.py │ ├── static │ ├── templates │ ├── tests.py │ └── views.py ├── manage.py └── raspiapp
imgviewというアプリを作ったので、settings.pyにアプリを追加します。
INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'imgview' ]
ビューを作る
ビューでは、画像を撮影しstaticフォルダに保存します。
とてもシンプルな処理です。
ラズパイで取得した画像が上下反転しているので、`cv2.flip`で修正します。
from django.shortcuts import render import cv2 from django.conf import settings DJANGO_PATH = settings.BASE_DIR + "/imgview/static/imgview/" def index(request): camera = cv2.VideoCapture(0) _, frame = camera.read() frame = cv2.flip(frame, -1) cv2.imwrite(DJANGO_PATH + 'live.jpg', frame) return render(request, 'imgview/home.html')
テンプレートを作る
テンプレートもとてもシンプルです。staticフォルダに画像があるのでそれを表示するだけです。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>raspi pic App</title> </head> <body> <h2>ライブ画像配信</h2> {% load static %} <img src="{% static "imgview/live.jpg" %}"> </body> </html>
実行してみる
サーバを立ち上げて、ブラウザでアクセスしてみます。
python manage.py runserver 0.0.0.0:8080

コップを変えて、再度アクセス。

その場で撮影した画像を配信してくれています。
おわり。