背景
家里有一条狗🐶，很喜欢乘人不备睡沙发🛋️，恰好最近刚搬家 + 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗，然后播放“gun 下去”的音频📣。
需求分析
需要一个摄像头📷
通过摄像头实时识别画面中的狗🐶
录制一个音频
需要部署在一个设备上
技术要点
[ol]
利用浏览器 API 调用手机摄像头，将视频流推给 video
const stream = await navigator.mediaDevices.getUserMedia({
// video: { facingMode: "environment" }, // 摄像头后置
video: { facingMode: "user" },
});
const videoElement = document.getElementById("camera-stream");
videoElement.srcObject = stream;
加载模型，实现识别
let dogDetector;
async function loadDogDetector() {
// 加载预训练的 SSD MobileNet V2 模型
const model = await cocoSsd.load();
dogDetector = model; // 将加载好的模型赋值给 dogDetector 变量
}
监听 video 的播放，将视频流转换成图像传入模型检测
videoElement.addEventListener("play", async () => {
requestAnimationFrame(processVideoFrame);
});
async function processVideoFrame() {
if (!videoElement.paused && !videoElement.ended) {
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
// 获取当前帧图像数据
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// 对帧执行预测
let predictionClasses = "";
const predictions = await dogDetector.detect(imageData);
// 处理预测结果，比如检查是否有狗被检测到
for (const prediction of predictions) {
predictionClasses += `${prediction.class}\n`; // 组装识别的物体名称
if (prediction.class === "dog") {
// 播放声音
playDogBarkSound();
}
}
nameContainer.innerText = predictionClasses.trim(); // 移除末尾的换行符
requestAnimationFrame(processVideoFrame);
}
}
播放音频
async function playDogBarkSound() {
if (playing) return;
playing = true;
const audio = new Audio(dogBarkSound);
audio.addEventListener("ended", () => {
playing = false;
});
audio.volume = 0.5; // 调整音量大小
await audio.play();
}
手机开启本地 http 服务
将项目上传到 termux 的目录
[/ol]
项目代码(改为 html 文件后)
Mobile Dog Detector
#camera-stream {
width: 200px;
height: auto;
}
#name {
height: 200px;
overflow-y: auto;
font-family: Arial, sans-serif;
}
实现效果
效果很好👍，用旧手机开启摄像头后，检测到狗就播放声音了。
但是，家里夫人直接做了一个围栏晚上给狗圈起来了🚫
实现总结
该方案通过以下步骤实现了一个基于网页的实时物体检测系统，专门用于识别画面中的狗并播放特定音频以驱赶它离开沙发。具体实现过程包括以下几个核心部分：
使用浏览器提供的 navigator.mediaDevices.getUserMedia API 获取用户授权后调用手机摄像头，并将视频流设置给 video 元素展示。
使用 TensorFlow.js 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测，加载模型后赋值给 dogDetector 变量。
处理视频流与图像识别：
监听 video 元素的播放事件，通过 requestAnimationFrame 循环逐帧处理视频。
将当前视频帧绘制到 canvas 上，然后从 canvas 中提取图像数据传入模型进行预测。
在模型返回的预测结果中，如果检测到“dog”，则触发播放音频函数。
定义一个异步函数 playDogBarkSound 来播放指定的音频文件，确保音频只在前一次播放结束后才开始新的播放。
使用旧 Android 手机安装 Termux ，创建本地 HTTP 服务器运行项目代码。
上传项目文件至 Termux 目录下并通过访问 localhost:8000 启动应用。
通过以上技术整合，最终实现了在旧手机上部署一个能够实时检测画面中狗的网页应用，并在检测到狗时播放指定音频。
