App Inventor 2 网络摄像头调用教程 - 通过API查看实时监控画面

• 概述
  • 方案对比
• 方案一：HTTP快照（最简单）
  • 常见摄像头快照URL
  • 积木块代码
  • 带认证的摄像头
• 方案二：WebView嵌入MJPEG流
  • 带HTML包装
• 方案三：ESP32-CAM专用
  • ESP32-CAM端（Arduino代码）
  • App Inventor端
  • 控制ESP32-CAM
• 实战案例：多路监控
• 常见问题
  • Q1: 画面加载很慢？
  • Q2: 无法连接摄像头？
  • Q3: RTSP流怎么播放？
• 总结

« 返回首页

概述

通过网络摄像头（IP Camera）的HTTP API获取实时画面是App Inventor可以实现的。

方案对比

方案一：HTTP快照（最简单）

大多数网络摄像头提供HTTP快照接口：

常见摄像头快照URL

积木块代码

global 摄像头IP = "192.168.1.100"
global 摄像头端口 = "8080"
global 快照URL = join("http://", 摄像头IP, ":", 摄像头端口, "/snapshot.jpg")
global 刷新间隔 = 1000  // 1秒刷新
when 按钮_开始监控.Click() {
  计时器_刷新.TimerInterval = 刷新间隔
  计时器_刷新.TimerEnabled = true
}
when 计时器_刷新.Timer() {
  // 方法1：直接设置Image的URL
  图像_画面.Picture = join(快照URL, "?t=", 计时器1.GetMillis(计时器1.Now()))
  // 添加时间戳防止缓存
}

带认证的摄像头

when 计时器_刷新.Timer() {
  Web_摄像头.RequestHeaders = make_list(join("Authorization: Basic ", Base64Encode(join(用户名, ":", 密码))))
  Web_摄像头.Get(快照URL)
}

方案二：WebView嵌入MJPEG流

很多摄像头支持MJPEG流，可以直接在WebView中显示：

when Screen1.Initialize() {
  var MJPEG_URL = "http://192.168.1.100:8080/video"
  Web浏览器_摄像头.HomeUrl = 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>

when 按钮_切换摄像头.Click() {
  Web浏览器_摄像头.WebViewString = "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端

global ESP32_IP = "192.168.1.50"
when 按钮_拍照.Click() {
  图像_画面.Picture = join("http://", ESP32_IP, "/capture")
}
when 按钮_视频流.Click() {
  Web浏览器_视频.HomeUrl = join("http://", ESP32_IP, "/stream")
}

控制ESP32-CAM

when 按钮_开灯.Click() {
  Web客户端1.Get(join("http://", ESP32_IP, "/led/on"))
}
when 按钮_关灯.Click() {
  Web客户端1.Get(join("http://", ESP32_IP, "/led/off"))
}

实战案例：多路监控

global 摄像头列表 = make_list(
  make_dictionary(make_pair("name", "前门"), make_pair("url", "http://192.168.1.100:8080/snapshot.jpg")),
  make_dictionary(make_pair("name", "后院"), make_pair("url", "http://192.168.1.101:8080/snapshot.jpg")),
  make_dictionary(make_pair("name", "车库"), make_pair("url", "http://192.168.1.102:8080/snapshot.jpg"))
)
global 当前摄像头 = 1

when 按钮_切换.Click() {
  当前摄像头 = (当前摄像头 % length_of_list(摄像头列表)) + 1
  global 摄像头 = select_list_item(摄像头列表, 当前摄像头)
  标签_名称.Text = get_dictionary_value("name", 摄像头)
  图像_画面.Picture = join(get_dictionary_value("url", 摄像头), "?t=", 计时器1.GetMillis(计时器1.Now()))
}

常见问题

Q1: 画面加载很慢？

• 降低摄像头分辨率（如640x480）
• 确保手机和摄像头在同一局域网
• 增大刷新间隔（1-3秒）

Q2: 无法连接摄像头？

• 确认IP地址正确
• 确认手机和摄像头在同一网络
• 检查防火墙设置
• 尝试在浏览器中直接访问URL

Q3: RTSP流怎么播放？

App Inventor不支持RTSP协议。解决方案：

• 使用摄像头提供的HTTP快照/MJPEG接口
• 使用FFmpeg中转RTSP为HTTP流
• 使用VLC作为中转服务器

总结