JSFiddle - React, Tailwind, and code Playground

by adil_invideo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.3/pixi.min.js"></script>

JavaScript

/* ****************** DUOTONE***************************** */
const frag = `
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
uniform mediump vec4 color1;
uniform mediump vec4 color2;

void main()
{
     mediump vec4 textureColor = texture2D(uSampler, vTextureCoord);
     float grayscaleValue = dot(textureColor.rgb, vec3(0.2126, 0.7152, 0.0722));
     mediump vec4 mixColor = mix(color1, color2, grayscaleValue);
     mixColor.a = textureColor.a;
     gl_FragColor = mixColor;
     
		// Premultiply alpha.
    gl_FragColor.rgb *= gl_FragColor.a;   

}
`;

class ScreenFilter extends PIXI.Filter{
	constructor(){
  
  }

}

// 5, 21, 39
// 248, 228, 120
class DuotoneFilter extends PIXI.Filter {

  constructor(color1, color2) {
    const uniforms = {
      color1: [color1[0] / 255.0, color1[1] / 255.0, color1[2] / 255.0, 1.0],
      color2: [color2[0] / 255.0, color2[1] / 255.0, color2[2] / 255.0, 1.0],
    };
    super(null, frag, uniforms);
  }
}


const app = new PIXI.Application({
  width: 300,
  height: 300,
  backgroundColor: 0xCCCCCC,
  antialias: true,
  resolution: 2
})

document.body.appendChild(app.view);

// create a video texture from a path
var texture = PIXI.Texture.fromVideo('https://invideo-uploads-ap-south-1.s3.ap-south-1.amazonaws.com/Vdayheartspin011612367595605.webm');

// create a new Sprite using the video texture (yes it's that easy)
var videoSprite = new PIXI.Sprite(texture);

videoSprite.width = 100;
videoSprite.height = 100;
videoSprite.x = 70;
videoSprite.y = 70;
app.stage.addChild(videoSprite);

const filter = new DuotoneFilter([255, 129, 268], [255, 255, 255]);
videoSprite.filters = [filter];

  const img = new PIXI.Sprite.from("https://s3.ap-south-1.amazonaws.com/asset-snapshot/invideo-block-assets/Template_Block_Assets/01Invideo/Standard_Text_Box/Modern/Set_01/Modern_Textbox_13_1_SD3.png");
  img.width = 100;
  img.height = 100;
img.filters = [filter];
  app.stage.addChild(img);