OpenClaw 实战:让 AI 拥有“眼睛“——摄像头访问完全指南

OpenClaw 实战:让 AI 拥有“眼睛“——摄像头访问完全指南
在这里插入图片描述

今天冒出个想法,想让openclaw能控制摄像头分析图片。原因是我有本书,网上还没有电子版,想让openclaw分析然后把重点内容讲给我听。

📖让运行在 WSL2 里的 OpenClaw AI 助手能够"看见"摄像头画面。

🚧 探索过程

第一阶段:OpenClaw Node 配对(失败)折腾了 3 小时+,最终因为 WSL2 网络隔离问题放弃。

我在wsl里安了openclaw,他说要控制摄像头,必须在windows上安装node.js,安装npm,折腾了好久,就是报错。结论就是windows和wsl就是隔离的。
具体过程:

**安装 Node.js:** 最开始下载了绿色版 Node.js(v24.14.0),遇到了一系列问题: ```powershell # 绿色版 Node.js 配置 $nodePath ="D:\WSL\node-v24.14.0-win-x64" $env:Path +=";$nodePath"[Environment]::SetEnvironmentVariable("Path", $env:Path +";$nodePath","User")

问题 1:PowerShell 执行策略限制

npm : File D:\WSL\node-v24.14.0-win-x64\npm.ps1 cannot be loaded because running scripts is disabled on this system. 

解决:

Set-ExecutionPolicy-ExecutionPolicy RemoteSigned -Scope CurrentUser 

问题 2:npm 需要 Git

npm error code ENOENT npm error syscall spawn git npm error path git npm error enoent An unknown git error occurred 

解决: 手动下载 Git for Windows 并安装(v2.47.1)

问题 3:npm 配置错误

之前尝试配置 npm config set git false 导致后续安装失败:

npm error syscall spawn false npm error path false 

解决:

npm config delete git 
1.2 安装 OpenClaw Node
# 安装 openclaw npm install -g openclaw # 安装 node 服务 openclaw node install # 启动 node openclaw node restart # 查看状态 openclaw node status 
1.3 配对失败原因分析

问题 1:端口占用

WSL Gateway 已占用 18789 端口,Windows Node 无法绑定。

问题 2:网络隔离

gateway connect failed: Error: device signature invalid node host gateway closed (1008): device signature invalid 

WSL2 运行在 Hyper-V 虚拟机中,与 Windows 主机网络隔离。WSL 的 localhost (127.0.0.1) Windows 访问不到。

问题 3:配置验证失败

Invalid config at /home/kim/.openclaw/openclaw.json: - plugins.slots.memory: plugin not found: memory-core 

尝试修复配置:

openclaw config.set agents.defaults.memorySearch.enabled false openclaw doctor --fix

最终放弃原因:

WSL2 架构限制导致 Windows Node 无法与 WSL Gateway 建立稳定连接。即使通过端口转发(netsh interface portproxy)能连通,device signature 验证也过不去。

折腾 3 小时+,决定换方案。

 ### 第二阶段:浏览器方案(临时可用)https://webcamtests.com/ 浏览器这个网站确实能直接调用设备的摄像头,它通过大龙虾的插件(OpenClaw Browser Relay),他就能看了,可是我想这也太麻烦了。 ```c *网址:** https://webcamtests.com/ **功能:** - 📷 实时摄像头预览 - 📸 拍照 - 🎥 录像 - 📊 摄像头参数检测(分辨率、FPS、亮度、对比度等) **摄像头信息:** 

Webcam Name: Integrated Camera
Resolution: 1280×720
Frame rate: 15 FPS
Webcam MegaPixels: 0.92 MP
Video Standard: HD
Aspect Ratio: 1.78

 **优点:** - ✅ 无需安装,打开即用 - ✅ 支持拍照、录像、实时预览 - ✅ 可获取详细摄像头参数 - ✅ 跨平台(Windows/macOS/Linux 均可) **缺点:** - ❌ 需要手动操作浏览器 - ❌ 依赖 Chrome 扩展连接(OpenClaw Browser Relay) - ❌ 无法自动化控制 - ❌ 网络依赖(网站可能访问不稳定) #### 2.2 实际测试 成功拍到摄像头画面: - 👤 用户穿着灰色毛绒外套,内搭条纹衫 - 🖼️ 背景墙上有画框/相框 - 💻 笔记本自带摄像头(Integrated Camera) - 📊 摄像头参数:15 FPS,质量评分 108 **收获:** 确认摄像头硬件正常,能拍到清晰画面。但浏览器方案无法满足自动化需求。 

第三阶段:Python + OpenCV 本地程序(成功✅)powershellpip install opencv-python

这个是我最满意的方案了,这回只要跟他说:“看看这是啥”,他就能调用摄像头看,然后回答你他能看到什么。

#### 3.1 安装依赖 ```powershell pip install opencv-python 

OpenCV 是成熟的计算机视觉库,支持摄像头访问、图像处理、目标检测等功能。

3.2 创建摄像头脚本

编写了两个版本的脚本:

版本 1:实时预览版 (webcam.py)

#!/usr/bin/env python3""" 本地摄像头测试工具 - 复刻 webcamtests.com 核心功能 功能:实时预览、拍照、录像、摄像头信息 """import cv2 import os from datetime import datetime classWebcamTest:def__init__(self, camera_id=0): self.camera_id = camera_id self.cap =None self.save_dir = os.path.expanduser("~/Pictures/WebcamTest") os.makedirs(self.save_dir, exist_ok=True)defopen_camera(self):"""打开摄像头""" self.cap = cv2.VideoCapture(self.camera_id)ifnot self.cap.isOpened():print(f"❌ 无法打开摄像头 (ID: {self.camera_id})")returnFalse width =int(self.cap.get(cv2.CAP_PROP_FRAME_WIDTH)) height =int(self.cap.get(cv2.CAP_PROP_FRAME_HEIGHT)) fps =int(self.cap.get(cv2.CAP_PROP_FPS))print(f"✅ 摄像头已打开")print(f" 分辨率:{width}x{height}")print(f" FPS: {fps}")returnTruedefshow_preview(self):"""实时预览"""print("📺 实时预览中...")print(" 按 'q' 退出预览")print(" 按 'p' 拍照")print(" 按 'r' 开始/停止录像")whileTrue: ret, frame = self.cap.read() cv2.imshow('Webcam Test', frame) key = cv2.waitKey(1)&0xFFif key ==ord('q'):breakelif key ==ord('p'): self.take_photo(frame) cv2.destroyAllWindows()

版本 2:自动拍照版 (webcam-snap.py)

#!/usr/bin/env python3""" 本地摄像头测试工具 - 自动拍照版本 """import cv2 import os from datetime import datetime defmain(): save_dir = os.path.expanduser("~/Pictures/WebcamTest") os.makedirs(save_dir, exist_ok=True) cap = cv2.VideoCapture(0)ifnot cap.isOpened():print("❌ 无法打开摄像头")returnprint("✅ 摄像头已打开")print(f" 分辨率:{int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))}x{int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))}")# 预热摄像头for i inrange(30): cap.read()# 拍照 ret, frame = cap.read()if ret: timestamp = datetime.now().strftime("%Y%m%d_%H%M%S") filename = os.path.join(save_dir,f"photo_{timestamp}.jpg") cv2.imwrite(filename, frame)print(f"✅ 照片已保存:{filename}") cap.release()if __name__ =="__main__": main()
3.3 运行并拍照
python D:\openclaw-scripts\webcam-snap.py 

成功输出:

在这里插入图片描述


在这里插入图片描述


在这里插入图片描述


在这里插入图片描述

📸 房间画面!

在这里插入图片描述

🔍 技术总结

WSL2 无法直接访问摄像头硬件,需要 Windows 原生程序。

💡 经验教训

  1. 不要硬磕
  2. 利用现有工具
  3. 理解架构限制
  4. 自动化优先

Read more

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.