AzzappApp / react-native-skia-video

Video encoding/decoding support for React Native Skia
MIT License
46 stars 2 forks source link

Is there a way to use Skia Components(a.k.a Shader) in FrameDrawer(worklet)? #6

Closed eyu0415 closed 1 month ago

eyu0415 commented 1 month ago

I want to reuse jsx Shader component with 'drawAsImage' in FrameDrawer.

But following codes throw an error even if runOnJS to use jsx

for example

const drawFrame: FrameDrawer = ({videoComposition, canvas, currentTime, frames, height, width}) => {
  'worklet';
  const frame = frames['video1'];
  const image = Skia.Image.MakeImageFromNativeBuffer(frame.buffer);
  const render = drawAsImage(
    <Fill>
      <Shader source={runtimeEffect} uniforms={{value}}>
        <ImageShader
          fit="none"
          image={image}
          width={asset.width}
          height={asset.height}
        />
      </Shader>
    </Fill>,
    {width: asset.width, height: asset.height}
  );
  canvas.drawImage(render, 0, 0);
};

// not throw an error but blank videos.
const drawInJS = runOnJS((canvas: SkCanvas, image: SkImage) => {
  const render = drawAsImage(
    <Fill>
      <Shader source={runtimeEffect} uniforms={{value}}>
        <ImageShader
          fit="none"
          image={image}
          width={asset.width}
          height={asset.height}
        />
      </Shader>
    </Fill>,
    {width: asset.width, height: asset.height}
  );
  canvas.drawImage(render, 0, 0);
});