3.0.0-rc.2 (2023-02-21)
This is the first V3 version with Frame Processor + Skia integration (aka "draw onto frame"/write-back Frame Processors)! For now it only works on iOS, Android is currently WIP. I will probably need to rewrite the entire Android part from CameraX to Camera2 (one of Android's worst APIs) for this.
Example:
const INVERTED_COLORS_SHADER = `
uniform shader image;
half4 main(vec2 pos) {
vec4 color = image.eval(pos);
return vec4(1.0 - color.rgb, 1.0);
}`
const runtimeEffect = Skia.RuntimeEffect.Make(INVERTED_COLORS_SHADER)
const shaderBuilder = Skia.RuntimeShaderBuilder(runtimeEffect)
const imageFilter = Skia.ImageFilter.MakeRuntimeShader(shaderBuilder, null, null)
const paint = Skia.Paint()
paint.setImageFilter(imageFilter)
const frameProcessor = useFrameProcessor((frame) => {
'worklet';
console.log(`Frame: ${frame.orientation}`);
frame.render(paint);
}, [paint])
return <Camera frameProcessor={frameProcessor} previewType="skia" ... />Or:
const paint = Skia.Paint()
paint.setColor(Skia.Color("red"))
const frameProcessor = useFrameProcessor((frame) => {
'worklet';
console.log(`Frame: ${frame.orientation}`);
frame.drawRect({ x: 150, y: 300, width: 100, height: 100 }, paint);
}, [paint])
return <Camera frameProcessor={frameProcessor} previewType="skia" ... />🐛 Bug Fixes
- Add missing
<regex>header (0635d4a) - Fix
global.FrameProcessorPluginsTS error (1f7a2e0) - Make runAsync run truly async by dropping new Frames while executing (3ea5dfa)
✨ Features
- Draw onto
Frameas if it was a Skia Canvas (#1479) (12f850c), closes #1487 - Add
fpsGraphprop to show a debug view of the current FPS the Camera is drawing at (#1479 - Add
previewTypeprop to switch between native OS preview and the Skia Canvas preview view (#1479 - Add
toByteArray(),orientation,isMirroredandtimestamptoFrame(#1487)