Can I use the local video file on the mediapipe? (JS)

Question

I am a student studying programming. I am not good at English, so I wrote it using a translator.

I'm studying the mediapipe. https://google.github.io/mediapipe/solutions/face_mesh

Do you know how to use local video instead of webcam?

let videoElement = document.querySelector(".input_video")

//@mediapipe/camera_utils/camera_utils.js"
const camera = new Camera(videoElement, {
  onFrame: async () => {
    await holistic.send({ image: videoElement });
  },
  width: 640,
  height: 480,
});
camera.start();

This is the code to get the webcam. I think I need to change this code but I don't know how to work it.

so I tried to find out about '@mediapipe/camera_utils/camera_utils.js', I couldn't find any data.

And I found using the local video in the codepen demo. https://codepen.io/mediapipe/details/KKgVaPJ

But I don't know which part of the code to use.

Please teach me the way.

Answer 1

Rather than create a new Camera, you need to send the frames using requestAnimationFrame(). However as the send needs to be in an async function the requestAnimationFrame needs to be within a Promise.

You have the standard mediapipe setup

let videoElement = document.querySelector(".input_video");

const config = {
  locateFile: (file) => {
    return 'https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh@' +
      `${mpFaceMesh.VERSION}/${file}`;
  }
};
const solutionOptions = {
  selfieMode: false,
  enableFaceGeometry: false,
  maxNumFaces: 1,
  refineLandmarks: true, //false,
  minDetectionConfidence: 0.5,
  minTrackingConfidence: 0.5
};

const faceMesh = new mpFaceMesh.FaceMesh(config);
faceMesh.setOptions(solutionOptions);

faceMesh.onResults(onResults);

but rather than the new Camera() or SourcePicker() you need the an animation frame loop

async function onFrame() {
  if (!videoElement.paused && !videoElement.ended) {
    await faceMesh.send({
      image: videoElement
    });
  // https://stackoverflow.com/questions/65144038/how-to-use-requestanimationframe-with-promise    
    await new Promise(requestAnimationFrame);
    onFrame();
  } else
    setTimeout(onFrame, 500);
}

load the video

// must be same domain otherwise it will taint the canvas! 
videoElement.src = "./mylocalvideo.mp4"; 
videoElement.onloadeddata = (evt) => {
  let video = evt.target;

  canvasElement.width = video.videoWidth;
  canvasElement.height = video.videoHeight;

  videoElement.play();
  onFrame();
}