<!DOCTYPE html>
<html lang="en">
<head>
<title>AI object detection</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/ml5@latest/dist/ml5.min.js"></script>
</head>
<body>
<h2 id="loadingText">Loading...</h2>
<!-- video with size of 0px because of chrome -->
<video playsinline autoplay muted controls="true" id="video"></video>
<br><br>
<canvas id="c1"></canvas>
<br><br>
<table>
<tr>
<td>AI:</td>
<td>
<div class="switch">
<label>
Off
<input type="checkbox" id="ai" disabled>
<span class="lever"></span>
On
</label>
</div>
</td>
</tr>
<tr>
<td>FPS:</td>
<td>
<p class="range-field">
<input type="range" id="fps" min="1" max="60" value="50">
</p>
</td>
</tr>
</table>
<script>
var modelIsLoaded = false;
// Create a ObjectDetector method
const objectDetector = ml5.objectDetector('cocossd', {}, modelLoaded);
// When the model is loaded
function modelLoaded() {
console.log("Model Loaded!");
modelIsLoaded = true;
}
</script>
<script src="video.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>
没有合适的资源?快使用搜索试试~ 我知道了~
使用 ML5.js 和 COCO-SSD 模型的 AI 对象检测 Web 应用程序
共3个文件
html:1个
js:1个
css:1个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
5星 · 超过95%的资源 1 下载量 49 浏览量
2023-04-03
09:55:51
上传
评论
收藏 3KB ZIP 举报
温馨提示
这个代码是一个基于Web的AI对象检测应用程序,使用了ML5.js和COCO-SSD模型。它可以通过计算机摄像头实时检测视频中的对象,并在屏幕上显示其位置和标签。这种应用程序可用于安全监控、自动化控制和智能家居等领域。 整个应用程序的HTML和CSS代码定义了界面,包括一个开关和FPS滑块。用户可以通过开关控制是否启用对象检测,FPS滑块可以调整每秒处理的图像帧数。JavaScript代码主要实现了对象检测功能。当用户启用对象检测开关后,JavaScript将通过ML5.js库加载COCO-SSD模型。一旦模型加载完成,应用程序就可以开始实时检测图像中的对象。 代码中的视频元素用于显示通过摄像头获取的实时视频流。JavaScript代码将这个视频流输入到COCO-SSD模型中,模型会检测视频帧中的对象,并将结果输出到画布元素中。然后,JavaScript将在画布上绘制带标签的边界框,指示对象的位置和名称。用户可以通过滑块调整每秒处理的帧数,从而控制对象检测速度和计算机性能的使用情况。 总体而言,这个代码提供了一个简单易用的AI对象检测应用程序,可以通过浏览器访问。它使用了先进的机
资源推荐
资源详情
资源评论
收起资源包目录
ai-object-detection-master.zip (3个子文件)
ai-object-detection-master
style.css 176B
video.js 3KB
index.html 2KB
共 3 条
- 1
资源评论
- 2301_772167752023-07-25资源有很好的参考价值,总算找到了自己需要的资源啦。
Meta.Qing
- 粉丝: 2w+
- 资源: 121
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功