透过 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