【树莓派3B＋测评】搭建Flask视频流媒体Web服务器

DDZZ669

【树莓派3B＋测评】搭建Flask视频流媒体Web服务器 [复制链接]

上个帖子【树莓派3B＋测评】TensorFlow物体识别对tensorflow深度学习框架进行了简单的使用，这次尝试通过Flask搭建视频流媒体Web服务器。 先看一下最终的效果： 将树莓派的USB摄像头采集到的图像实时显示在浏览器界面上，视频流的传输用到的是Flask,网页界面通过html编程实现。 首先安装Flask：

1. sudo pip install flask

复制代码

我的树莓派系统已经自带有这个软件包了。 接下来需要新建一个文件夹来存放整个项目文件。我在桌面的test文件夹中新建了一个flask-video文件夹，并且需要在该文件夹中新建static和templates文件夹（这两个文件夹用于存放网页设计相关文件）。另外需要python程序进行摄像头的读取，视频流的传输。 整个项目的结构如下： app.py代码如下，主要是通过flask实现视频流传输。 程序中端口666是随意设置的。

1. from flask import Flask, render_template, Response
2. from camera_opencv import Camera
4. app = Flask(__name__)
6. @app.route('/')
7. def index():
8. """Video streaming home page."""
9. return render_template('index.html')
11. def gen(camera):
12. """Video streaming generator function."""
13. while True:
14. frame = camera.get_frame()
15. yield (b'--frame\r\n'
16. b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')
18. @app.route('/video_feed')
19. def video_feed():
20. """Video streaming route. Put this in the src attribute of an img tag."""
21. return Response(gen(Camera()),
22. mimetype='multipart/x-mixed-replace; boundary=frame')
24. if __name__ == '__main__':
25. app.run(host='0.0.0.0', port =666, debug=True,threaded=True)

复制代码

base_camera.py 多线程视频传输（详见github附件） camera_opencv.py 用于获取USB摄像头图像

1. import cv2
2. from base_camera import BaseCamera
5. class Camera(BaseCamera):
6. video_source = 0
8. @staticmethod
9. def set_video_source(source):
10. Camera.video_source = source
12. @staticmethod
13. def frames():
14. camera = cv2.VideoCapture(Camera.video_source)
15. if not camera.isOpened():
16. raise RuntimeError('Could not start camera.')
18. while True:
19. # read current frame
20. _, img = camera.read()
22. # encode as a jpeg image and return it
23. yield cv2.imencode('.jpg', img)[1].tobytes()

复制代码

接下来是html相关文件 index.html内容如下，body中的内容是网页中显示的内容，本例程显示了视频窗口和一个树莓派图标。

视频流媒体Demo

---

@2018 Raspberry Pi 3B+

style.css内容如下，它是index.html的配置文件，用于设置网页的颜色、字体等。

1. body{
2. background: #D2E9FF;
3. color: #FF8040;
4. padding:1%;
5. text-align: center;
6. }

复制代码

整个项目的代码我上传到了github，地址：

链接已隐藏，如需查看请登录或者注册

程序运行命令为：

1. python2 app.py

复制代码

然后在浏览器的地址栏中输入

1. http://localhost:666

复制代码

即可启动。 演示视频：树莓派视频流媒体Demo

DDZZ669

VNC登录如果没有调整树莓派的分辨率，可能会出现下面的结果，屏幕分辨率太小了！

调整屏幕分辨率的方法很简单，在终端中输入：

1. sudo raspi-config

复制代码

会出现如下界面，通过上下键选择Advanced Options


然后选择Resolution，选择一个合适的分辨率，保存，重启树莓派即可。