flask 归档 - azhuge233's

树莓派 CSI 摄像头 + Flask 实现轻量 Web 直播串流

2020-03-292020-03-29 azhuge233

Web 界面较硬核，可自行魔改

原作者为 Marcelo Rovai · Github

环境

硬件

Raspberry 3
- 之后的版本都可以
树莓派 CSI 接口的摄像头
显示器
- 可选，我这里接了官方七寸 LCD 屏

软件

Raspbian Buster
python 3.7.7
- flask
- 这两个 buster 自带，应该不用手动安装

参考

步骤

安装摄像头（详见简易树莓派拍照远程监控，为了方便阅读复读一次）
- 排线蓝色一面朝向以太网接口，插反不会 boom 但无法识别
- 不能热插拔
- 摄像头板子上有 led 灯（拍照的时候会亮），注意不要用导电的材料连通，否则灯会坏（反而更隐蔽？），我当时为了省事把摄像头卡在两根 GPIO 针中间，某天碰了一下，一个火花闪过LED再也没亮过
测试摄像头
- 执行指令，拍张照先
```
raspistill -o ~/Desktop/image.jpg
```
  这块没被打码的湿巾桶会作为之后成功运行的证据

建立 flask 项目结构

新建 static 目录（flask 会从该目录加载样式表和 js）

在 static 目录新建样式表 style.css

body{
    background: blue;
    color: yellow;
    padding:1%;
    text-align: center;
}

想美观一点就改一下配色

新建与 static 目录同级的 templates 目录（flask 会从该目录加载 html 模板）

在 templates 目录下新建 index.html

<html>
  <head>
    <title>MJRoBot Lab Live Streaming</title>
    <link rel="stylesheet" href='../static/style.css'/>
  </head>
  <body>
    <h1>MJRoBot Lab Live Streaming</h1>
    <h3><img src="{{ url_for('video_feed') }}" width="50%"></h3>
    <hr>
    <p> @2018 Developed by MJRoBot.org</p>
  </body>
</html>

flask 代码

源代码在参考链接中（作者不是我），这里复读一遍
- 注意：如果选择下载作者的代码，请使用 camWebServer 目录下的代码，camWebServer2 中添加了温湿度传感器 DHT22 的代码，如果没有连接 DHT22 会报错

在 static 的同级目录下新建 app.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#   appCam.py
#   based on tutorial ==> https://blog.miguelgrinberg.com/post/video-streaming-with-flask
#   PiCam Local Web Server with Flask
# MJRoBot.org 19Jan18

from flask import Flask, render_template, Response

# Raspberry Pi camera module (requires picamera package)
from camera_pi import Camera

app = Flask(__name__)


@app.route('/')
def index():
    """Video streaming home page."""
    return render_template('index.html')


def gen(camera):
    """Video streaming generator function."""
    while True:
        frame = camera.get_frame()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')


@app.route('/video_feed')
def video_feed():
    """Video streaming route. Put this in the src attribute of an img tag."""
    return Response(gen(Camera()),
                    mimetype='multipart/x-mixed-replace; boundary=frame')


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

在 static 的同级目录下新建 camera_pi.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-
#
#  camera_pi.py
#  
#  
#  
import time
import io
import threading
import picamera


class Camera(object):
    thread = None  # background thread that reads frames from camera
    frame = None  # current frame is stored here by background thread
    last_access = 0  # time of last client access to the camera

    def initialize(self):
        if Camera.thread is None:
            # start background frame thread
            Camera.thread = threading.Thread(target=self._thread)
            Camera.thread.start()

            # wait until frames start to be available
            while self.frame is None:
                time.sleep(0)

    def get_frame(self):
        Camera.last_access = time.time()
        self.initialize()
        return self.frame

    @classmethod
    def _thread(cls):
        with picamera.PiCamera() as camera:
            # camera setup
            camera.resolution = (320, 240)
            camera.hflip = True
            camera.vflip = True

            # let camera warm up
            camera.start_preview()
            time.sleep(2)

            stream = io.BytesIO()
            for foo in camera.capture_continuous(stream, 'jpeg',
                                                 use_video_port=True):
                # store frame
                stream.seek(0)
                cls.frame = stream.read()

                # reset stream for next frame
                stream.seek(0)
                stream.truncate()

                # if there hasn't been any clients asking for frames in
                # the last 10 seconds stop the thread
                if time.time() - cls.last_access > 10:
                    break
        cls.thread = None

运行 flask
- 执行指令
```
sudo python3 app.py
```
  注意不是 root 用户需要 sudo，不然权限不够无法监听 Web 端口

Continue reading “树莓派 CSI 摄像头 + Flask 实现轻量 Web 直播串流” →

Python Web Flask框架学习（二）

2018-11-042018-11-04 azhuge233

Flask框架学习（一）：Python Web Flask框架学习（一）

参考

Flask Quick Start

Request对象

通过flask的requst对象可以访问由POST或PUT请求传来的数据，只需调用request中的form属性即可。
form属性本身默认为ImmutableMultiDict属性，但是可以通过设置parameter_storage_class来改变其类型。

利用request，我们可以实现一个简单的登陆页面：

@app.route("/")
@app.route("/<name>")
def hello(name=None):
    return render_template("hello.html", name=name)


@app.route("/login", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        if request.form['username'] == "admin" and request.form['password'] == "adminonly": # 通过form属性访问login页面POST来的用户名和密码
            return hello(name=request.form['username']) # 这里会引发一个问题，后文引入Redirect后会解决
        else:
            errmsg = "Username or Password is invalid."
            return error(errmsg=errmsg)
    return render_template("login.html")


@app.route("/error")
@app.route("/error/<ErrMsg>")
def error(errmsg):
    return render_template("error.html", ErrMsg=errmsg)

hello页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello page</title>
</head>
<body>
    <h2>
        This is a Hello Page
    </h2>

    {% if name %}
    <p>
        Hello, {{name}}
    </p>
    {% else %}
    <p> Hello World</p>
    {% endif %}
</body>
</html>

Login页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login</title>
</head>
<body>
    <form method="post" action="login">
        <table>
            <tr>
                <td>Username:</td>
                <td>
                    <input type="text" id="username" name="username" />
                </td>
            </tr>
            <tr>
                <td>Password:</td>
                <td>
                    <input type="password" id="password" name="password" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="Submit" />
                </td>
            </tr>
        </table>
    </form>
</body>
</html>

Error界面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Error</title>
</head>
<body>
    <h2>
        This is a Error Page
    </h2>
    <label>
        {{ ErrMsg }}
    </label>
</body>
</html>

对于此登录模块，输入正确用户名密码后会转向hello界面并显示用户名，输入账号密码不合法则会转向error页面。

在请求form属性中的值时，如果form中没有对应的键，会抛出一个特殊的KeyError异常。其可以被标准的KeyError捕获到，但如果置之不理则会显示一个HTTP 400 Bad Request页面出来。
对于通过URL传来的数据（如?key=value），可以使用args属性来获取
```
searchword = request.args.get('key', '')
```
代码中的注释小问题如下图，虽然显示为hello页面，但URL处依然为login。原因是return时只调用了hello方法，hello方法只是返回了一个HTML页面模板，使其显示在浏览器中，实际上还是停留在login这个方法中的，这里应该使用后文的redirect

Continue reading “Python Web Flask框架学习（二）” →

Python Web Flask框架学习（一）

2018-11-022018-11-02 azhuge233

Flask使用Werkzeug作为WSGI工具库，Jinja2作为模板页面语言

参考

安装Flask

使用命令
```
pip install flask
```

一个简单的Hello World页面

from flask import *

app = Flask(__name__) # 创建flask对象


@app.route('/') # 指定方法对应的url
def hello_world():
    return 'hello world'


if __name__ == "__main__":
    app.run(debug=True) # 启动web应用程序，开启debug模式

在创建flask对象可以更换为其他名称，官方建议传入“__name__”，以免输入错误或重复的名字使flask无法调用模块
在每个方法前使用.route()方法设定url，作用类似于.NET中的RouteConfig

Continue reading “Python Web Flask框架学习（一）” →