树莓派+Flask实现视频流媒体WEB服务器

发布时间：2018-11-14 16:38

在这个项目中我们将主要学习两个模块。

流式传输视频

将视频集成到Web服务器上

材料清单

1、树莓派V3 X1
2、树莓派3 B型带NoIR夜间相机 X1
3、DHT22温度传感器 X1
4、DHT22相对湿度传感器 X1
5、电阻4K7欧姆 X1

在这个项目中，我使用的是夜间相机，你也可使用普通的树莓派相机（或任何USB相机）来替代。DHT22为可选。在教程中，我将演示如何将视频流传输到WEB页面，并用传感器来显示历史数据。

安装摄像机

1、关闭树莓派，将相机安装在其特定端口上，如下所示：

2、打开你的树莓派并转到树莓派配置工具的主菜单上，并确认相机接口是否开启：
如果你需要开启它，请按[确定]并重新启动你的树莓派。

做一个简单的测试来验证一切是否正常：

raspistill -o /Desktop/image.png

你会看到，在到你树莓派桌面上会出现一个图像图标。 点击打开它。 如果出现图像，说明已准备好流式传输视频！如果你想获得更多关于相机的信息，可点击燝etting started with picamera.。

安装FLASK

有好几种方法可以流式传输视频。我认为最好的（也是“更轻松”）方法是使用Miguel Grinberg开发的Flask。有关Flask如何执行此操作的详细说明，请参阅他的精彩教程：flask-video-streaming-revisited。

在我这个教程中：Python Web服务器将借助Flask和树莓派。我们要更详细地了解了Flask是如何工作、如何实现Web服务器以及从传感器上捕获数据并在网页上显示其状态。在本教程中的第一部分就是发送到我们前端的数据的视频流。

创建一个Web服务器环境：
首先要做的是在你的树莓派上安装Flask。 如果没有，，去终端并输入：

sudo apt-get install python3-flask

当你开始一个新项目时，最好的办法就是创建一个文件夹来保存你的文件。 例如：
回到主页，到你的工作目录：

cd Documents

新建文件夹，例如：

mkdir camWebServer

按照上面的命令，创建一个名为“camWebServer”的文件夹，并在这里保存我们的python脚本：

/home/pi/Document/ camWebServer

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

cd camWebServer

并创建2个新的子文件夹：

mkdir static

和

mkdir templates

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

├── Documents ├── camWebServer ├── templates └── static

完成！让我们在创建好的的环境下，用Python Web 服务器应用程序来流式传输视频。

创建视频流媒体服务器

首先，下载Miguel Grinberg的树莓派相机软件包：camera_pi.py并将其保存在创建的目录camWebServer上。 这是我们项目的核心，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('http://shumeipai.nxez.com/') 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)

以上脚本将你的摄像机视频流式传输到index.html页面上，如下所示：

本文编号：2331725