我正在开发一个 Web 应用程序，该应用程序使用 TensorFlow 和 OpenCV 在实时视频流中进行对象检测。但是，我遇到了“未捕获（承诺）”错误，我正在努力解决该错误。这是错误消息和我的代码的相关部分：
错误信息：
(index):87 Uncaught (in promise) 1073690080
代码片段：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
<style>
body { margin: 20; overflow: hidden; }
video { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; z-index: -1; }
canvas { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; }
</style>
</head>
<body>
<video id="video" autoplay playsinline></video>
<canvas id="canvas"></canvas>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd"></script>
<script>
let opencvjs;
async function setupCamera() {
const video = document.getElementById('video');
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
return new Promise((resolve) => {
video.onloadedmetadata = () => {
console.log("Video Feed Loaded");
resolve(video);
};
});
}
async function loadModel() {
console.log("Loading Model");
return await cocoSsd.load();
}
async function loadOpencv() {
return new Promise((resolve, reject) => {
opencvjs = document.createElement("script");
opencvjs.setAttribute("src", "https://docs.opencv.org/4.10.0/opencv.js");
opencvjs.onload = () => {
cv['onRuntimeInitialized'] = () => {
resolve();
};
};
opencvjs.onerror = () => {
reject(new Error("Failed to load OpenCV.js"));
};
console.log("OpenCV Loaded");
document.body.appendChild(opencvjs);
});
}
function detectObjects(video, model, canvas) {
const context = canvas.getContext('2d');
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
async function detectFrame() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.drawImage(video, 0, 0, canvas.width, canvas.height);
var img = cv.imread(canvas);
requestAnimationFrame(detectFrame);
}
detectFrame();
}
async function main() {
await loadOpencv();
const video = await setupCamera();
const model = await loadModel();
const canvas = document.getElementById('canvas');
detectObjects(video, model, canvas);
}
main();
</script>
</body>
</html>
当使用
detectFramerequestAnimationFrame有人遇到过类似的问题或者可以提供有关如何处理此错误的见解吗？任何有关如何正确捕获和处理此承诺拒绝的建议将不胜感激。
我解决了这个问题。在 requestanimationframe 调用之前，我没有删除（img.delete()）使用 cv.imread() 读取的图像矩阵。成功删除后，错误消失了。