Render Video Frame to PixiJS Canvas from Uint8Array returned by ffmpeg

[SenthilKumaranC]

I have created a function to render video frame to Pixi Canvas , but unable to see the output on Pixi Stage. I have added Pixi canvas to DOM.

I have tried normal Canvas also using putImageData api , but not working.

  const renderFrameToPixi = useCallback(async ({ target: { files } }: any) => {
    const { name } = files[0];

    ffmpeg.FS("writeFile", name, await fetchFile(files[0]));

    await ffmpeg.run("-i", name,"-frames:v" ,"1" , "-vf", `scale=640x360`,"frame.bmp");

    const uint8array = ffmpeg.FS("readFile", `frame.bmp`);

    let sprite = new PIXI.Sprite(PIXI.Texture.fromBuffer(uint8array, 640, 360));
    pixiApp.current?.stage.addChild(sprite);

  }, []);

Thanks in Advance

[SenthilKumaranC]

I found the answer myself. Thanks. Need to test the efficiency.

const renderFrameToPixi = useCallback(async ({ target: { files } }: any) => {
const { name } = files[0];

ffmpeg.FS("writeFile", name, await fetchFile(files[0]));

await ffmpeg.run("-i", name,"-frames:v" ,"1" , "-vf", `scale=640x360`,"frame.bmp");


 const uint8array = ffmpeg.FS("readFile", `frame.bmp`);
 const bmp = await createImageBitmap(new Blob([uint8array]));
 
let sprite = new PIXI.Sprite(PIXI.Texture.from(bmp));
pixiApp.current?.stage.addChild(sprite); 

}, []);