video.currentTime on safari on iphone

Question

When user uploads a video I get frames from that video using a hidden video and canvas elements. The code works well on Firefox and Chrome (both mobile and desktop versions). However when I tested on safari on Iphone 6 it didn't work. More specifically the seeked event, which the code expects to fire after every change of video.currentTime, doesn't get fired on safari. Here is the code:

export const generateCropStrips = (videoFileSrc: string): Promise<string[]> => {
  return new Promise((resolve) => {
    const now = performance.now();
    const images: string[] = [];
    const canvas = document.createElement("canvas");
    const video = document.createElement("video");
    video.src = videoFileSrc;

    video.onloadedmetadata = function() {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      const ctx = canvas.getContext("2d");



      const numOfSnaps = 4;

      const captureInterval = video.duration / numOfSnaps;

      const captureTimes: number[] = [];
      for (let i = 0; i < numOfSnaps; i++) {
        captureTimes.push(i * captureInterval);
      }

      let currentIndex = 0;

      video.onseeked = function() {
        
        ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
        const data = canvas.toDataURL("image/jpeg", 0.7);
        images.push(data);

        currentIndex++;
        if (currentIndex < captureTimes.length) {
          video.currentTime = captureTimes[currentIndex];
        } else {
          const end = performance.now()
          console.log({now, end})
          video.oncanplay = null;
          video.onseeked = null;
          video.src = "";
          resolve(images);
        }
      };

      video.currentTime = captureTimes[currentIndex];
    };
  });
}

I tried making the process run from within a user click handler, but to no avail. Tried a bunch on different video events like loadeddata, canplay, canplaythrough but no progress.