'Memory leak using opencv.js in web worker?
I transfer the image to a web worker and use opencv to convert the image to grayscale
But my memory keeps leaking and I can't figure out where the problem is?
I have tried using transferable objects
But it will also cause memory leaks
Is opencv.js not available in web workers at all?
sorry my english is bad i use google thranslate
example code
main.js
const worker = new Worker("./worker.js");
var streamVideo = document.getElementById("streamVideo");
var srcCanvas = document.createElement("canvas"); // canvasFrame is the id of <canvas>
var srcCrx = srcCanvas.getContext("2d");
function processStart(){
const sendImageData = function () {
srcCrx.drawImage(streamVideo, 0, 0, srcCanvas.width, srcCanvas.height);
let sendMessage = {
type: "imageData",
width: srcCanvas.width,
height: srcCanvas.height,
srcImageData: srcCrx.getImageData(0, 0, srcCanvas.width, srcCanvas.height).data,
};
// let srcImageData= srcCrx.getImageData(0, 0, srcCanvas.width, srcCanvas.height).data;
// let sendMessage = {
// type: "imageData",
// width: srcCanvas.width,
// height: srcCanvas.height,
// srcImageData,
// };
// worker.postMessage(sendMessage,[srcImageData.buffer]);
// use transferable objects? but will also cause memeory leak
worker.postMessage(sendMessage);
sendMessage.srcImageData = null;
sendMessage.type = null;
sendMessage.width = null;
sendMessage.height = null;
sendMessage = null;
};
const handleImageData = function (e) {
const resDst = new cv.Mat(e.data.height, e.data.width, cv.CV_8UC4);
resDst.data.set(e.data.resImageData);
cv.imshow("videoOutput", resDst);
e.data.resImageData = null;
e.data.width = null;
e.data.height = null;
e.data = null;
e = null;
resDst.delete();
};
worker.onmessage = function (e) {
if (e.data.type === "opencvIsReady") {
// first send image data
sendImageData();
}
if (e.data.type === "imageData") {
setTimeout(() => {
sendImageData();
handleImageData(e);
}, 10);
}
};
worker.postMessage({ type: "initWorker" });
}
processStart();
web worker
importScripts("./opencv.js");
self.onmessage = function (e) {
if (e.data.type === "initWorker") {
cv["onRuntimeInitialized"] = () => {
self.postMessage({ type: "opencvIsReady" });
};
}
if (e.data.type === "imageData") {
// handle imagedata from main thread
let srcImageData = e.data.srcImageData;
let srcDst = new cv.Mat(e.data.height, e.data.width, cv.CV_8UC4);
let calcDst = new cv.Mat(e.data.height, e.data.width, cv.CV_8UC1);
srcDst.data.set(srcImageData);
cv.cvtColor(srcDst, calcDst, cv.COLOR_RGBA2GRAY);
// response send gary image
let resImageData = new Uint8ClampedArray(calcDst.data);
let sendMessage = {
type: "imageData",
resImageData: resImageData,
width: e.data.width,
height: e.data.height,
};
self.postMessage(sendMessage);
e.data.imageData = null;
e.data.type = null;
e.data.width = null;
e.data.height = null;
e.data = null;
e = null;
srcImageData = null;
resImageData = null;
srcDst.delete();
calcDst.delete();
}
};
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
