基于ml5的体分割滤波器

Question

我试图做一个网络摄像头过滤器，这将做身体分割，以掩盖背景背后的人，并在背景中放置一张图片。类似于在缩放或其他平台上的背景选项。我正在考虑使用ml5和BodyPix，但我只达到了这一点(https://github.com/ml5js/ml5-library/blob/main/examples/p5js/BodyPix/BodyPix_Webcam/sketch.js)：

​

let bodypix;
let video;
let segmentation;

const options = {
  outputStride: 8, // 8, 16, or 32, default is 16
  segmentationThreshold: 0.3, // 0 - 1, defaults to 0.5
};

function preload() {
  bodypix = ml5.bodyPix(options);
}

function setup() {
  createCanvas(320, 240);
  // load up your video
  video = createCapture(VIDEO, videoReady);
  video.size(width, height);
  
}

function videoReady() {
  bodypix.segment(video, gotResults);
}

function draw() {
  background(0);
  if (segmentation) {
    image(segmentation.backgroundMask, 0, 0, width, height);
  }
}

function gotResults(error, result) {
  if (error) {
    console.log(error);
    return;
  }
  segmentation = result;
  bodypix.segment(video, gotResults);
}

​

有谁有办法把图像放在背景中吗？也许还有另一种方式来编码这样的东西？谢谢!

Answer 1

你们很亲密。从段函数返回的对象为您提供了两个PImages，它们是彼此之间的反向掩码，用于此目的。.backgroundMask遮住了背景，所有不被识别的物体都有0α像素。.personMask做的正好相反，只有背景显示。参见这里的参考资料：https://github.com/ml5js/ml5-library/blob/main/docs/reference/bodypix.md

let bodypix;
let video;
let segmentation;
let backgroundImage; // start with the variable

const options = {
  outputStride: 8, 
  segmentationThreshold: 0.3,
};

function preload() {
  bodypix = ml5.bodyPix(options);
  backgroundImage = loadImage('YOURFILENAME'); // load your file here
}

function setup() {
  createCanvas(320, 240);
  video = createCapture(VIDEO, videoReady);
  video.size(width, height);
}

function videoReady() {
  bodypix.segment(video, gotResults);
}

function draw() {
  background(0);
  image(backgroundImage,0,0,width,height); // this is the background drawn before the subject is drawn
  if (segmentation) {
    image(segmentation.backgroundMask, 0, 0, width, height); 
  }
}

function gotResults(error, result) {
  if (error) {
    console.log(error);
    return;
  }
  segmentation = result;
  bodypix.segment(video, gotResults);
}

下面是一个有用的示例：https://editor.p5js.org/adamrtindale@gmail.com/sketches/af83XcLXZ