How can I update video canvas after setting `videoEl.currentTime`?

[trsh 8]

I do something like this to loop trough video frame by frame:

frameEl.onchange = function(e){
                const frame = parseInt(e.target.value);
                videoEl.currentTime = e.target.value/fps;
            };

But the PIXI canvas is not updating. It updated only on `play`. Are there options?

[ivan.popelyshev 1074]

according to https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.ts#L154  , every frame several operations are performed

1. video texture update

2. super update (BaseImageResource)

3. super-super (Resource)

and without 3. it wont work because it wont raise dirty update id that TextureSystem  will read later

I think regular "texture.update()" should work the same way for you. Whatever you do - 

1. debug whether baseTexture update id will raise

2. make sure your app structure is fine. https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

 

[trsh 8]

7 minutes ago, ivan.popelyshev said:

according to https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/resources/VideoResource.ts#L154  , every frame several operations are performed

1. video texture update

2. super update (BaseImageResource)

3. super-super (Resource)

and without 3. it wont work because it wont raise dirty update id that TextureSystem  will read later

I think regular "texture.update()" should work the same way for you. Whatever you do - 

1. debug whether baseTexture update id will raise

2. make sure your app structure is fine. https://github.com/pixijs/pixi.js/wiki/v5-Custom-Application-GameLoop

 

My setup is like

const videoResource = new PIXI.resources.VideoResource(videoEl, {
                autoPlay: false,
                autoLoad: true,
                crossorigin: true
            });

            const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false });
            const mediaTexture = new PIXI.Texture(baseTexture);
            const mediaSprite = new PIXI.Sprite(mediaTexture);

            
            app.stage.addChild(mediaSprite);

What then I try todo is :

frameEl.onchange = function(e){
                const frame = parseInt(e.target.value);
                videoEl.currentTime = e.target.value/fps;
                mediaTexture.update();
            };

But it doesn't work . I got lot's of black screens.

[ivan.popelyshev 1074]

Strange, it should work. Wanna make a demo?

[trsh 8]

1 hour ago, ivan.popelyshev said:

Strange, it should work. Wanna make a demo?

I try, but then there is another issue , where PIXI is complaining about cross origin

https://codepen.io/TrshMan/pen/GRpPQgm

P.S. test it on FF, Chrome has issues with setting currentTime

Edited May 20, 2020 by trsh

[trsh 8]

Not sure why cross origin stuff. The video works in vanilla HTML+JS

https://codepen.io/andryjohn/pen/xNWvdo

[trsh 8]

2 hours ago, ivan.popelyshev said:

Strange, it should work. Wanna make a demo?

Alternatively can paste the below code in "https://pixijs.io/examples/#/sprite/video.js" and crank the numbers up in input. Only some frames will appear

const app = new PIXI.Application();
document.body.appendChild(app.view);

const fs = document.createElement('input');
fs.type = 'number';
fs.style.position = 'absolute';
fs.style.top = '0px';
fs.style.left = '0px';

document.body.appendChild(fs);

const videoEl = document.createElement('video');
videoEl.preload = "auto";
videoEl.controls = true;

videoEl.addEventListener("canplaythrough", function() {
  process();
}, {once : true});

videoEl.src = 'examples/assets/video.mp4';

function process(){  
   const videoResource = new PIXI.resources.VideoResource(videoEl, {
     autoPlay: false,
     autoLoad: true,
     crossorigin: true
   });

  const baseTexture = new PIXI.BaseTexture(videoResource, { mipmap: false });
  const mediaTexture = new PIXI.Texture(baseTexture);
  const mediaSprite = new PIXI.Sprite(mediaTexture);
 
  app.stage.addChild(mediaSprite);
 
  fs.onchange = function(e){
    videoEl.currentTime = e.target.value;
    console.log(videoEl.currentTime);
    mediaTexture.update();
  }
}

 

[trsh 8]

@ivan.popelyshev any ideas?

[ivan.popelyshev 1074]

No idea so far, looks like some kind of async stuff, bideo cant just update frame fast.

Also, I'm on vacation from pixies, and I want to see how fast other people can answer

[trsh 8]

8 hours ago, ivan.popelyshev said:

No idea so far, looks like some kind of async stuff, bideo cant just update frame fast.

Also, I'm on vacation from pixies, and I want to see how fast other people can answer

Pity. Not much other help here

[Rob Morris 2]

Hey trsh, I took a peek.  Verified that the dirty counter is updating properly, tried messing around with starting and stopping the underlying video to see if that would help.  No dice.

The problem seems to be some kind of race condition, where seeking the underlying video results in the data copy failing if performed too quickly.

Change your sample's change handler to:

  fs.onchange = function(e){
    videoEl.fastSeek(e.target.value);
    setTimeout(function() { baseTexture.update(); }, 100);
  }

And it will work as expected.  I'm not sure what the solution would be should you be wanting real-time response times, but at least this should help narrow down the problem.

[themoonrat 105]

I find that a video needs to be played for seeking to work in updating the video being watched. So try seeking, then a play, then a pause again.

[trsh 8]

13 minutes ago, themoonrat said:

I find that a video needs to be played for seeking to work in updating the video being watched. So try seeking, then a play, then a pause again.

Doing pause right after play results in an error. Or how do u mean it?