1
1
import { PaintStyle , Skia } from '@shopify/react-native-skia' ;
2
- import { useEffect } from 'react' ;
3
- import { StyleSheet , Text } from 'react-native' ;
2
+ import { useEffect , useState } from 'react' ;
3
+ import { Button , Image , StyleSheet , Text , View } from 'react-native' ;
4
4
import {
5
5
OpenCV ,
6
6
ObjectType ,
@@ -16,12 +16,16 @@ import {
16
16
useCameraPermission ,
17
17
useSkiaFrameProcessor ,
18
18
} from 'react-native-vision-camera' ;
19
+ import { useSharedValue } from 'react-native-worklets-core' ;
19
20
import { useResizePlugin } from 'vision-camera-resize-plugin' ;
20
21
21
22
export function VisionCameraExample ( ) {
22
23
const device = useCameraDevice ( 'back' ) ;
23
24
const { resize } = useResizePlugin ( ) ;
24
25
26
+ const [ b64 , setB64 ] = useState < string > ( '' ) ;
27
+ const r = useSharedValue < string > ( '' ) ;
28
+
25
29
const { hasPermission, requestPermission } = useCameraPermission ( ) ;
26
30
27
31
useEffect ( ( ) => {
@@ -43,35 +47,26 @@ export function VisionCameraExample() {
43
47
width : width ,
44
48
height : height ,
45
49
} ,
46
- pixelFormat : 'rgb ' ,
50
+ pixelFormat : 'bgr ' ,
47
51
dataType : 'uint8' ,
48
52
} ) ;
53
+ const rectangles : Rect [ ] = [ ] ;
49
54
50
55
const src = OpenCV . frameBufferToMat ( height , width , resized ) ;
51
56
const dst = OpenCV . createObject ( ObjectType . Mat , 0 , 0 , DataTypes . CV_8U ) ;
52
57
53
- OpenCV . invoke ( 'cvtColor' , src , dst , ColorConversionCodes . COLOR_BGR2RGB ) ;
54
- OpenCV . invoke ( 'cvtColor' , dst , dst , ColorConversionCodes . COLOR_BGR2HSV ) ;
55
-
56
- const lowerBound = OpenCV . frameBufferToMat (
57
- 1 ,
58
- 3 ,
59
- new Uint8Array ( [ 37 , 120 , 120 ] )
60
- ) ;
61
- const upperBound = OpenCV . frameBufferToMat (
62
- 1 ,
63
- 3 ,
64
- new Uint8Array ( [ 60 , 255 , 255 ] )
65
- ) ;
58
+ OpenCV . invoke ( 'cvtColor' , src , dst , ColorConversionCodes . COLOR_BGR2HSV ) ;
66
59
60
+ const lowerBound = OpenCV . createObject ( ObjectType . Scalar , 30 , 60 , 60 ) ;
61
+ const upperBound = OpenCV . createObject ( ObjectType . Scalar , 50 , 255 , 255 ) ;
67
62
OpenCV . invoke ( 'inRange' , dst , lowerBound , upperBound , dst ) ;
68
63
64
+ r . value = OpenCV . toJSValue ( dst ) . base64 ;
65
+
69
66
const channels = OpenCV . createObject ( ObjectType . MatVector ) ;
70
67
OpenCV . invoke ( 'split' , dst , channels ) ;
71
68
72
69
const grayChannel = OpenCV . copyObjectFromVector ( channels , 0 ) ;
73
- const rectangles : Rect [ ] = [ ] ;
74
-
75
70
const contours = OpenCV . createObject ( ObjectType . MatVector ) ;
76
71
77
72
OpenCV . invoke (
@@ -82,15 +77,17 @@ export function VisionCameraExample() {
82
77
ContourApproximationModes . CHAIN_APPROX_SIMPLE
83
78
) ;
84
79
85
- // TO CHECK!
86
- // for (const contour of contours) {
87
- // const { value: area } = OpenCV.invoke('contourArea', contour, false);
80
+ const contoursMats = OpenCV . toJSValue ( contours ) ;
88
81
89
- // if (area > 3000) {
90
- // const rect = OpenCV.invoke('boundingRect', contour);
91
- // rectangles.push(rect);
92
- // }
93
- // }
82
+ for ( let i = 0 ; i < contoursMats . array . length ; i ++ ) {
83
+ const contour = OpenCV . copyObjectFromVector ( contours , i ) ;
84
+ const { value : area } = OpenCV . invoke ( 'contourArea' , contour , false ) ;
85
+
86
+ if ( area > 3000 ) {
87
+ const rect = OpenCV . invoke ( 'boundingRect' , contour ) ;
88
+ rectangles . push ( rect ) ;
89
+ }
90
+ }
94
91
95
92
frame . render ( ) ;
96
93
@@ -118,11 +115,25 @@ export function VisionCameraExample() {
118
115
return < Text > No device</ Text > ;
119
116
}
120
117
return (
121
- < Camera
122
- style = { StyleSheet . absoluteFill }
123
- device = { device }
124
- isActive = { true }
125
- frameProcessor = { frameProcessor }
126
- />
118
+ < >
119
+ < Camera
120
+ style = { StyleSheet . absoluteFill }
121
+ device = { device }
122
+ isActive = { true }
123
+ frameProcessor = { frameProcessor }
124
+ />
125
+ < View
126
+ style = { { height : 200 , width : 200 , top : 100 , backgroundColor : 'white' } }
127
+ >
128
+ < Button title = "test" onPress = { ( ) => setB64 ( r . value ) } />
129
+ { b64 && (
130
+ < Image
131
+ source = { { uri : 'data:image/jpg;base64,' + b64 } }
132
+ height = { 100 }
133
+ width = { 100 }
134
+ />
135
+ ) }
136
+ </ View >
137
+ </ >
127
138
) ;
128
139
}
0 commit comments