Chrome browser crashes after some time when I use opencv.js to receiving mjpg stream from HTML image tag.
I am wondering if it is a memory leak that I am causing. I have monitored the Windows Task manager (memory) and the Chrome process memory crawls up.
If I comment out specific code line, there's no increase in memory (but then it doesn't do what I want). Don't know how else to structure the code.
The HTML: (you would have to get your own opencv.js ..):
<html>
<head>
</head>
<body>
<div>Images</div>
<img id="image0" alt="No Image 0"/>
<img id="image1" alt="No Image 1"/>
<div>Output</div>
<canvas id="output0" width="640" height="360"></canvas>
<canvas id="output1" width="640" height="360"></canvas>
</body>
<script src="opencv.js"></script>
<script src="index.js"></script>
</html>And the index.js:
'use strict';
const url0="http://10.0.0.58:8080/?action=stream";
const url1="http://10.0.0.58:8081/?action=stream";
image0.crossOrigin = "Anonymous";
image1.crossOrigin = "Anonymous";
let image0Loaded = false;
let image1Loaded = false;
const showImage0 = () => {
//orig had the 'cv' lines inside the setTimeout
// then realized it's the same thing.
// if i comment out the 'cv' code of course
// there's no increment in memory usage.
let mat = cv.imread(image0);
cv.imshow('output0',mat);
setTimeout(()=>{
showImage0();
}, 50);
}
const showImage1 = () => {
let mat = cv.imread(image1);
cv.imshow('output1',mat);
setTimeout(()=>{
showImage1();
}, 50);
}
function openCvReady() {
cv['onRuntimeInitialized']=()=>{
image0.onload = () => { showImage0(); }
image1.onload = () => { showImage1(); }
image0.src = url0;
image1.src = url1;
};
}
openCvReady();I previously had the
Sorry, I think I found my answer. Going to let it run a long time but the memory isn't crawling up anymore it's stablized. I needed the following: