Run a function when seek event completes

Question

I have these two functions:

async takeScreenShot() {
  this.pauseVideo();
  if (this.animations.length && !this.ended) {
    this.pauseLotties()
  }
  this.captures.push(this.canvas.toDataURL('image/webp'));
  if (!this.ended) {
    setTimeout(() => {
      this.takeScreenShot();
    }, 500);
  }
},

async pauseVideo() {
  console.log("currentTime", this.video.currentTime);
  console.log("duration", this.video.duration);
  this.video.pause();
  const oneFrame = 1 / 30;
  if (this.video.currentTime + oneFrame < this.video.duration) {
    this.video.currentTime += oneFrame;
  } else {
    this.video.play()
  }
}

Right now I am using setTimeout to take a screenshot of my canvas every 500 milliseconds. But I would like to take a screenshot using the seek event with a promise to let me know when it's finished seeking so I could take a screenshot. This way it should rip the video more efficiently and possibly faster. How would I go about doing this?

Sandeep Nagaraj · Answer 1 · 2020-05-07T16:57:39.937

1

takeScreenShot(){
return new Promise((resolve,reject)=>{
    this.video.addEventListener("seeked", ()=>{
        return resolve()
    });
})

}

and invoke it using

    this.takeScreenShot().then(()=>{
          return this.pauseVideo()
     }).then(()=>{
console.log("Successfull completed")
})

Please see me know if this helps

edited May 07 '20 at 16:57

answered May 07 '20 at 16:52

Sandeep Nagaraj

118
1
11

score 0 · Accepted Answer · answered May 07 '20 at 21:28

This is the solution I came up with. While it wasn't exactly what Sandeep Nagaraj suggested, his comment did help me substantially in finding the solution. I have therefore upvoted his post.

async takeScreenShot(){
  let seekResolve;
  this.video.addEventListener("seeked", async () => {
          if (seekResolve) seekResolve();
        });
await new Promise(async (resolve,reject)=>{
  console.log("promise running", this.video);
  if(!this.ended){
  if(this.animations.length){
    this.pauseLotties()
  }  
   this.pauseVideo();
  await new Promise(r => (seekResolve = r));
  this.layer.draw();
  this.captures.push(this.canvas.toDataURL('image/webp'));
  resolve()
  this.takeScreenShot()
    }
})
},

Run a function when seek event completes

2 Answers2