防止狗上沙发,写一个浏览器实时识别目标检测功能

家里有一条狗🐶,很喜欢乘人不备睡沙发🛋️,恰好最近刚搬家 + 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗,然后播放“gun 下去”的音频📣。

需求分析

  • 需要一个摄像头📷

    • 利用 chrome 浏览器可以调用手机摄像头,获取权限,然后利用 video 将摄像头的内容绘制到 video 上。

  • 通过摄像头实时识别画面中的狗🐶

    • 利用 tensorflow 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测。

    • 将摄像头的视频流转化成视频帧图像传给模型进行识别

  • 录制一个音频

    • 识别到目标(狗)后播放音频📣

  • 需要部署在一个设备上

    • 找一个不用的旧手机📱,Android 系统

    • 安装 termux 来实现开启本地 http 服务🌐

技术要点

  1. 利用浏览器 API 调用手机摄像头,将视频流推给 video

 const stream = await navigator.mediaDevices.getUserMedia({// video: { facingMode: "environment" },  // 摄像头后置video: { facingMode: "user" },});const videoElement = document.getElementById("camera-stream");videoElement.srcObject = stream;

  2.加载模型,实现识别

 let dogDetector;async function loadDogDetector() {// 加载预训练的SSD MobileNet V2模型const model = await cocoSsd.load();dogDetector = model; // 将加载好的模型赋值给dogDetector变量}

 3.监听 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);}}

 4. 播放音频

 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();}
  1. 手机开启本地 http 服务

    • 安装 termux

    • 安装 python3

    • 运行 python3 -m http.server 8000

  2. 将项目上传到 termux 的目录

    • 直接用 termux 打开文件

    • 访问 http://localhost:8000

项目代码(改为 html 文件后)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Mobile Dog Detector</title><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.17.0/dist/tf.min.js"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.3/dist/coco-ssd.min.js"></script><style>#camera-stream {width: 200px;height: auto;}#name {height: 200px;overflow-y: auto;font-family: Arial, sans-serif;}</style></head><body><video id="camera-stream" autoplay playsinline></video><div id="name" style="height: 200px"></div><script>let playing = false;let dogDetector;async function loadDogDetector() {// 加载预训练的SSD MobileNet V2模型const model = await cocoSsd.load();dogDetector = model; // 将加载好的模型赋值给dogDetector变量console.log("dogDetector", dogDetector);startCamera();}// 调用函数加载模型loadDogDetector();async function startCamera() {const stream = await navigator.mediaDevices.getUserMedia({// video: { facingMode: "environment" },  // 摄像头后置video: { facingMode: "user" },});const nameContainer = document.getElementById("name");const videoElement = document.getElementById("camera-stream");videoElement.srcObject = stream;const canvas = document.createElement("canvas");const ctx = canvas.getContext("2d");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("./getout.mp3");audio.addEventListener("ended", () => {playing = false;});audio.volume = 0.5; // 调整音量大小await audio.play();}}</script></body>
</html>

实现效果

效果很好👍,用旧手机开启摄像头后,检测到狗就播放声音了。

实现总结

该方案通过以下步骤实现了一个基于网页的实时物体检测系统,专门用于识别画面中的狗并播放特定音频以驱赶它离开沙发。具体实现过程包括以下几个核心部分:

  • 调用摄像头:

使用浏览器提供的 navigator.mediaDevices.getUserMedia API 获取用户授权后调用手机摄像头,并将视频流设置给 video 元素展示。

  • 加载物体检测模型:

使用 TensorFlow.js 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测,加载模型后赋值给 dogDetector 变量。处理视频流与图像识别:

监听 video 元素的播放事件,通过 requestAnimationFrame 循环逐帧处理视频。将当前视频帧绘制到 canvas 上,然后从 canvas 中提取图像数据传入模型进行预测。在模型返回的预测结果中,如果检测到“dog”,则触发播放音频函数。

  • 播放音频反馈:

定义一个异步函数 playDogBarkSound 来播放指定的音频文件,确保音频只在前一次播放结束后才开始新的播放。

  • 部署环境准备:

使用旧 Android 手机安装 Termux,创建本地 HTTP 服务器运行项目代码。上传项目文件至 Termux 目录下并通过访问 localhost:8000 启动应用。

通过以上技术整合,最终实现了在旧手机上部署一个能够实时检测画面中狗的网页应用,并在检测到狗时播放指定音频。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806285.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux系统概述与安装

Linux的介绍 Linux内核 Linux内核是 Linux 操作系统主要组件&#xff0c;也是计算机硬件与其软件之间的交互入口。它负责两者之间的通信&#xff0c;还要尽可能高效地管理资源 Linux Shell shell是系统的用户界面&#xff0c;提供了用户与内核进行交互操作的一种接口 Linux文…

网页端HTML使用MQTTJs订阅RabbitMQ数据

最近在做一个公司的日志组件时有一个问题难住了我。今天问题终于解决了。由于在解决问题中&#xff0c;在网上也查了很多资料都没有一个完整的实例可以参考。所以本着无私分享的目的记录一下完整的解决过程和实例。 需求&#xff1a;做一个统一日志系统可以查看日志列表和一个可…

【机器学习】科学库使用第4篇:Matplotlib,学习目标【附代码文档】

机器学习&#xff08;科学计算库&#xff09;完整教程&#xff08;附代码资料&#xff09;主要内容讲述&#xff1a;机器学习&#xff08;常用科学计算库的使用&#xff09;基础定位、目标&#xff0c;机器学习概述定位,目标,学习目标,学习目标,1 人工智能应用场景,2 人工智能小…

uniapp小程序编译报错

说明 微信小程序编译每次都出现[ project.config.json 文件内容错误] project.config.json: libVersion 字段需为 string, 解决 找到manifest.json文件 添加&#xff1a;"libVersion": "latest"&#xff0c;重新编译即可。

产品推荐 | iWave 的 FPGA-IP 评估附加 FMC 卡

1、产品概述 iWave 的 FPGA-IP 评估附加 FMC 卡旨在满足 ANSI/VITA 57.1 FMC 标准。该卡支持高引脚数 &#xff08;HPC&#xff09; 和低引脚数 &#xff08;LPC&#xff09; 连接器&#xff0c;可在风冷环境中使用。FPGA-IP评估附加卡可以与市场上的大多数FPGA开发套件连接。…

去中心化社交媒体:分析 Facebook 在区块链平台上的角色

在当今数字时代&#xff0c;社交媒体已经成为人们日常生活中不可或缺的一部分。然而&#xff0c;随着人们对数据隐私和信息控制的关注不断增加&#xff0c;传统的中心化社交媒体平台也面临着越来越多的质疑和挑战。为了应对这些挑战&#xff0c;越来越多的人开始探索去中心化社…

怎样关闭浏览器文件下载安全病毒中检测功能

怎样关闭浏览器文件下载安全病毒中检测功能 有时候需要通过浏览下载一些特殊文件&#xff0c;浏览器会提示有病毒&#xff0c;终止下载并且自动删除文件。 以为是浏览器的问题&#xff0c;用 chrome、Edge、firefox 三种浏览器下载均失败。 尝试关闭了所有浏览器安全防护也不行…

赋能Web3用户:增强在线隐私

随着数字化时代的发展&#xff0c;人们越来越依赖互联网来进行各种活动&#xff0c;从社交互动到金融交易&#xff0c;几乎所有的日常生活都离不开网络。然而&#xff0c;随之而来的是个人隐私安全面临的挑战。在传统的互联网架构下&#xff0c;用户的个人数据往往被中心化的平…

【MIT6.S081】Lab1: Xv6 and Unix utilities(详细解答版)

实验内容网址&#xff1a;https://xv6.dgs.zone/labs/requirements/lab1.html Sleep 关键点&#xff1a;函数参数判断、系统函数调用 思路&#xff1a; 通过argc来判断函数参数是否正确&#xff0c;通过atoi函数来讲字符串转化为整型&#xff0c;调用sleep函数后退出程序。 代…

Vue2和Vue3组件通信:父子与兄弟间的桥梁

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…

3D Matching:实现halcon中的find_surface_model

halcon中的三维匹配大致分为两类&#xff0c;一类是基于形状的(Shape-Based)&#xff0c;一类是基于表面的(Surface-Based)。基于形状的匹配可用于单个2D图像中定位复杂的3D物体&#xff0c;3D物体模型必须是CAD模型&#xff0c;且几何边缘清晰可见&#xff0c;使用的相机也要预…

性能优化原则

相关链接&#xff1a;【运行环境】加载资源的形式 性能优化 1 性能优化原则 多使用内存、缓存或其他方法 减少CPU计算量&#xff0c;减少网络加载耗时 &#xff08;适用于所有编程的性能优化----空间换时间&#xff09; 2 从何入手 性能优化-让加载更快 减少资源体积&#x…

iPad手绘+Ai二合一课程,Procreate+Mj+SD零基础到精通(10节视频课)

课程内容&#xff1a; 1 系统课 AI辅助设计流-从零进阶轻松驾驭AI设计,mp4 2 商务沟通阶段 ChatGPT Midjourney-聊天机器人 项目调研资料收集 ,mp4 3_商务沟通阶段 ChatGPT_Midjourney-Midjourney基础 界面初识初步设置 .mp4 4_商务沟通阶段 ChatGPT_Midjourney-Midjourney…

康谋分享 | aiSim5 物理相机传感器模型验证方法(一)

摘要&#xff1a; aiSim5可以实时模拟复杂的传感器配置&#xff0c;在多GPU分布式渲支持的支持下&#xff0c;aiSim可以渲染20多个摄像头、10多个雷达和10多个激光雷达在同一环境下运行。aiSim5独有的实时渲染引擎能够满足对物理精确环境和天气模拟的所有要求&#xff0c;具有…

【MATLAB源码-第3期】基于MATLAB的256QAM误码率曲线,使用IQ调制解调,以及星座图展示。

1、算法描述 正交幅度调制&#xff08;QAM&#xff0c;Quadrature Amplitude Modulation&#xff09;是一种在两个正交载波上进行幅度调制的调制方式。这两个载波通常是相位差为90度&#xff08;π/2&#xff09;的正弦波&#xff0c;因此被称作正交载波。这种调制方式因此而得…

虚幻引擎启动报错记录

0x00007FFEF0C8917C (UnrealEditor-CoreUObject.dll)处(位于 UnrealEditor.exe 中)引发的异常: 0xC0000005: 写入位置 0x0000000000000030 时发生访问冲突。 解决办法&#xff1a;首先查看堆栈信息&#xff0c;我的项目启动是因为默认场景编译不过&#xff0c;进到编辑器配置文…

蓝桥杯真题代码记录(直线

目录 1. 题目&#xff1a;2. 我的代码&#xff1a;小结&#xff1a; 1. 题目&#xff1a; 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 在平面直角坐标系中&#xff0c;两点可以确定一条直线。如果有多点在一条直线上&…

新零售SaaS架构:客户管理系统架构设计(万字图文总结)

什么是客户管理系统&#xff1f; 客户管理系统&#xff0c;也称为CRM&#xff08;Customer Relationship Management&#xff09;&#xff0c;主要目标是建立、发展和维护好客户关系。 CRM系统围绕客户全生命周期的管理&#xff0c;吸引和留存客户&#xff0c;实现缩短销售周…

CentOS上使用cgroup限制进程使用内存

安装cgroup 要使用cgroup首先需要系统支持&#xff0c;需要安装两个rpm包 yum install libcgroup libcgroup-tools 创建限制内存的cgroup组 cgroup组需要在/sys/fs/cgroup/memory目录下创建&#xff0c;我们创建一个限制进程内存大小为10M的cgroup组&#xff0c;这个组中内存…

CUDA 12.4文档2 内核线程架构

本博客参考官方文档进行介绍&#xff0c;全网仅此一家进行中文翻译&#xff0c;走过路过不要错过。 官方网址&#xff1a;https://docs.nvidia.com/cuda/cuda-c-programming-guide/ 本文档分成多个博客进行介绍&#xff0c;在本人专栏中含有所有内容&#xff1a; https://bl…