🚫为了防止狗上沙发,写了一个浏览器实时识别目标功能📷

查看 120|回复 10
作者:xiaowoli   
网页调用摄像头识别物体后做成行为
背景

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

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

  • 通过摄像头实时识别画面中的狗🐶
  • 利用 tensorflow 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测。
  • 将摄像头的视频流转化成视频帧图像传给模型进行识别

  • 录制一个音频
  • 识别到目标(狗)后播放音频📣

  • 需要部署在一个设备上
  • 找一个不用的旧手机📱,Android 系统
  • 安装 termux 来实现开启本地 http 服务🌐


    技术要点
    [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
  • 安装 python3
  • 运行 python3 -m http.server 8000

  • 将项目上传到 termux 的目录
  • 直接用 termux 打开文件
  • 访问 http://localhost:8000

    [/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 启动应用。
    通过以上技术整合,最终实现了在旧手机上部署一个能够实时检测画面中狗的网页应用,并在检测到狗时播放指定音频。
  • xieqiqiang00   
    这个需求用 techable machine 上传几张图也可以实现🌚
    blackcellcode   
    结果笑了哈哈😄
    hinataharuki   
    女:什么花里胡哨的
    woody3rd   
    真会玩啊
    Cat   
    [但是,家里夫人直接做了一个围栏晚上给狗圈起来了]
    Seven711   
    哈哈哈哈,整的花里胡哨的
    netnetuser   
    想法挺好的。实际上,有些狗狗很聪明,就 OP 狗狗生活的环境,狗狗可以越狱的方式就有 2 个:
    1.跳上窗边走出来;
    2.直接跳过围栏。
    我在 Youtube 上看狗狗视频,嚓...他们有着强烈的外逃行动力,围栏难不倒他们的。
    zmQAQ   
    nb
    zoezz   
    够硬核 v 站需要这种帖子
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部