社区导航

 
查看: 760|回复: 1

[分享] 【树莓派3B+测评】搭建Flask视频流媒体Web服务器

[复制链接]

73

TA的帖子

0

TA的资源

一粒金砂(中级)

Rank: 2

发表于 2018-10-3 17:12:58 | 显示全部楼层 |阅读模式
本帖最后由 DDZZ669 于 2018-10-3 20:07 编辑

上个帖子【树莓派3B+测评】TensorFlow物体识别对tensorflow深度学习框架进行了简单的使用,这次尝试通过Flask搭建视频流媒体Web服务器。

先看一下最终的效果
1.jpg

将树莓派的USB摄像头采集到的图像实时显示在浏览器界面上,视频流的传输用到的是Flask,网页界面通过html编程实现。

首先安装Flask
  1. sudo pip install flask
复制代码

我的树莓派系统已经自带有这个软件包了。

接下来需要新建一个文件夹来存放整个项目文件。我在桌面的test文件夹中新建了一个flask-video文件夹,并且需要在该文件夹中新建static和templates文件夹(这两个文件夹用于存放网页设计相关文件)。另外需要python程序进行摄像头的读取,视频流的传输。

整个项目的结构如下
2.png

app.py代码如下,主要是通过flask实现视频流传输。
程序中端口666是随意设置的。
  1. from flask import Flask, render_template, Response
  2. from camera_opencv import Camera

  3. app = Flask(__name__)

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

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

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

  19. if __name__ == '__main__':
  20.     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


  3. class Camera(BaseCamera):
  4.     video_source = 0

  5.     @staticmethod
  6.     def set_video_source(source):
  7.         Camera.video_source = source

  8.     @staticmethod
  9.     def frames():
  10.         camera = cv2.VideoCapture(Camera.video_source)
  11.         if not camera.isOpened():
  12.             raise RuntimeError('Could not start camera.')

  13.         while True:
  14.             # read current frame
  15.             _, img = camera.read()

  16.             # encode as a jpeg image and return it
  17.             yield cv2.imencode('.jpg', img)[1].tobytes()
复制代码


接下来是html相关文件

index.html内容如下,body中的内容是网页中显示的内容,本例程显示了视频窗口和一个树莓派图标。
<html>
  <head>
    <title>Video Streaming Demonstration</title>
    <link rel="stylesheet" href='../static/style.css'/>
  </head>
  <body>
    <h1>视频流媒体Demo</h1>
    <h3><img src="{{ url_for('video_feed') }}" width="50%"></h3>
    <h3><img src="{{ url_for('static',filename='logo.png') }}" width="200px" height="200px" style="position:absolute;left:100px;top:100px"></h3>
    <hr>
    <p> @2018 Raspberry Pi 3B+ </p>
  </body>
</html>

style.css内容如下,它是index.html的配置文件,用于设置网页的颜色、字体等。
  1. body{
  2.         background: #D2E9FF;
  3.         color: #FF8040;
  4.         padding:1%;
  5.         text-align: center;
  6. }
复制代码


整个项目的代码我上传到了github,地址:flask-video-streaming-usbcamera

程序运行命令为:
  1. python2 app.py
复制代码

然后在浏览器的地址栏中输入
  1. http://localhost:666
复制代码
即可启动。
演示视频:树莓派视频流媒体Demo



此帖出自单片机论坛


回复

使用道具 举报

73

TA的帖子

0

TA的资源

一粒金砂(中级)

Rank: 2

 楼主| 发表于 2018-10-3 21:20:19 | 显示全部楼层
VNC登录如果没有调整树莓派的分辨率,可能会出现下面的结果,屏幕分辨率太小了!
3.jpg
调整屏幕分辨率的方法很简单,在终端中输入:
  1. sudo raspi-config
复制代码

会出现如下界面,通过上下键选择Advanced Options
4.png

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




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

  • 论坛活动 E手掌握

    扫码关注
    EEWORLD 官方微信

  • EE福利  唾手可得

    扫码关注
    EE福利 唾手可得

小黑屋|手机版|Archiver|电子工程世界 ( 京ICP证 060456 )

GMT+8, 2018-11-21 20:47 , Processed in 0.081340 second(s), 16 queries , Gzip On, MemCache On.

快速回复 返回顶部 返回列表