运行代码较长时间后出现 openCV JS 错误

Question

我正在尝试使用opencv JS在JS中实现美化，但运行一分钟后，控制台中记录了一个错误。有人可以解释为什么会这样吗？它与openCV有关还是内存问题？ 这是我的代码。

let video = document.getElementById("videoInput"); // video is the id of video tag
let canvas = document.getElementById('canvasOutput');

let ctx = canvas.getContext("2d");
video.width = 640;
video.height = 480;
navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then(function(stream) {
video.srcObject = stream;
video.play();

const FPS = 30;
function processVideo() {
  let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
  let img = new cv.Mat();
  let cap = new cv.VideoCapture(video);
  
  let blur = new cv.Mat(video.height, video.width, cv.CV_8UC4);
  let hpf1 = new cv.Mat();
  let hpf = new cv.Mat(video.height, video.width, cv.CV_8UC4);
    
  let skinArea = new cv.Mat(video.height, video.width, cv.CV_8UC1);
  let begin = Date.now();
  cap.read(src);
  img=src
  cv.GaussianBlur(img, blur, new cv.Size(15, 15), 0,0,cv.BORDER_DEFAULT)
  cv.GaussianBlur(img, hpf1, new cv.Size(3, 3), 0,0,cv.BORDER_DEFAULT)

  cv.subtract(img,hpf1,hpf1)
  let minRange = new cv.Mat(img.rows, img.cols, img.type(), [120, 80, 60, 0]);
  let maxRange = new cv.Mat(img.rows, img.cols, img.type(), [255, 190, 120, 255]);
  cv.inRange(img, minRange, maxRange, skinArea);
  
  maxRange.delete()
  minRange.delete()

  let mat_1 = new cv.Mat();
  cv.imshow("canvasOutput1", skinArea);

  mat_1 = new cv.Mat(img.rows, img.cols, cv.CV_8UC1,new cv.Scalar(1,1,1))
  let blur_hpf= new cv.Mat();
  cv.add(blur,hpf1,blur_hpf)
  hpf1.delete()
  blur.delete()
  let blurred = new cv.Mat(),background = new cv.Mat();

  let ones = new cv.Mat(img.rows, img.cols, cv.CV_8UC1, new cv.Scalar(1));

  cv.min(skinArea, ones, skinArea)
  ones.delete()
  cv.subtract(mat_1, skinArea,blurred)
  cv.cvtColor(skinArea, skinArea, cv.COLOR_GRAY2BGRA);
  cv.cvtColor(blurred, blurred, cv.COLOR_GRAY2BGRA);

  cv.multiply(skinArea,blur_hpf,skinArea)

  let final_out = new cv.Mat()
  if(blurred == undefined){
    background = img
    final_out = img
  }
  else if(blurred == undefined || img == undefined){
    console.log("not image")
  }
  else{
  cv.multiply(blurred,img,background)
  cv.add(skinArea,background,final_out)
  }
  
  background.delete()
  blurred.delete()
  skinArea.delete()
  let kernel = cv.matFromArray(3,3,cv.CV_32FC1, [0.110, 0.160, 0.07,0.145, 0.143, 0.12,0.150, 0.150, 0.09]);
  cv.filter2D(final_out, final_out, -1, kernel);
  
  cv.imshow("canvasOutput", final_out);
  
  src.delete()
  final_out.delete()
          
  let delay = 100/FPS - (Date.now() - begin);
  setTimeout(processVideo, 0);
}
// schedule first one.
setTimeout(processVideo, 0);});

代码正确运行一分钟后，它在 cv multiply 中出现错误。

Answer 1

脚本在长时间执行后崩溃，原因是内存泄漏.

• 在开始processVideo()之前只执行一次cap = new cv.VideoCapture(video);。
  在处理视频时，我们不假设多次创建新的VideoCapture 对象并多次删除它，因为cap = new cv.VideoCapture(video) 假设打开一个新的视频流（在您的具体示例中可能不是这种情况）。
  创建一次VideoCapture 对象，并在processVideo() 中多次使用它。
• 确保删除全部processVideo() 中的 cv.Mat 对象。
  考虑在processVideo() 之前创建cv.Mat 对象，而不是多次执行new 和delete - 它更安全、更高效。

如果您打算添加停止功能，您可以在停止功能中执行cap.release() 和cap.delete()。

---

修改（部分）代码示例：

let video = document.getElementById("videoInput"); // video is the id of video tag
let cap = new cv.VideoCapture(video); // Create VideoCapture object once before starting processVideo()

const FPS = 30;
function processVideo() {
  let src = new cv.Mat(video.height, video.width, cv.CV_8UC4);
  //let img = new cv.Mat();
  //let cap = new cv.VideoCapture(video);

  let blur = new cv.Mat(video.height, video.width, cv.CV_8UC4);
  let hpf1 = new cv.Mat();
  //let hpf = new cv.Mat(video.height, video.width, cv.CV_8UC4);

  let skinArea = new cv.Mat(video.height, video.width, cv.CV_8UC1);
  let begin = Date.now();
  cap.read(src);
  //img=src
  let img = src;

  cv.GaussianBlur(img, blur, new cv.Size(15, 15), 0,0,cv.BORDER_DEFAULT)
  cv.GaussianBlur(img, hpf1, new cv.Size(3, 3), 0,0,cv.BORDER_DEFAULT)

  cv.subtract(img,hpf1,hpf1)
  let minRange = new cv.Mat(img.rows, img.cols, img.type(), [120, 80, 60, 0]);
  let maxRange = new cv.Mat(img.rows, img.cols, img.type(), [255, 190, 120, 255]);
  cv.inRange(img, minRange, maxRange, skinArea);

  maxRange.delete()
  minRange.delete()

  //let mat_1 = new cv.Mat();
  cv.imshow("canvasOutput1", skinArea);

  let mat_1 = new cv.Mat(img.rows, img.cols, cv.CV_8UC1,new cv.Scalar(1,1,1))
  let blur_hpf= new cv.Mat();
  cv.add(blur,hpf1,blur_hpf)
  hpf1.delete()
  blur.delete()
  let blurred = new cv.Mat(),background = new cv.Mat();

  let ones = new cv.Mat(img.rows, img.cols, cv.CV_8UC1, new cv.Scalar(1));

  cv.min(skinArea, ones, skinArea)
  ones.delete()
  cv.subtract(mat_1, skinArea,blurred)
  cv.cvtColor(skinArea, skinArea, cv.COLOR_GRAY2BGRA);
  cv.cvtColor(blurred, blurred, cv.COLOR_GRAY2BGRA);

  cv.multiply(skinArea,blur_hpf,skinArea)

  let final_out = new cv.Mat()
  if(blurred == undefined){
    background = img
    final_out = img
  }
  else if(blurred == undefined || img == undefined){
    console.log("not image")
  }
  else{
    cv.multiply(blurred,img,background)
    cv.add(skinArea,background,final_out)
  }

  background.delete()
  blurred.delete()
  skinArea.delete()
  let kernel = cv.matFromArray(3,3,cv.CV_32FC1, [0.110, 0.160, 0.07,0.145, 0.143, 0.12,0.150, 0.150, 0.09]);
  cv.filter2D(final_out, final_out, -1, kernel);

  cv.imshow("canvasOutput", final_out);

  src.delete()
  final_out.delete()
  mat_1.delete()
  blur_hpf.delete()

  let delay = 100/FPS - (Date.now() - begin);
  setTimeout(processVideo, 0);
};

// schedule the first one.
setTimeout(processVideo, 0);