基于TensorFlow.js和COCO-SsD模型的实时目标检测网络应用程序

在这里插入图片描述

基于TensorFlow.js和COCO-SsD模型的实时目标检测网络应用程序

实现流程

访问用户的桌面录屏并且显示视频源（位置居中）。
对视频源进行实时目标检测。
在检测到的目标周围绘制边界框，并用它们的类别和检测置信度进行标记。
在视频源下方显示一个唯一检测到的目标列表，显示目标类别和首次检测到的时间。
确保每个目标类别只列出一次，不管它被检测到多少次。
使用2帧每秒的检测频率来平衡性能和响应性。
包括屏幕录制访问和模型加载的错误处理。
为应用程序设计一个干净、现代的外观，并具有响应式设计。
将所有必要的HTML、CSS和JavaScriptt包含在一个单一的自包含文件中。
为TensorFlow.js和COCO-SSD模型库使用CDN链接。请提供完整可运行的HTML文件，其中包含内联CSS和JavaScript。

效果图

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实时目标检测</title><script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script><script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script><style>body {font-family: Arial, sans-serif;display: flex;flex-direction: column;align-items: center;background-color: #f0f0f0;margin: 0;padding: 20px;}h1 {color: #333;}#videoContainer {position: relative;margin-bottom: 20px;}#output {position: absolute;top: 0;left: 0;}#detectionsList {background-color: white;border-radius: 8px;padding: 20px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);max-width: 600px;width: 100%;}#detectionsList h2 {margin-top: 0;}#detectionsList ul {list-style-type: none;padding: 0;}#detectionsList li {margin-bottom: 10px;padding: 10px;background-color: #f9f9f9;border-radius: 4px;}#error {color: red;margin-top: 20px;}</style>
</head>
<body><h1>实时目标检测</h1><div id="videoContainer"><video id="video" width="640" height="480" autoplay muted></video><canvas id="output" width="640" height="480"></canvas></div><div id="detectionsList"><h2>检测到的目标</h2><ul id="detectedObjects"></ul></div><div id="error"></div><script>const video = document.getElementById('video');const output = document.getElementById('output');const ctx = output.getContext('2d');const detectedObjects = document.getElementById('detectedObjects');const errorDiv = document.getElementById('error');let model;let detections = new Map();async function setupCamera() {try {const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });video.srcObject = stream;return new Promise((resolve) => {video.onloadedmetadata = () => {resolve(video);};});} catch (error) {errorDiv.textContent = '无法访问屏幕录制：' + error.message;throw error;}}async function loadModel() {try {model = await cocoSsd.load();} catch (error) {errorDiv.textContent = '无法加载模型：' + error.message;throw error;}}async function detectObjects() {try {const predictions = await model.detect(video);ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);ctx.drawImage(video, 0, 0, ctx.canvas.width, ctx.canvas.height);predictions.forEach(prediction => {const [x, y, width, height] = prediction.bbox;ctx.strokeStyle = '#00FFFF';ctx.lineWidth = 2;ctx.strokeRect(x, y, width, height);ctx.fillStyle = '#00FFFF';ctx.font = '16px Arial';ctx.fillText(`${prediction.class} (${Math.round(prediction.score * 100)}%)`, x, y > 10 ? y - 5 : 10);if (!detections.has(prediction.class)) {const timestamp = new Date().toLocaleTimeString();detections.set(prediction.class, timestamp);updateDetectionsList();}});} catch (error) {console.error('检测对象时出错：', error);}setTimeout(detectObjects, 500); // 每2秒检测一次 (2 FPS)}function updateDetectionsList() {detectedObjects.innerHTML = '';detections.forEach((timestamp, objectClass) => {const li = document.createElement('li');li.textContent = `${objectClass} - 首次检测时间: ${timestamp}`;detectedObjects.appendChild(li);});}async function run() {try {await setupCamera();await loadModel();detectObjects();} catch (error) {console.error('应用程序初始化失败：', error);}}run();</script>
</body>
</html>