WebRTC录制视频后用OpenCV.js做边缘检测无输出问题求助

一、OpenCV.js处理后视频时长为0的排查与修复 #

1. 确保视频帧读取与Canvas尺寸匹配 #

处理前必须让Canvas宽高与视频实际分辨率一致，而非DOM元素的显示尺寸：

const video = document.getElementById('source-video');
const canvas = document.getElementById('process-canvas');
// 用视频原生分辨率设置Canvas尺寸
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
const ctx = canvas.getContext('2d');

获取ImageData时必须使用Canvas的实际宽高，禁止用视频的DOM显示尺寸：

// 正确写法
const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);

2. 修正OpenCV.js的Canny处理流程 #

Canny边缘检测要求输入为单通道灰度图，直接传入RGBA格式的ImageData会导致无效处理，正确流程如下：

// 将ImageData转为OpenCV Mat
const src = cv.matFromImageData(imgData);
// 转为灰度图（Canny必须的前置步骤）
const gray = new cv.Mat();
cv.cvtColor(src, gray, cv.COLOR_RGBA2GRAY);
// 执行Canny边缘检测，可调整阈值优化效果
const edges = new cv.Mat();
cv.Canny(gray, edges, 50, 150);
// 将单通道边缘图转回RGBA格式（适配Canvas渲染）
const dst = new cv.Mat();
cv.cvtColor(edges, dst, cv.COLOR_GRAY2RGBA);
// 把处理后的数据绘制到Canvas
cv.imshow(canvas, dst);
// 释放Mat内存，避免内存泄漏
src.delete(); gray.delete(); edges.delete(); dst.delete();

3. 修复MediaRecorder录制逻辑 #

若通过Canvas的MediaStream录制处理后的视频，需注意两点：

• 指定浏览器支持的MIME类型，可通过MediaRecorder.isTypeSupported验证，比如video/webm;codecs=vp8
• 同步帧的时间戳，避免录制的流无有效时间信息：

const stream = canvas.captureStream(30); // 帧率与原视频保持一致
const recorder = new MediaRecorder(stream, { mimeType: 'video/webm;codecs=vp8' });
const chunks = [];

recorder.ondataavailable = e => chunks.push(e.data);
recorder.onstop = () => {
  const processedBlob = new Blob(chunks, { type: 'video/webm' });
  const outputVideo = document.getElementById('output-video');
  outputVideo.src = URL.createObjectURL(processedBlob);
};

// 启动录制后，用requestAnimationFrame同步绘制帧
function processFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // 插入上述OpenCV处理逻辑
  requestAnimationFrame(processFrame);
}

recorder.start();
processFrame();
// 结束录制时调用recorder.stop()

4. 排查Blob有效性 #

生成Blob后，可通过console.log(processedBlob.size)检查：

• 若size为0，说明MediaStream未捕获到有效帧，需检查Canvas是否正常输出画面
• 若size正常但播放时长为0，可尝试换用video/mp4编码（需浏览器支持），或检查录制器的元数据生成逻辑

二、更简便的JS视频边缘检测实现方式 #

1. 纯Canvas API实现Sobel边缘检测 #

无需第三方库，直接通过像素操作实现轻量边缘检测：

function sobelEdgeDetect(ctx, width, height) {
  const imgData = ctx.getImageData(0, 0, width, height);
  const data = imgData.data;
  const output = new Uint8ClampedArray(data.length);
  
  // Sobel算子卷积核
  const kernelX = [[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]];
  const kernelY = [[-1, -2, -1], [0, 0, 0], [1, 2, 1]];
  
  for (let y = 1; y < height - 1; y++) {
    for (let x = 1; x < width - 1; x++) {
      let gx = 0, gy = 0;
      // 遍历3x3像素邻域计算梯度
      for (let ky = -1; ky <= 1; ky++) {
        for (let kx = -1; kx <= 1; kx++) {
          const idx = ((y + ky) * width + (x + kx)) * 4;
          const gray = (data[idx] + data[idx+1] + data[idx+2]) / 3;
          gx += gray * kernelX[ky+1][kx+1];
          gy += gray * kernelY[ky+1][kx+1];
        }
      }
      // 计算梯度幅值并映射到0-255
      const magnitude = Math.sqrt(gx*gx + gy*gy);
      const val = Math.min(magnitude, 255);
      const outputIdx = (y * width + x) * 4;
      output[outputIdx] = val;
      output[outputIdx+1] = val;
      output[outputIdx+2] = val;
      output[outputIdx+3] = 255;
    }
  }
  
  imgData.data.set(output);
  ctx.putImageData(imgData, 0, 0);
}

使用时在帧绘制后直接调用：

function processFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  sobelEdgeDetect(ctx, canvas.width, canvas.height);
  requestAnimationFrame(processFrame);
}

2. TensorFlow.js预训练模型 #

若需要更精准的边缘检测，可使用TensorFlow.js加载轻量模型（如HED），无需手动实现算法：

// 加载预训练的边缘检测模型
const model = await tf.loadGraphModel('本地模型路径/model.json');
function processFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  // 将Canvas像素转为Tensor并推理
  const tensor = tf.browser.fromPixels(canvas).toFloat().expandDims(0);
  const predictions = await model.predict(tensor).squeeze();
  // 将推理结果绘制回Canvas
  await tf.browser.toPixels(predictions, canvas);
  requestAnimationFrame(processFrame);
}

3. 轻量第三方库：tracking.js #

tracking.js封装了多种计算机视觉算法，边缘检测使用简单：

// 初始化边缘跟踪器
const tracker = new tracking.ObjectTracker('edge');
tracker.setInitialScale(4);
tracker.setStepSize(2);
tracker.setEdgesDensity(0.1);

// 绑定视频元素并处理检测结果
tracking.track('#source-video', tracker, { camera: false });
tracker.on('track', event => {
  // 在Canvas上绘制边缘框或直接处理帧数据
});

内容的提问来源于stack exchange，提问作者Tsu'Na