Register a callback for when a video frame is updated

FrameUpdateMonitor.ts

/*
  
  Register a callback for when a video frame is updated
  Since video playback generally isn't 60fps, this can be used as a render optimization

  new FrameUpdateMonitor(videoElement, callback)

*/
export class FrameUpdateMonitor {

  private _active: boolean = false
  public set active (bool){
    this._active = bool
    if(this._active) this.onFrame()
  }
  public get active(){
    return this._active
  }

  video: HTMLVideoElement
  lastTime: number = -1
  callback: Function

  constructor(video: HTMLVideoElement, callback: Function) {
    this.video = video
    this.callback = callback
    this.onFrame()
  }

  private onFrame() {
    if (this.active) requestAnimationFrame(this.onFrame.bind(this))
    var time = this.video.currentTime
    // console.log('onFrame', this.active, time, this.lastTime)
    if (time !== this.lastTime) {
      this.lastTime = time
      this.callback(time)
    }
  }

}