删除 p5.js 中的顺序重复帧答案

【问题标题】：Remove sequentially duplicate frames in p5.js删除 p5.js 中的顺序重复帧
【发布时间】：2021-12-18 03:13:34
【问题描述】：

在下面的代码中，我想获取前 120 帧。
然后我想删除顺序重复的

ffmpeg 有一个 mpdecimate 过滤器，它应该丢弃彼此没有太大差异的帧。

但我不知道是否有 ffmpeg Js 库（或等效的）可以在 p5.js 上下文中执行类似的操作。

function setup() {
  frameRate(24)
  video = createCapture(VIDEO)
  video.size(videoWidth, videoHeight)
  video.hide()

  createCanvas(canvasWidth, canvasWidth)
}

let frames       = []
let uniqueFrames = []
let STOP         = false

function draw() {

  if (video && video.loadedmetadata && frameCount <= 100) {
    frames.push(image(video.get()))
  } else if (!STOP) {
    STOP = true
    uniqueFrames = removeDuplicates(frames)
  }
}

【问题讨论】：

标签： javascript image-processing ffmpeg video-processing p5.js

【解决方案1】：

您可以做的一件事是获取两个帧之间的绝对差。

当您这样做时，如果所有像素都匹配，则结果将是一个完全黑色的图像，否则您将在帧不同的地方拥有更亮的像素。对于一堆传统的计算机视觉任务来说，这是一项非常有用的基本技术。

你可以做的是编写一个函数，它接收两帧，计算绝对差，计算非零像素并返回它。此值在针对阈值的 if 条件中很有用：也许帧不需要 100% 相同，但如果它们假设 85% 相同，那么您可以将其标记为重复。

Kyle McDonald's Frame Difference p5.js example 太棒了！

作为参考，我只是在这里列出凯尔的例子：

// https://kylemcdonald.github.io/cv-examples/

var capture;
var previousPixels;
var w = 640;
var h = 480;

function setup() {
    capture = createCapture({
        audio: false,
        video: {
            width: w,
            height: h
        }
    }, function() {
        console.log('capture ready.')
    });
    capture.elt.setAttribute('playsinline', '');
    capture.size(w, h);
    createCanvas(w, h);
    capture.hide();
}

function copyImage(src, dst) {
    var n = src.length;
    if (!dst || dst.length != n) dst = new src.constructor(n);
    while (n--) dst[n] = src[n];
    return dst;
}

function draw() {
    capture.loadPixels();
    var total = 0;
    if (capture.pixels.length > 0) { // don't forget this!
        if (!previousPixels) {
            previousPixels = copyImage(capture.pixels, previousPixels);
        } else {
            var w = capture.width,
                h = capture.height;
            var i = 0;
            var pixels = capture.pixels;
            var thresholdAmount = select('#thresholdAmount').value() * 255. / 100.;
            thresholdAmount *= 3; // 3 for r, g, b
            for (var y = 0; y < h; y++) {
                for (var x = 0; x < w; x++) {
                    // calculate the differences
                    var rdiff = Math.abs(pixels[i + 0] - previousPixels[i + 0]);
                    var gdiff = Math.abs(pixels[i + 1] - previousPixels[i + 1]);
                    var bdiff = Math.abs(pixels[i + 2] - previousPixels[i + 2]);
                    // copy the current pixels to previousPixels
                    previousPixels[i + 0] = pixels[i + 0];
                    previousPixels[i + 1] = pixels[i + 1];
                    previousPixels[i + 2] = pixels[i + 2];
                    var diffs = rdiff + gdiff + bdiff;
                    var output = 0;
                    if (diffs > thresholdAmount) {
                        output = 255;
                        total += diffs;
                    }
                    pixels[i++] = output;
                    pixels[i++] = output;
                    pixels[i++] = output;
                    // also try this:
                    // pixels[i++] = rdiff;
                    // pixels[i++] = gdiff;
                    // pixels[i++] = bdiff;
                    i++; // skip alpha
                }
            }
        }
    }
    // need this because sometimes the frames are repeated
    if (total > 0) {
        select('#motion').elt.innerText = total;
        capture.updatePixels();
        image(capture, 0, 0, 640, 480);
    }
}

<html>

<head>
    <meta charset="UTF-8">
    <title>DifferenceImage</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/addons/p5.dom.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <p>
        Threshold: <input type="range" id="thresholdAmount" value="25">
    </p>
    <p>
        Motion: <span id="motion">0</span>
    </p>
    <script src="sketch.js"></script>
</body>

</html>

看到它在行动here。

祝你好运，将帧差代码封装成一个可重用的函数，您可以在 removeDiplicates() 中调用该函数。

【讨论】：

原来有一个ffmpeg.js 库，所以我将尝试ffmpeg 的mpdecimate 过滤器。谢谢！
哇，我尝试了您的示例，这非常棒:) 我已将链接包含在您的答案中。不知道如何将其整合到我的问题中：D.
那么如果total > 0那么当前帧与前一帧相同，我可以忽略当前帧，是吗？
我不知道 ffmpeg 的 mpdecimate：太酷了！感谢分享。重构做得很好。 total 正在计算不同的像素数（给定阈值）。如果total == 0 则当前前一帧之间的所有像素都匹配（注意结果是完全黑帧）。这有意义吗？
如此接近！那里有两个陷阱：1.您正在推送帧的base64编码表示：如果您想使用image()进行渲染，只需存储p5.Image的副本（例如uniqueFrames.push(capture.get())），2.@987654334 @ 您尝试使用 image() 渲染帧的地方只被调用一次：您可能打算在更高级别添加一个 else，就在 draw() 结束之前，3. 可选：您可能喜欢使用 @987654338 @：index = (index + 1) % uniqueFrames.length;