在WEB显示实时视频流

转载自：https://www.jianshu.com/p/7ef5490fbef7

安装摄像头

这里使用的是树莓派的官方摄像头，使用普通的 USB 摄像头也可以，但前提是你能够搞的定它的驱动。

大概张这个样子：

在关机状态下，将软排线插入到树莓派的 CAMERA 接口上，开机。运行树莓派配置工具来激活摄像头模块：

$ sudo raspi-config

移动光标至菜单中的 "Enable Camera（启用摄像头）"，将其设为Enable（启用状态）。完成之后重启树莓派。

在重启完树莓派后，我们就可以使用Pi Cam了。要用它来拍摄照片的话，可以从命令行运行raspistill：

$ raspistill -o pic.jpg -t

显示实时视频

使用 Flask 框架发布Python Web服务，用户可以获得实时视频流数据。

首先要做的是在你的树莓派上安装Flask。之前已经讨论过如何安装 Flask了，在此不再赘述。

由于此项目涉及到比较多的文件，我们要建立一个工作目录。

切换到我们之前创建的 myPiCar 文件夹，使他成为当前工作目录。

现在，在这个文件夹上，我们将创建两个子文件夹：静态的CSS、最终的JavaScript文件以及HTML文件的模板。转到你的新创建的文件夹。

创建2个新的子文件夹：

mkdir static

mkdir templates

最终的目录“树”，如下所示：

├── myPiCar

        ├── templates

        └── static

下载 Miguel Grinberg 的树莓派相机软件包 camera_pi.py 并将其保存在创建的目录myPiCar上。这是我们项目的核心，Miguel 的安装包相当的不错。

现在，使用Flask，让我们调整原始的 Miguel 的 web 服务器应用程序（app.py），创建一个特定的python脚本来渲染我们的视频。我们可以命名为appCam.py。

from flask import Flask, render_template, Response

# Raspberry Pi camera module (requires picamera package, developed by Miguel Grinberg)

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 =, debug=True, threaded=True)

以上脚本将你的摄像机视频流式传输到 index.html 页面上，在 templates 目录下新建 index.html 文件，写入以下内容：

<html>

  <head>

    <title>Live Streaming</title>

    <link rel="stylesheet" href='../static/style.css'/>

  </head>

  <body>

    <h1>Live Streaming</h1>

    <h3><img src="{{ url_for('video_feed') }}" width="90%"></h3>

    <hr>

  </body>

</html>

index.html 最重要的一行是：

<img src="{{ url_for('video_feed') }}" width="50%">

视频将会在这里“反馈”到我们的网页上。

在静态目录中需包含style.css文件，这是网页正常显示所必须的样式文件。到目前为止，我们的文件树结构如下。

├── myPiCar

      ├── camera_pi.py

      ├── appCam.py

      ├── templates

      |     ├── index.html

      └── static

            ├── style.css

所有文件都可以从我的GitHub仓库下载获得：myPiCar。

现在，在终端上运行python脚本：

sudo python appCam.py

使用你的网络中的任何浏览器，输入 http://树莓派的IP地址:端口号/ ，例如 http://192.168.1.78:8000 ，就可以看到视频信号了。如果你使用树莓派本身的浏览器，也可以输入 http://0.0.0.0:8000 。

原作者为了让摄像头能够上下左右转动，还利用SG90舵机打造了摄像机云台，此略。