概述
通过网络摄像头（IP Camera）的HTTP API获取实时画面是App Inventor可以实现的。
方案对比
| 方案 | 协议 | 延迟 | 难度 |
|---|---|---|---|
| HTTP快照 | HTTP GET | 1-3秒 | ⭐⭐ |
| MJPEG流 | HTTP Stream | 低 | ⭐⭐⭐ |
| RTSP流 | RTSP | 极低 | ❌ App Inventor不支持 |
| WebView嵌入 | HTTP | 中 | ⭐⭐ |
方案一：HTTP快照（最简单）
大多数网络摄像头提供HTTP快照接口：
常见摄像头快照URL
| 品牌 | 快照URL | 说明 |
|---|---|---|
| 通用MJPEG | http://IP:port/snapshot.jpg | HTTP截图 |
| Hikvision | http://IP/Streaming/channels/1/picture | 海康威视 |
| Dahua | http://IP/cgi-bin/snapshot.cgi | 大华 |
| ESP32-CAM | http://IP/capture | ESP32摄像头 |
积木块代码
设 摄像头IP = "192.168.1.100"
设 摄像头端口 = "8080"
设 快照URL = "http://" & 摄像头IP & ":" & 摄像头端口 & "/snapshot.jpg"
设 刷新间隔 = 1000 ' 1秒刷新
当 按钮_开始监控.被点击
设 Clock_刷新.计时器间隔 = 刷新间隔
设 Clock_刷新.启用计时器 = true
当 Clock_刷新.计时
' 方法1：直接设置Image的URL
设 Image_画面.图片 = 快照URL & "?t=" & Clock1.获取毫秒数(Clock1.当前时间())
' 添加时间戳防止缓存
带认证的摄像头
当 Clock_刷新.计时
设 Web_摄像头.请求头 = [
"Authorization: Basic " & 调用 Base64编码(用户名 & ":" & 密码)
]
调用 Web_摄像头.执行Get请求(快照URL)
方案二：WebView嵌入MJPEG流
很多摄像头支持MJPEG流，可以直接在WebView中显示：
当 Screen1.初始化
设 MJPEG_URL = "http://192.168.1.100:8080/video"
设 WebView_摄像头.主页地址 = MJPEG_URL
带HTML包装
<!-- camera.html -->
<img src="http://192.168.1.100:8080/video" style="width:100%">
<script>
setInterval(function(){
var msg = window.AppInventor.getWebViewString();
if(msg && msg.startsWith("URL:")){
document.querySelector('img').src = msg.substring(4);
window.AppInventor.setWebViewString("");
}
},100);
</script>
当 按钮_切换摄像头.被点击
设 WebView_摄像头.WebView字符串 = "URL:http://192.168.1.101:8080/video"
方案三：ESP32-CAM专用
ESP32-CAM是常见的DIY网络摄像头方案：
ESP32-CAM端（Arduino代码）
// ESP32-CAM WebServer提供HTTP快照
#include "esp_camera.h"
#include <WiFi.h>
// ... 标准ESP32-CAM配置代码
// 访问 http://ESP32_IP/capture 获取JPEG快照
// 访问 http://ESP32_IP/stream 获取MJPEG流
App Inventor端
设 ESP32_IP = "192.168.1.50"
当 按钮_拍照.被点击
设 Image_画面.图片 = "http://" & ESP32_IP & "/capture"
当 按钮_视频流.被点击
设 WebView_视频.主页地址 = "http://" & ESP32_IP & "/stream"
控制ESP32-CAM
当 按钮_开灯.被点击
调用 Web1.执行Get请求("http://" & ESP32_IP & "/led/on")
当 按钮_关灯.被点击
调用 Web1.执行Get请求("http://" & ESP32_IP & "/led/off")
实战案例：多路监控
设 摄像头列表 = [
创建字典("name" → "前门", "url" → "http://192.168.1.100:8080/snapshot.jpg"),
创建字典("name" → "后院", "url" → "http://192.168.1.101:8080/snapshot.jpg"),
创建字典("name" → "车库", "url" → "http://192.168.1.102:8080/snapshot.jpg")
]
设 当前摄像头 = 1
当 按钮_切换.被点击
设 当前摄像头 = (当前摄像头 模 列表长度(摄像头列表)) + 1
设 摄像头 = 列表第当前摄像头项(摄像头列表)
标签_名称.文本 = 从字典 摄像头 获取 "name"
设 Image_画面.图片 = (从字典 摄像头 获取 "url") & "?t=" & Clock1.获取毫秒数(Clock1.当前时间())
常见问题
Q1: 画面加载很慢？
- 降低摄像头分辨率（如640x480）
- 确保手机和摄像头在同一局域网
- 增大刷新间隔（1-3秒）
Q2: 无法连接摄像头？
- 确认IP地址正确
- 确认手机和摄像头在同一网络
- 检查防火墙设置
- 尝试在浏览器中直接访问URL
Q3: RTSP流怎么播放？
App Inventor不支持RTSP协议。解决方案：
- 使用摄像头提供的HTTP快照/MJPEG接口
- 使用FFmpeg中转RTSP为HTTP流
- 使用VLC作为中转服务器
总结
| 方案 | 推荐度 | 延迟 | 适用 |
|---|---|---|---|
| HTTP快照定时刷新 | ⭐⭐⭐⭐ | 1-3秒 | 静态监控 |
| WebView + MJPEG | ⭐⭐⭐⭐⭐ | 低 | 实时监控 |
| ESP32-CAM专用 | ⭐⭐⭐⭐ | 低 | DIY项目 |
版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。
扫码添加客服咨询
