Flipping video image horizontally from user camera stream

[tjs]

I'm rendering the stream from the user's camera onto the canvas by this method:

this._videoTexture = PIXI.Texture.fromVideo(this._videoDomElement);

this._videoSprite = new PIXI.Sprite(this._videoTexture);

I need to flip the image produced horizontally though and I was wondering the best way to do it.   

[ZackMercury]

this._videoSprite.anchor.set(0.5, 0);
this._videoSprite.scale.x = -1;
this._videoSprite.x += this._videoSprite.width / 2;

 

Edited January 26, 2021 by ZackMercury

[tjs]

Hey thanks for this, it works perfectly. 

I guess if I just set the scale.x = -1 without the other changes then it would be rendering outside the bounds of the sprite.

I wonder how intensive the calculations are to render and flip the video are every frame or whether it would be more optimised to have the canvas transparent and play the video in a dom web element underneath instead.

[ZackMercury]

Don't do it every frame. Do it once, when the video starts playing.

All objects coordinate systems are being multiplied by their matrix either way, regardless of their transforms.

It's the same amount of calculation for whether you transform it or not.

Edited January 28, 2021 by ZackMercury