ラズパイで画像配信webサーバを作る

 

こんにちは、のっくんです。

 

今日はラズパイと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

 

 

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

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

 

おわり。

ABOUTこの記事をかいた人

個人アプリ開発者。Python、Swift、Unityのことを発信します。月間2.5万PVブログ運営。 Twitter:@yamagablog