在WEB显示实时视频流

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

安装摄像头

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

大概张这个样子:

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

$ sudo raspi-config 

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

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

$ raspistill -o pic.jpg -t 2000 

显示实时视频

使用 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
'
               b'Content-Type: image/jpeg

' + frame + b'
')
 
@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 =8000, 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舵机打造了摄像机云台,此略。
原文地址:https://www.cnblogs.com/lfri/p/11853318.html