Function loadVideo

shared/test_util.ts:85–154

(
    videoPath: string, videoFPS: number,
    callback: (video: HTMLVideoElement, timestamp: number) =>
        Promise<Keypoint[]>,
    expected: number[][][], skeletonAdjacentPairs: number[][],
    simulatedInterval: number)

}

export async function loadVideo(
    videoPath: string, videoFPS: number,
    callback: (video: HTMLVideoElement, timestamp: number) =>
        Promise<Keypoint[]>,
    expected: number[][][], skeletonAdjacentPairs: number[][],
    simulatedInterval: number): Promise<HTMLVideoElement> {
  // We override video's timestamp with a fake timestamp.
  let simulatedTimestamp: number;
  // We keep a pointer for the expected array.
  let idx: number;

  const actualInterval = 1 / videoFPS;

  // Create a video element on the html page and serve the content through karma
  const video = document.createElement('video');
  // Hide video, and use canvas to render the video, so that we can also
  // overlay keypoints.
  video.style.visibility = 'hidden';
  const source = document.createElement('source');
  source.src = `${KARMA_SERVER}/${videoPath}`;
  source.type = 'video/mp4';
  video.appendChild(source);
  document.body.appendChild(video);
  const canvas = document.createElement('canvas');
  canvas.style.position = 'absolute';
  canvas.style.left = '0';
  canvas.style.top = '0';
  document.body.appendChild(canvas);
  const ctx = canvas.getContext('2d');

  const promise = new Promise<HTMLVideoElement>((resolve, reject) => {
    video.onseeked = async () => {
      const keypoints = await callback(video, simulatedTimestamp);

      const expectedKeypoints = expected[idx].map(([x, y]) => {
        return {x, y};
      });

      ctx.drawImage(video, 0, 0);
      draw(expectedKeypoints, ctx, skeletonAdjacentPairs, 'Green');

      draw(keypoints, ctx, skeletonAdjacentPairs, 'Red');

      const nextTime = video.currentTime + actualInterval;
      if (nextTime < video.duration) {
        video.currentTime = nextTime;
        simulatedTimestamp += simulatedInterval;
        idx++;
      } else {
        resolve(video);
      }
    };
  });

  video.onloadedmetadata = () => {
    video.currentTime = 0.001;
    simulatedTimestamp = 0;
    idx = 0;