浏览器实时播放摄像头数据并通过 Yolo 进行图像识别
安装 Ultralytics 之后,可以直接通过本地获取摄像头数据流,并通过 Yolo 模型实时进行识别。大多情况下,安装本地程序成本比较高,需要编译打包等等操作,如果可以直接通过浏览器显示视频,并实时显示识别到的对象类型就会方便很多。本文将通过 JS 原生代码 + 后台 Yolo 识别服务实现浏览器实时显示并识别对象类型的效果。
后发服务
后台服务采用 Python Flask 框架实现图片识别的 Rest API,开发之前,首先安装 Ultralytics 环境,我们使用官方的 DockerImage,用官方镜像作为基础镜像,安装相关依赖。
Dockerfile
# Use the ultralytics/ultralytics image as the base
FROM ultralytics/ultralytics:latest# Update package lists and install vim
RUN apt-get update && apt-get install -y vim# Install Flask using pip
RUN pip install flask flask-cors# Set the working directory
WORKDIR /app# Copy the current directory contents into the container at /app
COPY . /app# Expose port 5000 for Flask
EXPOSE 5000# Command to run the Flask application
App.py
后台 Rest API,/detect,解析 base64 图片,并返回识别到的图片分类和位置信息。
import os
from flask import Flask, request, jsonify
from ultralytics import YOLO
import cv2
import numpy as np# Initialize Flask app
app = Flask(__name__)# Load YOLOv8 model
model = YOLO('yolov8n.pt') # You can change 'yolov8n.pt' to other versions like 'yolov8m.pt' or 'yolov8x.pt'# Function to perform object detection
def detect_objects(image):results = model(image)detections = []for result in results:for box in result.boxes:x1, y1, x2, y2 = map(int, box.xyxy)class_id = int(box.cls)confidence = box.confdetections.append({'class_id': class_id,'label': model.names[class_id],'confidence': float(confidence),'bbox': [x1, y1, x2, y2]})return detections# Route for object detection
@app.route('/detect', methods=['POST'])
def detect():if 'image' not in request.files:return jsonify({'error': 'No image provided'}), 400file = request.files['image']if file.filename == '':return jsonify({'error': 'No image selected for uploading'}), 400# Read imageimage = np.frombuffer(file.read(), np.uint8)image = cv2.imdecode(image, cv2.IMREAD_COLOR)# Perform detectiondetections = detect_objects(image)return jsonify(detections)# Run Flask app
if __name__ == '__main__':app.run(host='0.0.0.0', port=5000)
前端页面
在页面显示摄像头,实时发送图片数据到后台进行识别,获取位置并显示在画布纸上。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Real-Time Object Detection with YOLO</title><style>body {display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;overflow: hidden;}#camera, #canvas {position: absolute;width: 50%;height: 50%;object-fit: cover;}#camera {z-index: 1;}#canvas {z-index: 2;}</style>
</head>
<body><video id="camera" autoplay playsinline></video><canvas id="canvas"></canvas><script>const classColors = {};function getRandomColor() {const letters = '0123456789ABCDEF';let color = '#';for (let i = 0; i < 6; i++) {color += letters[Math.floor(Math.random() * 16)];}return color;}function isMobileDevice() {return /Mobi|Android/i.test(navigator.userAgent);}async function setupCamera() {const video = document.getElementById('camera');const facingMode = isMobileDevice() ? 'environment' : 'user'; // Use back camera for mobile, front camera for PCtry {const stream = await navigator.mediaDevices.getUserMedia({video: {facingMode: { ideal: facingMode }}});video.srcObject = stream;return new Promise((resolve) => {video.onloadedmetadata = () => {resolve(video);};});} catch (error) {console.error('Error accessing camera:', error);alert('Error accessing camera: ' + error.message);}}async function sendFrameToBackend(imageData) {const response = await fetch('https://c.hawk.leedar360.com/api/detect', {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify({ image: imageData })});return await response.json();}function getBase64Image(video) {const canvas = document.createElement('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;const ctx = canvas.getContext('2d');ctx.drawImage(video, 0, 0, canvas.width, canvas.height);return canvas.toDataURL('image/jpeg').split(',')[1];}function renderDetections(detections, canvas, video) {const ctx = canvas.getContext('2d');ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.drawImage(video, 0, 0, canvas.width, canvas.height);detections.forEach(det => {const { bbox, confidence, class_id, label } = det;if (confidence > 0.5) { // Only show detections with confidence > 0.5const [x, y, w, h] = bbox;if (!classColors[class_id]) {classColors[class_id] = getRandomColor();}const color = classColors[class_id];ctx.beginPath();ctx.rect(x, y, w - x, h - y);ctx.lineWidth = 2;ctx.strokeStyle = color;ctx.fillStyle = color;ctx.stroke();ctx.font = '24px Arial'; // Set font size to 24pxctx.fillText(`${label} (${Math.round(confidence * 100)}%)`,x,y > 24 ? y - 10 : 24 // Adjust position for the larger font size);}});}async function main() {const video = await setupCamera();if (!video) {console.error('Camera setup failed');return;}video.play();const canvas = document.getElementById('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;async function processFrame() {const imageData = getBase64Image(video);const detections = await sendFrameToBackend(imageData);renderDetections(detections, canvas, video);requestAnimationFrame(processFrame);}processFrame();}main();// Handle orientation change and resizingwindow.addEventListener('resize', () => {const video = document.getElementById('camera');const canvas = document.getElementById('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;});window.addEventListener('orientationchange', () => {const video = document.getElementById('camera');const canvas = document.getElementById('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;});</script>
</body>
</html>
总结
功能很好实现,效果还要微调,苹果的充电器并没有识别出来。

相关文章:
浏览器实时播放摄像头数据并通过 Yolo 进行图像识别
安装 Ultralytics 之后,可以直接通过本地获取摄像头数据流,并通过 Yolo 模型实时进行识别。大多情况下,安装本地程序成本比较高,需要编译打包等等操作,如果可以直接通过浏览器显示视频,并实时显示识别到的对…...
redis清空list
redis list清空 要清空Redis中的list,您可以使用LTRIM命令。Redis Ltrim 对一个列表进行修剪(trim),就是说,让列表只保留指定区间内的元素,不在指定区间之内的元素都将被删除。 下标 0 表示列表的第一个元素,以 1 表示…...
汽车油耗NEDC与WLTP有什么区别?以及MATLAB/Simulink的汽车行驶工况仿真
最近的热点新闻非比亚迪的秦L莫属,其油耗达到2.9L/100km,但其标注为NEDC也引起了讨论, NEDC与WLTP的区别 NEDC的全称为“New European Driving Cycle”,即“新欧洲驾驶循环”。这种油耗测试标准起源于上世纪80年代,主…...
【Python】已解决报错:AttributeError: module ‘json‘ has no attribute ‘loads‘解决办法
😎 作者介绍:我是程序员洲洲,一个热爱写作的非著名程序员。CSDN全栈优质领域创作者、华为云博客社区云享专家、阿里云博客社区专家博主。 🤓 同时欢迎大家关注其他专栏,我将分享Web前后端开发、人工智能、机器学习、深…...
(5)按钮输入
文章目录 前言 1 基础设置 2 数字逻辑/模拟电压设置 3 PWM输入设置 4 额外设置 前言 连接到自动驾驶仪的最多四个外部按钮或开关可以被配置为触发辅助功能(Auxiliary Functions),类似于 RC 通道开关的触发方式。这些按钮输入可以被配置为使用数字逻辑电平电压…...
嵌入式开发、C++后台开发、C++音视频开发怎么选择?
开始前刚好我有一些资料,是我根据网友给的问题精心整理了一份「嵌入式的资料从专业入门到高级教程」, 点个关注在评论区回复“888”之后私信回复“888”,全部无偿共享给大家!!! 嵌入式开发:非常…...
高考志愿填报,大学读什么专业比较好?
高考分数出炉后,选择什么样的专业,如何去选择专业?于毕业生而言是一个难题。因为,就读的专业前景不好,意味着就业情况不乐观,意味着毕业就是失业。 盲目选择专业的确会让自己就业时受挫,也因此…...
33 _ 跨站脚本攻击(XSS):为什么Cookie中有HttpOnly属性?
通过上篇文章的介绍,我们知道了同源策略可以隔离各个站点之间的DOM交互、页面数据和网络通信,虽然严格的同源策略会带来更多的安全,但是也束缚了Web。这就需要在安全和自由之间找到一个平衡点,所以我们默认页面中可以引用任意第三…...
C++入门小结
C命名空间总结 C 中的命名空间(Namespace)是一种组织代码的方式,用于避免全局命名冲突。在同一个命名空间中,可以有相同名称的变量、函数和类,但它们彼此互不影响。下面是对 C 命名空间的一些总结: 定义命…...
Java 开发实例:Spring Boot+AOP+注解+Redis防重复提交(防抖)
文章目录 1. 环境准备2. 引入依赖3. 配置Redis4. 创建防重复提交注解5. 实现AOP切面6. 创建示例Controller7. 测试8. 进一步优化8.1 自定义异常处理8.2 提升Redis的健壮性 9. 总结 🎉欢迎来到Java学习路线专栏~探索Java中的静态变量与实例变量 ☆* o(≧▽≦)o *☆嗨…...
使用difflib实现文件差异比较用html显示
1.默认方式,其中加入文本过长,需要换行,因此做 contenthtml_output.replace(</style>,table.diff td {word-wrap: break-word;white-space: pre-wrap;max-width: 100%;}</style>),添加换行操作 ps:当前te…...
【文末附gpt升级秘笈】AI热潮降温与AGI场景普及的局限性
AI热潮降温与AGI场景普及的局限性 摘要: 随着人工智能(AI)技术的迅猛发展,AI热一度席卷全球,引发了广泛的关注和讨论。然而,近期一些学者和行业专家对AI的发展前景提出了质疑,认为AI热潮将逐渐…...
Vue待学习
整个渲染过程了解 Vue实例?Vue模板?渲染函数render()?虚拟DOM VNode?模板编译器?diff算法 CSS相关 CSS高级学习?过渡? 待熟悉掌握 Vue-router?VueX?Vue-Cli、Webpack和…...
TOP150-LC88
/*给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2,另有两个整数 m 和 n ,分别表示 nums1 和 nums2 中的元素数目。请你 合并 nums2 到 nums1 中,使合并后的数组同样按 非递减顺序 排列。注意:最终,合并后数组不…...
使用Python和TCN进行时间序列预测:一个完整的实战示例
使用Python和TCN进行时间序列预测:一个完整的实战示例 时间卷积网络(TCN)已被证明在处理序列数据方面表现出色,尤其是在需要捕获长期依赖关系的任务中。在本文中,我们将通过一个简单的例子,展示如何使用Py…...
如何用R语言ggplot2画高水平期刊散点图
文章目录 前言一、数据集二、ggplot2画图1、全部代码2、细节拆分1)导包2)创建图形对象3)主题设置4)轴设置5)图例设置6)散点颜色7)保存图片 前言 一、数据集 数据下载链接见文章顶部 处理前的数据…...
Python基于 Jupyter Notebook 的图形可视化工具库之ipysigma使用详解
概要 在数据科学和网络分析中,图(Graph)结构是一种常用的数据结构,用于表示实体及其关系。为了方便图数据的可视化和交互操作,ipysigma 提供了一个基于 Jupyter Notebook 的图形可视化工具。通过 ipysigma,用户可以在 Jupyter Notebook 中创建、编辑和展示图结构,方便进…...
四叉树和KD树
1. 简介 四叉树和KD树都是用于空间数据索引和检索的树状数据结构。它们通过将空间递归地划分为更小的区域,并存储每个区域内的点,来实现快速搜索和范围查询。 2. 四叉树 2.1 定义 四叉树是一种树状数据结构,它将二维空间递归地划分为四个…...
C语言中结构体使用.与->访问成员变量的区别
文章目录 前言点运算符(.)箭头运算符(->)总结 前言 在C语言中,. 和 -> 都是用来访问结构体成员的运算符,但它们的使用场景和含义有所不同。 提示:以下是本篇文章正文内容,下面…...
计算机二级Access选择题考点
在Access中,若要使用一个字段保存多个图像、图表、文档等文件,应该设置的数据类型是附件。在“销售表"中有字段:单价、数量、折扣和金额。其中,金额单价x数量x折扣,在建表时应将字段"金额"的数据类型定义为计算。若…...
Qwen3.5-9B开源可部署实践:国产昇腾910B适配方案(CANN+PyTorch NPU移植)
Qwen3.5-9B开源可部署实践:国产昇腾910B适配方案(CANNPyTorch NPU移植) 1. 项目概述 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型,具备强大的逻辑推理、代码生成和多轮对话能力。该模型特别针对国产昇腾910B处理器进行了优化…...
OpenClaw替代方案:当Qwen3-4B不可用时降级策略
OpenClaw替代方案:当Qwen3-4B不可用时降级策略 1. 为什么需要降级策略 上周三凌晨3点,我的OpenClaw自动化脚本突然停止了工作。原本定时执行的周报生成任务卡在了模型调用环节——Qwen3-4B服务因网络波动暂时不可用。这次意外让我意识到:依…...
告别“炼丹”:用ReVeal的GGNN+Triplet Loss实战代码漏洞检测,我踩过的坑你别踩
从理论到实践:ReVeal漏洞检测模型落地中的关键挑战与解决方案 在代码安全领域,深度学习技术的应用正经历着从实验室研究到工业落地的关键转折期。ReVeal作为近年来备受关注的漏洞检测框架,其结合GGNN图神经网络与Triplet Loss的创新设计&…...
自动驾驶开发必备:Vscode+Git双神器组合的隐藏技巧(含分支管理秘籍)
自动驾驶开发必备:VscodeGit双神器组合的隐藏技巧(含分支管理秘籍) 在自动驾驶开发领域,高效的代码管理和协作流程是项目成功的关键因素。随着代码库规模不断扩大,团队规模持续增长,传统的版本控制方式往往…...
配置MyBatis-Plus打印执行的 SQL 语句到控制台或日志文件中
配置MyBatis-Plus打印 1. 使用 log4j 或 logback 配置 MyBatis-Plus 支持多种日志框架,如 SLF4J, Commons Logging, Log4J, Log4J2 和 JDK logging。这里以 Logback 为例说明如何配置。 在你的 logback.xml 文件中添加如下配置: <configuration>&l…...
VBA数据库解决方案第二十九讲 如何批量修改数据库中的数据
《VBA数据库解决方案》教程(版权10090845)是我推出的第二套教程,目前已经是第二版修订了。这套教程定位于中级,是学完字典后的另一个专题讲解。数据库是数据处理的利器,教程中详细介绍了利用ADO连接ACCDB和EXCEL的方法…...
解锁3大智能功能:League-Toolkit让普通玩家也能玩转专业级游戏分析
解锁3大智能功能:League-Toolkit让普通玩家也能玩转专业级游戏分析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power 🚀. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在英雄联盟的召…...
别再用Delay了!用GD32的TIMER5实现精准1ms定时,让你的嵌入式程序更高效
告别阻塞式延时:用GD32 TIMER5构建高效嵌入式系统心跳 在嵌入式开发中,时间管理如同系统的心跳,决定了整个应用的响应速度和执行效率。许多开发者习惯使用delay_ms()这类阻塞式延时函数,却不知这会让CPU陷入无意义的等待状态&…...
别再只会用中断了!用状态机查表法搞定AB相编码器,STM32代码实测(附防抖技巧)
状态机查表法在AB相编码器中的工程实践与优化 记得第一次在电机控制项目中使用旋转编码器时,我整整花了三天时间调试中断服务程序。每当电机转速提高,计数器就会莫名其妙地漏脉冲或跳变。直到发现状态机查表法这个"神器",才真正解决…...
MediaPipe Pose镜像体验:CPU也能毫秒级检测,无需GPU免配置
MediaPipe Pose镜像体验:CPU也能毫秒级检测,无需GPU免配置 1. 引言:CPU上的实时姿态检测革命 在计算机视觉应用中,人体姿态检测一直是个热门领域。从健身应用的动作分析到虚拟试衣的体型测量,这项技术正在改变我们与…...
