body-pix/demos/index.js
function segmentBodyInRealTime() {
  const canvas = document.getElementById('output');
  // since images are being fed from a webcam

  async function bodySegmentationFrame() {
    // if changing the model or the camera, wait a second for it to complete
    // then try again.
    if (state.changingArchitecture || state.changingCamera) {
      setTimeout(bodySegmentationFrame, 1000);
      return;
    }

    // Begin monitoring code for frames per second
    stats.begin();

    // Scale an image down to a certain factor. Too large of an image will
    // slow down the GPU
    const outputStride = +guiState.input.outputStride;

    const flipHorizontally = guiState.flipHorizontal;

    switch (guiState.estimate) {
      case 'segmentation':
        const personSegmentation = await state.net.estimatePersonSegmentation(
            state.video, outputStride,
            guiState.segmentation.segmentationThreshold);

        switch (guiState.segmentation.effect) {
          case 'mask':
            const mask = bodyPix.toMaskImageData(
                personSegmentation, guiState.segmentation.maskBackground);
            bodyPix.drawMask(
                canvas, state.video, mask, guiState.segmentation.opacity,
                guiState.segmentation.maskBlurAmount, flipHorizontally);

            break;
          case 'bokeh':
            bodyPix.drawBokehEffect(
                canvas, state.video, personSegmentation,
                +guiState.segmentation.backgroundBlurAmount,
                guiState.segmentation.edgeBlurAmount, flipHorizontally);
            break;
        }
        break;
      case 'partmap':
        const partSegmentation = await state.net.estimatePartSegmentation(
            state.video, outputStride, guiState.partMap.segmentationThreshold);

        const coloredPartImageData = bodyPix.toColoredPartImageData(
            partSegmentation, partColorScales[guiState.partMap.colorScale]);

        const maskBlurAmount = 0;
        if (guiState.partMap.applyPixelation) {
          const pixelCellWidth = 10.0;

          bodyPix.drawPixelatedMask(
              canvas, video, coloredPartImageData, guiState.partMap.opacity,
              maskBlurAmount, flipHorizontally, pixelCellWidth);
        } else {
          bodyPix.drawMask(
              canvas, video, coloredPartImageData, guiState.opacity,
              maskBlurAmount, flipHorizontally);
        }

        break;
      default:
        break;
    }

    // End monitoring code for frames per second
    stats.end();

    requestAnimationFrame(bodySegmentationFrame);
  }

  bodySegmentationFrame();
}
function segmentBodyInRealTime() {
  const canvas = document.getElementById('output');
  // since images are being fed from a webcam

  async function bodySegmentationFrame() {
    // if changing the model or the camera, wait a second for it to complete
    // then try again.
    if (state.changingArchitecture || state.changingCamera) {
      setTimeout(bodySegmentationFrame, 1000);
      return;
    }

    // Begin monitoring code for frames per second
    stats.begin();

    // Scale an image down to a certain factor. Too large of an image will
    // slow down the GPU
    const outputStride = +guiState.input.outputStride;

    const flipHorizontally = guiState.flipHorizontal;

    switch (guiState.estimate) {
      case 'segmentation':
        const personSegmentation = await state.net.estimatePersonSegmentation(
            state.video, outputStride,
            guiState.segmentation.segmentationThreshold);

        switch (guiState.segmentation.effect) {
          case 'mask':
            const mask = bodyPix.toMaskImageData(
                personSegmentation, guiState.segmentation.maskBackground);
            bodyPix.drawMask(
                canvas, state.video, mask, guiState.segmentation.opacity,
                guiState.segmentation.maskBlurAmount, flipHorizontally);

            break;
          case 'bokeh':
            bodyPix.drawBokehEffect(
                canvas, state.video, personSegmentation,
                +guiState.segmentation.backgroundBlurAmount,
                guiState.segmentation.edgeBlurAmount, flipHorizontally);
            break;
        }
        break;
      case 'partmap':
        const partSegmentation = await state.net.estimatePartSegmentation(
            state.video, outputStride, guiState.partMap.segmentationThreshold);

        const coloredPartImageData = bodyPix.toColoredPartImageData(
            partSegmentation, partColorScales[guiState.partMap.colorScale]);

        const maskBlurAmount = 0;
        if (guiState.partMap.applyPixelation) {
          const pixelCellWidth = 10.0;

          bodyPix.drawPixelatedMask(
              canvas, video, coloredPartImageData, guiState.partMap.opacity,
              maskBlurAmount, flipHorizontally, pixelCellWidth);
        } else {
          bodyPix.drawMask(
              canvas, video, coloredPartImageData, guiState.opacity,
              maskBlurAmount, flipHorizontally);
        }

        break;
      default:
        break;
    }

    // End monitoring code for frames per second
    stats.end();

    requestAnimationFrame(bodySegmentationFrame);
  }

  bodySegmentationFrame();
}
function segmentBodyInRealTime ( ) { const canvas = document . getElementById ( 'output' ) ; // since images are being fed from a webcam async function bodySegmentationFrame ( ) { // if changing the model or the camera, wait a second for it to complete // then try again. if ( state . changingArchitecture || state . changingCamera ) { setTimeout ( bodySegmentationFrame , 1000 ) ; return ; } // Begin monitoring code for frames per second stats . begin ( ) ; // Scale an image down to a certain factor. Too large of an image will // slow down the GPU const outputStride = + guiState . input . outputStride ; const flipHorizontally = guiState . flipHorizontal ; switch ( guiState . estimate ) { case 'segmentation' : const personSegmentation = await state . net . estimatePersonSegmentation ( state . video , outputStride , guiState . segmentation . segmentationThreshold ) ; switch ( guiState . segmentation . effect ) { case 'mask' : const mask = bodyPix . toMaskImageData ( personSegmentation , guiState . segmentation . maskBackground ) ; bodyPix . drawMask ( canvas , state . video , mask , guiState . segmentation . opacity , guiState . segmentation . maskBlurAmount , flipHorizontally ) ; break ; case 'bokeh' : bodyPix . drawBokehEffect ( canvas , state . video , personSegmentation , + guiState . segmentation . backgroundBlurAmount , guiState . segmentation . edgeBlurAmount , flipHorizontally ) ; break ; } break ; case 'partmap' : const partSegmentation = await state . net . estimatePartSegmentation ( state . video , outputStride , guiState . partMap . segmentationThreshold ) ; const coloredPartImageData = bodyPix . toColoredPartImageData ( partSegmentation , partColorScales [ guiState . partMap . colorScale ] ) ; const maskBlurAmount = 0 ; if ( guiState . partMap . applyPixelation ) { const pixelCellWidth = 10.0 ; bodyPix . drawPixelatedMask ( canvas , video , coloredPartImageData , guiState . partMap . opacity , maskBlurAmount , flipHorizontally , pixelCellWidth ) ; } else { bodyPix . drawMask ( canvas , video , coloredPartImageData , guiState . opacity , maskBlurAmount , flipHorizontally ) ; } break ; default : break ; } // End monitoring code for frames per second stats . end ( ) ; requestAnimationFrame ( bodySegmentationFrame ) ; } bodySegmentationFrame ( ) ; }
Feeds an image to BodyPix to estimate segmentation - this is where the
magic happens. This function loops with a requestAnimationFrame method.
Feeds an image to BodyPix to estimate segmentation - this is where the magic happens . This function loops with a requestAnimationFrame method .