透过 ESP32-CAM 抓取图片 - uPython

ESP32-CAM 的网站架构

下图使用 ESP32-CAM 的摄像头拍照后，将照片透过 HTTP 网页协议，回传给使用者，让使用者可以看到摄像头所拍摄的图片。

在这里插入图片描述
图 1. 使用 ESP32-CAM 的摄像头的网站架构

ESP32-CAM 代码

/ 为网页的首页，透过 /image_feed 方法来抓取图片，camera.init() 会对摄像头进行初始化，camera.capture() 是撷取画面，而回传是需要包含数据本体、响应代码以及响应类型。

参考代码

from microdot import Microdot
import camera

app = Microdot()

@app.route('/')
def index(request): # 首页
    return '''<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Microdot Web Server</title>
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1>Microdot 抓图</h1>
      <div class="container">
      <button value="秀照片" onClick="imageRefresh()">秀照片</button><img src="/image_feed" id="uPyImage">
      </div>
      
     <script language="javascript"> 
      var update_track = 0;
      var update_input = 0;
      var uPyImage = document.getElementById("uPyImage");
      function imageRefresh(){
        imageSrc = "/image_feed"
        uPyImage.src = imageSrc + "?t=" + new Date().getTime();
        console.log('refresh' + uPyImage.src);      
      }
    </script>     
  </body>
</html>''', 200, {'Content-Type': 'text/html'}

@app.route('/image_feed')
def image_feed(request):
    while not camera.init(0, format=camera.JPEG, fb_location=camera.PSRAM):
        time.sleep(1)    
    frame = camera.capture()
    camera.deinit()
    # 数据本体、响应代码以及响应类型
    return frame, 202, {'Content-Type': 'image/jpeg'}

if __name__ == '__main__':
    app.run(debug=True)

代码说明

1-2：导入必须库或模块
6-35：响应根网页(/)请求
21：单击按钮会调用 imageRefresh() 在28行的 JavaScript函数
28：调用网站的 /image_feed 的 Web API 刷新标签中的图片
37-44：响应 /image_feed Web API请求
39-40：初始化摄像头
41：进行拍摄。
44：回传图片 frame
47：运行 Web 服务器

运行画面

下图是 ESP32-CAM 拍照 Web 服务器运行画面，可以单击秀照片来更新图片。

在这里插入图片描述
图 2. ESP32-CAM 拍照 Web 服务器运行画面

进阶使用示例

以下为 camera 包的一些使用示例。

import camera

## ESP32-CAM  - https://bit.ly/2Ndn8tN
camera.init(0, format=camera.JPEG, fb_location=camera.PSRAM)

camera.init(0, d0=5, d1=14, d2=4, d3=15, d4=18, d5=23, d6=36, d7=39,
            format=camera.JPEG, framesize=camera.FRAME_VGA, 
            xclk_freq=camera.XCLK_20MHz,
            href=25, vsync=27, reset=-1, pwdn=-1,
            sioc=12, siod=13, xclk=32, pclk=19)

# The parameters: format=camera.JPEG, xclk_freq=camera.XCLK_10MHz are standard for all cameras.
# You can try using a faster xclk (20MHz), this also worked with the esp32-cam and m5camera
# but the image was pixelated and somehow green.

## Other settings:
# flip up side down
camera.flip(1)
# left / right
camera.mirror(1)

# framesize
camera.framesize(camera.FRAME_240x240)
# The options are the following:
# FRAME_96X96 FRAME_QQVGA FRAME_QCIF FRAME_HQVGA FRAME_240X240
# FRAME_QVGA FRAME_CIF FRAME_HVGA FRAME_VGA FRAME_SVGA
# FRAME_XGA FRAME_HD FRAME_SXGA FRAME_UXGA FRAME_FHD
# FRAME_P_HD FRAME_P_3MP FRAME_QXGA FRAME_QHD FRAME_WQXGA
# FRAME_P_FHD FRAME_QSXGA
# Check this link for more information: https://bit.ly/2YOzizz

# special effects
camera.speffect(camera.EFFECT_NONE)
# The options are the following:
# EFFECT_NONE (default) EFFECT_NEG EFFECT_BW EFFECT_RED EFFECT_GREEN EFFECT_BLUE EFFECT_RETRO

# white balance
camera.whitebalance(camera.WB_NONE)
# The options are the following:
# WB_NONE (default) WB_SUNNY WB_CLOUDY WB_OFFICE WB_HOME

# saturation
camera.saturation(0)
# -2,2 (default 0). -2 grayscale 

# brightness
camera.brightness(0)
# -2,2 (default 0). 2 brightness

# contrast
camera.contrast(0)
#-2,2 (default 0). 2 highcontrast

# quality
camera.quality(10)
# 10-63 lower number means higher quality

buf = camera.capture()

参考资料

ESP32 Technical Reference Manual，https://www.espressif.com/sites/default/files/documentation/esp32_technical_reference_manual_en.pdf
Espressif IoT Development Framework, https://github.com/espressif/esp-idf

ESP32-CAM firmware, https://github.com/lemariva/micropython-camera-driver/blob/master/firmware/micropython_camera_feeeb5ea3_esp32_idf4_4.bin
MicroPython: Taking photos with an ESP32-CAM, https://lemariva.com/blog/2019/09/micropython-how-about-taking-photo-esp32
microdot, https://github.com/miguelgrinberg/microdot
A Simple Microdot Web Server, https://microdot.readthedocs.io/en/latest/
关于MicroPython mpremote工具的一些用例, https://www.cnblogs.com/Wind-stormger/p/16659124.html
micropython-camera-driver, https://github.com/lemariva/micropython-camera-driver
Refresh image with a new one at the same url, https://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url