第三十五章 WebCAM实验

       本章描述了作者如何使用Microdot脚本构建一个视频网络服务器，用于显示摄像头输出的图像数据。在本实验中，我们采用了正点原子的OV2640和OV5640作为摄像头模组，来采集图像数据。

       35.1 Microdot简介

       35.2 硬件设计

       35.3 软件设计

       35.4 下载验证

        35.1 Microdot简介

       Microdot是一款轻量级的Python Web框架，专为微控制器和其他资源受限设备设计。它受到Flask框架的启发，并被优化以在MicroPython环境中运行。Microdot旨在简化在嵌入式系统上构建Web应用程序的过程，使开发者能够更快速、更轻松地创建可靠且可扩展的微服务。

       Microdot具有以下特点：

       1，轻量级：Microdot框架本身占用内存较少，适合在资源受限的环境中运行。

       2，简单易用：Microdot的API设计简洁明了，易于学习和使用。它提供了与Flask类似的接口，使开发者可以快速上手。

       3，可扩展性：Microdot支持使用第三方模块和插件来扩展其功能。

       4，可定制性：Microdot允许开发者自定义和配置框架的各种组件和行为。

       5，跨平台支持：Microdot可以在多种操作系统和平台上运行，包括MicroPython等系统。

       通过Microdot，开发者可以快速构建可靠、可扩展的微服务，并将其部署到各种资源受限的设备上。无论你是初学者还是经验丰富的开发者，Microdot都能够帮助你简化嵌入式Web应用程序的开发过程。

       Microdot相关内容，可参考micordot英文官网提供的 Microdot在线文档 ，在此文档中，已经详细介绍了Microdot的使用方法以及提供了多种使用案例。

       本章节的目的是利用MicroPython控制ESP32-S3开发板板载的摄像头，以实现实时视频流传输，并能够通过浏览器进行观看。以下是架构设计图：

图35.1.1 视频网络服务器架构

       首先，需要将ESP32-S3开发板与电脑连接至同一个AP（子网络）。然后，在ESP32-S3开发板上运行一个Web服务器，使用Microdot这个包来简化架站的功能。最后，通过打开web浏览器即可观看实时视频流传输的结果。

        35.2 硬件设计

       1. 例程功能

       本章实验功能简介：网络连接成功后，系统开始构建Web服务器，然后我们根据返回的网络信息，来打开Web服务器（浏览器），此时，该服务器显示摄像头输出的图像数据。

       2. 硬件资源

       1）ESP32-S3内部WiFi

       3. 原理图

       本章实验使用的WiFi为ESP32-S3的片上资源，因此并没有相应的连接原理图。

        35.3 软件设计

       35.3.1 程序流程图

       程序流程图能帮助我们更好的理解一个工程的功能和实现的过程，对学习和设计工程有很好的主导作用。下面看看本实验的程序流程图。

图35.3.1.1 程序流程图

       35.3.2 程序解析

       本书籍的代码都在main.py脚本下编写的，读者可在光盘资料下找到对应的源码。WebCAM实验main.py源码如下：

import network
import time
import camera
import atk_xl9555 as io_ex
from machine import Pin,SPI,I2C
from microdot import Microdot
 
 
# 配置WIFI账号与密码
SSID = "xxx"          # wifi名称
PASSWORD = "xxx"      # wifi密码
 
 
 
"""
 * @brief       连接网络
 * @param       无
 * @retval      无
"""
def connect():
    
 
    wlan = network.WLAN(network.STA_IF)
    wlan.active(False)
    wlan.active(True)
    if not wlan.isconnected():
        print('connecting to network...')
        wlan.connect(SSID, PASSWORD)
        while not wlan.isconnected():
            pass
print('network config: ', wlan.ifconfig())
 
 
 
"""
 * @brief       程序入口
 * @param       无
 * @retval      无
"""
if __name__ == '__main__':
    
 
    # 连接网络
    connect()
    # 建立 Microdot 网站服务器
    app = Microdot()
time.sleep_ms(1000)
 
    # IIC初始化
i2c0 = I2C(0, scl = Pin(42), sda = Pin(41), freq = 400000)
 
    # XL9555初始化
    xl9555 = io_ex.init(i2c0)
xl9555.write_bit(io_ex.BEEP,1)
 
    # 复位摄像头
    xl9555.write_bit(io_ex.OV_RESET,0)
    time.sleep_ms(100)
    xl9555.write_bit(io_ex.OV_RESET,1)
time.sleep_ms(100)
 
    # 开启摄像头
    xl9555.write_bit(io_ex.OV_PWDN,1)
    time.sleep_ms(100)
    xl9555.write_bit(io_ex.OV_PWDN,0)
time.sleep_ms(100)
 
 
    # 初始化摄像头
    for i in range(5):
        cam = camera.init(0, format=camera.JPEG, fb_location=camera.PSRAM,
framesize = camera.FRAME_240X240,xclk_freq = 24000000)
        print("Camera ready?: ", cam)
        if cam:
            print("Camera ready")
            break
        else:
            time.sleep(2)
    else:
        print('Timeout')
        reset()
    time.sleep_ms(1000)
    # 定义视频流的路径(‘/video_feed’)与操作
@app.route('/')
 
 
    def index(request):
        return '''<!doctype html>
    <html>
      <head>
        <title>Microdot Video Streaming</title>
      </head>
      <body>
        <h1>ATK WebCAM </h1>
        <img src="/video_feed" width="30%">
      </body>
    </html>''', 200, {'Content-Type': 'text/html'}
@app.route('/video_feed')
 
 
    def video_feed(request):
        def stream():
            yield b'--frame\r\n'
            while True:
                frame = camera.capture()
                yield b'Content-Type: image/jpeg\r\n\r\n' + frame + \
                    b'\r\n--frame\r\n'
        return stream(), 200, {'Content-Type':
                               'multipart/x-mixed-replace; boundary=frame'}
    
# 激活网站服务器
    app.run(debug = True)

       上述示例中，首先，连接网络和初始化一些外设，如IIC接口、XL9555 IO扩展芯片和摄像头，然后，搭建Microdot 网站服务器，并且定义网站根目录网页等相关操作（请参考Microdot官方文档），最后，激活网站服务器。这样我们就可以在浏览器上查看摄像头图像了。

       添加Microdot.py脚本有两种方法，一种是在Thonny的本地目录下添加，另一种是Thonny软件下新建文件，然后把内容复制粘贴到该文件当中，并且保存至MicroPython设备lib文件夹目录下（这种方式需开发者在MicroPython设备中新建lib文件夹）。第一种方法很简单，只需把Thonny本地目录设置为正点原子例程目录，然后右键把04_WebCAM实验的lib文件夹上存到MicroPython设备当中，如下图所示。

图35.3.2.1 把实验的lib文件夹上存至MicroPython设备当中

       此时，MicroPython设备出现了lib文件夹及lib文件夹下的Microdot.py脚本，如下图所示。

图35.3.2.2 设备添加Microdot.py脚本完成

       main.py脚本也是如此，直接把正点原子提供的04_WebCAM例程main.py脚本上存至MicroPython设备当中，这样我们无需反复创建文件，然后复制粘贴了。

       第二种方式可能比较繁琐，主要是在microPython设备中创建lib文件夹，如下图所示，然后在Thonny软件下新建文本，并复制正点原子提供的microdot.py脚本内容，粘贴至新建的文本当中，接着，把这个文本保存至MicroPython设备lib目录下，并重命名为“microdot.py”。

       同理，main.py脚本可与上述流程一样创建，值得我们注意的是，main.py脚本必须放置MicroPython设备根目录下。

        35.4 下载验证

       程序下载到开发板后，我们可在Thonny软件的Shell交互窗口下得到如下信息。

图35.4.1 网络配置信息

       在上图中，192.168.101.98为ESP32-S3设备的IP地址；5000为Web服务器的端口号。根据设备的IP地址和端口号就可以访问WebServer服务器。首先，开发者打开浏览器（本机必须与ESP32-S3设备同一网段），然后，在搜索条输入“192.168.101.98:5000”内容，回车进入WebServer服务器，此时，我们就可以查看摄像头输出的图像了，如下图所示。

图35.4.2 摄像头图像