How to use frameProcessor with useSkiaFrameProcessor ? my app crashes when running #3602
Description
Description
Dear all, i just tested with a simple code of tsx:
`import { PaintStyle, Skia } from '@shopify/react-native-skia';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
Camera,
useCameraDevice,
useSkiaFrameProcessor,
} from 'react-native-vision-camera';
const paint = Skia.Paint();
paint.setColor(Skia.Color('red'));
paint.setStyle(PaintStyle.Stroke); // or 'fill'
paint.setStrokeWidth(8);
export default function SkiaCamera(): React.ReactNode {
const device = useCameraDevice('back');
const frameProcessor = useSkiaFrameProcessor((frame) => {
'worklet';
// 1. Render camera frame
frame.render();
// 2. Center rect size
const rectWidth = frame.width / 3;
const rectHeight = frame.height / 4;
const left = (frame.width - rectWidth) / 2;
const top = (frame.height - rectHeight) / 2;
// 3. Create Skia rect
const rect = Skia.XYWHRect(left, top, rectWidth, rectHeight);
// 4. Draw on the frame
frame.drawRect(rect, paint);
}, []);
if (!device) return null;
return (
);
};
const styles = StyleSheet.create({
camera: { flex: 1 },
});`
but when tested on device, the app crashed and exit.
when testing with XCode, i have these debug info:
anyone can help about using worklet and frame to draw some rect with useSkiaFrameProcessor ? thanks a lot
terminating due to uncaught exception of type facebook::jsi::JSError: Cannot read property 'width' of undefined
TypeError: Cannot read property 'width' of undefined
at shopify_CanvasTsx1 (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/@shopify/react-native-skia/src/renderer/Canvas.tsx:119:26)
at anonymous (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-reanimated/src/frameCallback/FrameCallbackRegistryUI.ts:58:38)
at forEach (native)
at loop (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-reanimated/src/frameCallback/FrameCallbackRegistryUI.ts:49:43)
at anonymous (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-worklets/src/runLoop/uiRuntime/requestAnimationFrame.ts:28:16)
at anonymous (/Users/nan/Desktop/RNProjects/fashioncapv1/node_modules/react-native-worklets/src/runLoop/uiRuntime/requestAnimationFrame.ts:48:42)
at callGuard (native)
React Native Skia Version
2.4.7
React Native Version
0.81.5
Using New Architecture
- Enabled
Steps to Reproduce
copy my code an tsx file and test with xcode build of iOS.
`import { PaintStyle, Skia } from '@shopify/react-native-skia';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
Camera,
useCameraDevice,
useSkiaFrameProcessor,
} from 'react-native-vision-camera';
const paint = Skia.Paint();
paint.setColor(Skia.Color('red'));
paint.setStyle(PaintStyle.Stroke); // or 'fill'
paint.setStrokeWidth(8);
export default function SkiaCamera(): React.ReactNode {
const device = useCameraDevice('back');
const frameProcessor = useSkiaFrameProcessor((frame) => {
'worklet';
// 1. Render camera frame
frame.render();
// 2. Center rect size
const rectWidth = frame.width / 3;
const rectHeight = frame.height / 4;
const left = (frame.width - rectWidth) / 2;
const top = (frame.height - rectHeight) / 2;
// 3. Create Skia rect
const rect = Skia.XYWHRect(left, top, rectWidth, rectHeight);
// 4. Draw on the frame
frame.drawRect(rect, paint);
}, []);
if (!device) return null;
return (
);
};
const styles = StyleSheet.create({
camera: { flex: 1 },
});
`
Snack, Code Example, Screenshot, or Link to Repository
import { PaintStyle, Skia } from '@shopify/react-native-skia';
import React from 'react';
import { StyleSheet } from 'react-native';
import {
Camera,
useCameraDevice,
useSkiaFrameProcessor,
} from 'react-native-vision-camera';
const paint = Skia.Paint();
paint.setColor(Skia.Color('red'));
paint.setStyle(PaintStyle.Stroke); // or 'fill'
paint.setStrokeWidth(8);
export default function SkiaCamera(): React.ReactNode {
const device = useCameraDevice('back');
const frameProcessor = useSkiaFrameProcessor((frame) => {
'worklet';
// 1. Render camera frame
frame.render();
// 2. Center rect size
const rectWidth = frame.width / 3;
const rectHeight = frame.height / 4;
const left = (frame.width - rectWidth) / 2;
const top = (frame.height - rectHeight) / 2;
// 3. Create Skia rect
const rect = Skia.XYWHRect(left, top, rectWidth, rectHeight);
// 4. Draw on the frame
frame.drawRect(rect, paint);
}, []);
if (!device) return null;
return (
);
};
const styles = StyleSheet.create({
camera: { flex: 1 },
});