Cropping a video texture the same way as an img texture

[trych]

Hi there,

after having received great support here recently posting my first pixi.js issue, I now run into another problem I can't resolve.
On my page I load a mix of images and videos as sprites. The goal is to crop these sprites, which I can achieve by changing the frame with and height of the corresponding texture.
While this works flawlessly for images, when I try to do the same thing for videos, they don't get cropped, but they sort of crop but then extend their last pixel column up until the full length again.
See the sample screenshot I attached, where I tried to crop a video to half its width, but it then got extended in the way I described.

Here is my code:

const canvas = document.getElementById('mycanvas');
const app = new PIXI.Application({
  view: canvas,
  width: window.innerWidth,
  height: window.innerHeight
});

document.body.appendChild(app.view);

app.loader.add(mediaResources).load((loader, resources) => {

  let sprites = [];
  let resource, texture, frame, fw, fh;

  for(let i = 0, counter = 0; i < mediaResources.length; i++, counter++) {

    resource = resources['rs' + counter];
    if(resource.extension === "mp4") {
      texture = PIXI.Texture.from(resource.url);
      frame = texture.frame;
      fw = 1024;
      fh = 576;

    } else {
      texture = resource.texture;
      frame = texture.frame;
      fw = frame.width;
      fh = frame.height;

    }

    // crop the frame to half its width, leaving only the right half
    frame.width = fw * 0.5;
    frame.x = fw * 0.5;

    texture.updateUvs();

    sprites[i] = new PIXI.Sprite(texture);
    sprites[i].y = i * 600;
    sprites[i].x = i * 600;

    app.stage.addChild(sprites[i]);

  }

});

Am I doing something wrong or is this just the way pixi.js treats video textures? If so, is there a way to work around this and still get the result of a video sprite that is cropped?

Thanks a lot for looking into this!

 

[ivan.popelyshev]

That effect usually appears when you make width much bigger than actual width of baseTexture. 

Also I have no guarantee that this method works with mp4 because "from"-loaded things dont have the size initially, you have to trace whats goin on there and how much times UV's are calculated and whats in those UV's for particular sprite. Sorry, but without full example the only thing i can suggest in this case - Go Debug It.

[trych]

31 minutes ago, ivan.popelyshev said:

That effect usually appears when you make width much bigger than actual width of baseTexture.

In this case I am making the width smaller, so I was expecting it to be cropped just like the images.

 

32 minutes ago, ivan.popelyshev said:

Also I have no guarantee that this method works with mp4 because "from"-loaded things dont have the size initially

This is why I have manually set the frame with and height of the sprite to the known video dimensions.
 

33 minutes ago, ivan.popelyshev said:

without full example the only thing i can suggest in this case - Go Debug It

That's what I tried to do, hence my minimized example above.  But you are right, of course the images and video are missing, so I created a full, self-contained example that I attached. There you can see that the video get's extended instead of cropped – as opposed to the images that get cropped to half their width.

Thanks for having a look!

videoCrop.zip

[ivan.popelyshev]

OK, I'll look at it in a day or two if no one else does it

[trych]

Thank you, I would really appreciate it.

[trych]

@ivan.popelyshev It seems like no one else did have a look. Could I kindly ask you, if you had a chance to check out the example that I uploaded? Thank you!

Edited January 29, 2020 by trych

[jonforum]

Are you able to replicate this issue with other codec video? or example with the pixijs demo video 
https://github.com/pixijs/examples/blob/gh-pages/examples/assets/video.mp4
If no , it can maybe just a bad codec support.
You can try another one.
I remember have some issue with pixijs with video used some codec ex:vp9, but fixed with another.

 

Staxrip can help you for testing different codec setup.

Edited January 29, 2020 by jonforum

[trych]

Hi @jonforum,
thanks for looking into this.

I have now tried a variety of different video formats (mp4, vp8, vp9, with different settings) and they all show the same behavior. So it seems to be a general bug with video, not specific to certain format.

[jonforum]

did you try texture trim ?

      texture.trim = new PIXI.Rectangle()

      texture.trim.width = 400; // crop

      texture.trim.height = 576;

 

[ivan.popelyshev]

@jonforum he attached the demo, you can look at it and find whats wrong. I cant do it right now, too busy

[jonforum]

 

Here for you

    if(resource.extension === "mp4") {
      const texture = PIXI.Texture.from(resource.url);
      const videoSprite = new PIXI.Sprite( texture );
      /**@type {HTMLVideoElement}*/
      const videoControler = videoSprite.texture.baseTexture.source; 
      videoControler.currentTime = 0; //jump to 0 will also autostart
      videoControler.onplay = function() {
      //TRIM VIDEO after loading or onplay
        videoSprite.texture.trim = new PIXI.Rectangle(0,0,400,400);
        videoSprite.texture.frame = new PIXI.Rectangle(0,0,400,400);
      };
      app.stage.addChild(videoSprite);

    }

 

Don't ask me why but you need do the thing async ! or pixi going crazy with gl error.
So perform this inside on start.
I can't investigate more because you don't join me a `launch.json` for debug in IDE.

Edited January 30, 2020 by jonforum

[trych]

On 1/30/2020 at 5:10 PM, jonforum said:

Don't ask me why but you need do the thing async ! or pixi going crazy with gl error.
So perform this inside on start.

Thanks! I will give this a try. I guess that means I will have to animate the rectangle along, as soon as I start moving the video sprite, right?

 

On 1/30/2020 at 5:10 PM, jonforum said:

I can't investigate more because you don't join me a `launch.json` for debug in IDE.

What does that mean? What is a launch.json file? Do I need to provide you with one? What should it contain?