如何将cv.Mat()尺寸设为与视频一致？OpenCV.js报错求助

Hey there, let's work through this frustrating size mismatch error—even though your src Mat looks like it matches the video dimensions, there are a few common gotchas that might be causing this:

1. You're grabbing video dimensions too early (before metadata loads) #

The video.videoHeight and video.videoWidth values often return placeholder defaults (like 480x640) until the video's metadata finishes loading. If you initialize your Mats before this happens, you're working with outdated dimensions that don't match the actual stream.

Fix: Wait for the loadedmetadata event before setting up your Mats:

video.addEventListener('loadedmetadata', () => {
  let cap = new cv.VideoCapture(video);
  let height = video.videoHeight;
  let width = video.videoWidth;
  console.log("Actual video dimensions:", height, width);
  
  // Now initialize Mats with the confirmed stream size
  let src = new cv.Mat(height, width, cv.CV_8UC4);
  let dst = new cv.Mat(height, width, cv.CV_8UC4);
  let gray = new cv.Mat();
  
  // Start your processing loop here
  processVideo();
});

2. Use OpenCV's capture properties instead of video element attributes #

Sometimes the video element's reported dimensions don't align with the actual stream size that OpenCV's VideoCapture is receiving. To get the exact dimensions the capture is using, rely on OpenCV's own property getters:

Fix: Replace video element dimension checks with OpenCV's capture properties:

let cap = new cv.VideoCapture(video);
// Fetch the exact dimensions OpenCV is capturing
let actualWidth = cap.get(cv.CAP_PROP_FRAME_WIDTH);
let actualHeight = cap.get(cv.CAP_PROP_FRAME_HEIGHT);
console.log("OpenCV capture dimensions:", actualHeight, actualWidth);

// Initialize Mats with these verified dimensions
let src = new cv.Mat(actualHeight, actualWidth, cv.CV_8UC4);
let dst = new cv.Mat(actualHeight, actualWidth, cv.CV_8UC4);
let gray = new cv.Mat();

3. Ensure the video is playing before calling cap.read() #

If your processVideo function runs before the video starts playing, the capture might not have a valid frame to read—this can trigger a misleading "size mismatch" error even if your Mats are correctly sized.

Fix: Start the video first (note: browsers usually require user interaction for media playback):

// Trigger play via a user action (like a button click)
document.querySelector('#play-button').addEventListener('click', () => {
  video.play().then(() => {
    // Start processing once playback is active
    processVideo();
  });
});

Try these steps one by one—chances are the issue is either premature dimension reading or a mismatch between the video element's reported size and what OpenCV is actually capturing.

内容的提问来源于stack exchange，提问作者ray an