Videos Out of Sync

[selected-pixel-jameson]

Hello,

I'm using the TimingSrc script in combination with the mediasync library.

This is being implemented in an Angular project. I have included the references to the timingsrc-v2.js and mediasync.js in the index.html file.

My implementation looks like this.

async refreshVideoPanels(jam: IJam, extension: string) {
    if (jam) {

      this.syncs.forEach(sync => {
        sync.stop()
      })

      this.videos = []
      this.syncs = []

      delete this.timingObject
      this.timingObject = new TIMINGSRC.TimingObject({ range: [0, 360] });
      await this.timingObject.ready
      this.maxVideoLength = 0


      jam.tracks.forEach((trackRelation: ITrackRelation) => {
        // We need to pass the extension in here because we can't load the
        // same video fro all browsers.
        this.setPanelSource(trackRelation.track.id, trackRelation.track.getTrackURL(extension))
        const video = document.getElementById(`${trackRelation.track.id}`) as HTMLVideoElement;
        video.volume = trackRelation.volumeLevel || 1
        video.muted = false
        this.videos.push(video);
      })

      //await this.waitForVideosToBeReady()
      this.determineMaxDuration(jam)
      this.timingObject.on("timeupdate", this.progressUpdate)


      this.videos.forEach((video, index) => {
        if (!video.src.includes('#')) {
          this.syncs.push(MCorp.mediaSync(video, this.timingObject));
          if (index !== 0) {
            this.syncs[index].setSkew(0.09);
          }
        }
      })
    }
  }

As new videos are added to the page the video panels are refreshed and have the source added. The page is not refreshed at all.
As more videos are added or updated they are not syncing when playing back.

If we refresh the page manually the videos will all sync up correctly.

I was just wondering if there's anything I'm missing that would cause the videos to be out of sync?

Thank you.

[ingararntzen]

Hi.

What you are trying to achieve should certainly be feasible :)

I notice that you tear down everything, including the timing object, whenever the video list changes. If what you want is to add another video to the ensemble, preserving the timing object and preexisting media sync objects would likely give a better user experience.

Tearing down and creating a new timing object also implies that the new timing object is in the paused state. Then you need to restart it on every refresh of the video list. It's not clear from the post if you do this.

Ingar

[selected-pixel-jameson]

Thank you very much for your reply.

After a new video is recorded the timingObject is paused / stopped before that video is added to the ensemble. These are the pause and stop functions I have.

 public pause(): void {
    this.timingObject.update({ velocity: 0.0 });
  }

  public play(resume: boolean = false, recording: boolean = false): void {
    //this.startprogress();
    if (resume) {
      this.timingObject.update({ velocity: 1.0 });
    } else {
      this.timingObject.update({ position: 0.0, velocity: 1.0 });
    }

    if (recording) {
      if (this.timingObject) {
        this.timingObject.off("timeupdate", this.progressUpdate)
      }
    }

    this.recording = recording

  }

  public stop(): void {
    this.recording = false
    this.timingObject.update({ position: 0.0, velocity: 0.0 });

  }