公司网站做百度推广需要交费吗,app网页制作软件,葫芦岛做网站公司,大理网站建设家里有一条狗#x1f436;#xff0c;很喜欢乘人不备睡沙发#x1f6cb;️#xff0c;恰好最近刚搬家 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗#xff0c;然后播放“gun 下去”的音频#x1f4e3;。
需求分析 需要一个摄像头#x1f4f7; 利用 chrome…家里有一条狗很喜欢乘人不备睡沙发️恰好最近刚搬家 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗然后播放“gun 下去”的音频。
需求分析 需要一个摄像头 利用 chrome 浏览器可以调用手机摄像头获取权限然后利用 video 将摄像头的内容绘制到 video 上。 通过摄像头实时识别画面中的狗 利用 tensorflow 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测。 将摄像头的视频流转化成视频帧图像传给模型进行识别 录制一个音频 识别到目标狗后播放音频 需要部署在一个设备上 找一个不用的旧手机Android 系统 安装 termux 来实现开启本地 http 服务
技术要点 利用浏览器 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();} 手机开启本地 http 服务 安装 termux 安装 python3 运行 python3 -m http.server 8000 将项目上传到 termux 的目录 直接用 termux 打开文件 访问 http://localhost:8000
项目代码(改为 html 文件后) !DOCTYPE html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleMobile Dog Detector/titlescript srchttps://cdn.jsdelivr.net/npm/tensorflow/tfjs4.17.0/dist/tf.min.js/scriptscript srchttps://cdn.jsdelivr.net/npm/tensorflow-models/coco-ssd2.2.3/dist/coco-ssd.min.js/scriptstyle#camera-stream {width: 200px;height: auto;}#name {height: 200px;overflow-y: auto;font-family: Arial, sans-serif;}/style/headbodyvideo idcamera-stream autoplay playsinline/videodiv idname styleheight: 200px/divscriptlet 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 启动应用。
通过以上技术整合最终实现了在旧手机上部署一个能够实时检测画面中狗的网页应用并在检测到狗时播放指定音频。
