Jetson 12 使用 Flask 实现低延时图传

来自Waveshare Wiki
跳转至: 导航搜索

使用 Flask 实现低延时图传

本章节介绍如何使用 Flask 建立一个 Web 应用,用于显示机器人摄像头的实时画面,由于 Web 应用具有可跨平台的特性,用户可以在手机/PC/平板等设备上通过浏览器来观看摄像头的实时画面,实现无线图传功能。

什么是 Flask?

Flask 是一个轻量级的Web应用框架,用于使用 Python 快速构建Web应用。

  • 轻量级:Flask 是一个轻量级框架,它的核心库相对较小,但具有足够的灵活性和可扩展性,使得开发者可以选择添加需要的扩展和库。
  • 简单易用:Flask 设计简单,容易上手。它的API清晰明了,文档详尽,使得开发者能够迅速开始并快速构建Web应用。
  • 路由系统:Flask使用装饰器来定义URL路由,将请求映射到相应的处理函数。这使得创建不同页面和处理不同请求变得直观而简单。
  • 模板引擎:Flask集成了 Jinja2 模板引擎,使得在应用中构建动态内容变得更加容易。模板引擎允许你在HTML中嵌入动态生成的内容。
  • 集成开发服务器:Flask带有一个简单的集成开发服务器,方便开发和调试。然而,在生产环境中,建议使用更强大的Web服务器,如 Gunicorn 或 uWSGI。
  • 插件和扩展:Flask支持许多插件和扩展,以便添加额外的功能,如数据库集成、身份验证、表单处理等。
  • RESTful支持:Flask对RESTful风格的API提供了良好的支持,使得构建和设计RESTful API变得简单。
  • WSGI兼容:Flask 是基于WSGI(Web Server Gateway Interface)的,这使得它能够在许多符合WSGI标准的Web服务器上运行。
  • 社区活跃:Flask拥有庞大且活跃的社区,这意味着你可以轻松地找到大量的文档、教程和第三方扩展,以及得到支持。

准备工作

由于产品开机默认会自动运行主程序,主程序会占用摄像头资源,这种情况下是不能使用本教程的,需要结束主程序或禁止主程序自动运行后再重新启动机器人。

这里需要注意的是,由于机器人主程序中使用了多线程且由 crontab 配置开机自动运行,所以常规的 sudo killall python 的方法通常是不起作用的,所以我们这里介绍禁用主程序自动运行的方法。

如果你已经禁用了机器人主程序的开机自动运行,则不需要执行下面的结束主程序章节。

结束主程序

1. 点击上方本页面选项卡旁边的 “+”号,会打开一个新的名为 Launcher 的选项卡。

2. 点击 Other 内的 Terminal,打开终端窗口。

3. 在终端窗口内输入 bash 后按回车。

4. 现在你可以使用 Bash Shell 来控制机器人了。

5. 输入命令: sudo killall -9 python


Web 应用例程

注意,不能在 Jupyter Lab 中运行下面的代码块

由于 Flask 应用会与 Jupyter Lab 在端口号的使用上产生冲突,所以以下代码不能在 Jupyter Lab 中运行,以下程序存储在 tutorial_cn 和 tutorial_en 中的名为 12 的文件夹内, 在 12 文件夹内还有一个名为 template 的文件夹用于存储网页资源,以下是例程的运行方法。

1. 用上文介绍的方式来打开终端,此时注意左侧的文件夹路径,新打开的终端默认的路径与左侧的文件路径相同,你需要浏览到 tutorial_cn 或 tutorial_en 文件夹内,打开终端后输入 cd 12 浏览到 12 文件夹内。

2. 使用以下命令来启动 Flask Web 应用服务端: python flask_camera.py

3. 然后在同一局域网内的设备(也可以是本设备在浏览器中打开一个新的标签页)中打开浏览器,输入Jetson的IP:5000(例如Jetson的IP是192.168.10.104的话,则打开192.168.10.104:5000这个地址),注意 : 需要为英文的冒号。

4. 在终端中使用 Ctrl + C 来结束运行。

Flask 的程序介绍

from flask import Flask, render_template, Response  # 从flask库导入Flask类,render_template函数用于渲染HTML模板,Response类用于生成响应对象
from picamera2 import Picamera2  # 从picamera2库导入Picamera2类,用于访问和控制摄像头
import time  # 导入time模块,可以用来处理时间相关的任务
import cv2  # 导入OpenCV库,用于图像处理

app = Flask(__name__)  # 创建Flask应用实例

def gen_frames():  # 定义一个生成器函数,用于逐帧生成摄像头捕获的图像
    picam2 = Picamera2()  # 创建Picamera2的实例

    # 配置摄像头参数,设置视频的格式和大小
    picam2.configure(picam2.create_video_configuration(main={"format": 'XRGB8888', "size": (640, 480)}))

    picam2.start()  # 启动摄像头
    while True:
        frame = picam2.capture_array()  # 从摄像头捕获一帧图像
        frame = cv2.cvtColor(frame, cv2.COLOR_BGR2RGB)
        ret, buffer = cv2.imencode('.jpg', frame)  # 将捕获的图像帧编码为JPEG格式

        frame = buffer.tobytes()  # 将JPEG图像转换为字节流

        # 使用yield返回图像字节流,这样可以连续发送视频帧,形成视频流
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n' + frame + b'\r\n')

@app.route('/')  # 定义根路由
def index():
    return render_template('index.html')  # 返回index.html页面

@app.route('/video_feed')  # 定义视频流路由
def video_feed():
    # 返回响应对象,内容是视频流,内容类型是multipart/x-mixed-replace
    return Response(gen_frames(), mimetype='multipart/x-mixed-replace; boundary=frame')

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000, debug=True)  # 启动Flask应用,监听所有网络接口上的5000端口,开启调试模式

以下是代码的一些关键部分的说明

gen_frames(): 这是一个生成器函数,不断从摄像头中捕获帧,将其编码为JPEG格式,并将帧字节作为多部分响应的一部分生成。生成的帧会被实时传输给客户端。

@app.route('/'): 这个装饰器将index()函数与根URL(/)关联起来。当用户访问根URL时,它将呈现名为'12_index.html'的HTML模板。

@app.route('/video_feed'): 这个装饰器将video_feed()函数与'/video_feed' URL关联起来。这个路由用于视频实时传输,帧会作为多部分响应发送。

app.run(host='0.0.0.0', port=5000, debug=True): 这一行启动Flask开发服务器,监听所有可用的网络接口(0.0.0.0)在端口5000上。debug=True选项启用服务器的调试模式。服务器的调试模式。

网页部分介绍

注释:
<!doctype html>: 声明HTML文档类型。
<html lang="en">: HTML文档的根元素,指定页面语言为英语。
<head>: 包含文档的元信息,如字符集和页面标题。
<!-- Required meta tags -->: HTML注释,提醒这是一些必需的元标签。
<meta charset="utf-8">: 指定文档使用UTF-8字符集。
<title>Live Video Based on Flask</title>: 设置页面标题。
<body>: 包含文档的可见部分。
<!-- The image tag below is dynamically updated with the video feed from Flask -->: HTML注释,说明下面的图像标签会动态更新,显示来自Flask的视频流。
<img src="{{ url_for('video_feed') }}">: 图像标签,使用Flask中定义的video_feed路由获取实时视频流。