search

tony-xlh / vision-camera-cropper

A vision camera frame processor plugin for cropping
MIT License
24 stars 5 forks source link

Frame Processor Error: crop is not a function (it is undefined), js engine: VisionCamera #9

Closed Levinardo closed 1 week ago

Levinardo commented 3 weeks ago

the following error show i have tried every thing from the previous explained issue nothing works , upgraded my react native from 0.72.6 to 0.75.2 and tried every other alternative it didnt worked

package.json file: { "name": "fleetmanagement", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-async-storage/async-storage": "^1.23.1", "@react-native-masked-view/masked-view": "^0.3.0", "@react-navigation/bottom-tabs": "^6.5.20", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.9.26", "@react-navigation/stack": "^6.3.20", "@rneui/base": "^4.0.0-rc.7", "@rneui/themed": "^4.0.0-rc.8", "date-fns": "^2.30.0", "moment": "^2.30.1", "moment-range": "^4.0.2", "mrz": "^4.2.0", "react": "18.3.1", "react-native": "0.75.2", "react-native-android-location-services-dialog-box": "^2.8.2", "react-native-autocomplete-dropdown": "^3.1.5", "react-native-autocomplete-input": "^5.4.0", "react-native-blob-util": "^0.19.2", "react-native-canvas": "^0.1.39", "react-native-canvas-signature": "^1.0.2", "react-native-date-picker": "^4.3.3", "react-native-dropdown-picker": "^5.4.6", "react-native-eject": "^0.2.0", "react-native-geolocation-service": "^5.3.1", "react-native-gesture-handler": "^2.18.1", "react-native-image-picker": "^7.1.2", "react-native-maps": "^1.14.0", "react-native-onesignal": "^5.2.0", "react-native-paper": "^5.11.4", "react-native-rename": "^3.2.14", "react-native-safe-area-context": "^4.10.1", "react-native-screens": "^3.27.0", "react-native-share": "^9.4.1", "react-native-signature-canvas": "^4.7.1", "react-native-simple-toast": "^3.0.2", "react-native-svg": "^14.2.0", "react-native-swipe-list-view": "^3.2.9", "react-native-table-component": "^1.2.2", "react-native-toast-message": "^2.1.7", "react-native-vector-icons": "^10.0.3", "react-native-vision-camera": "^4.5.2", "react-native-webview": "^13.6.4", "react-native-worklets-core": "1.1.0", "vision-camera-cropper": "^1.0.0", "vision-camera-dynamsoft-label-recognizer": "^2.1.1" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.75.2", "@react-native/eslint-config": "^0.75.2", "@react-native/metro-config": "^0.75.2", "@react-native/typescript-config": "0.75.2", "@types/react": "^18.2.6", "@types/react-native-table-component": "^1.2.8", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "eslint": "^8.19.0", "jest": "^29.6.3", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.8.8", "react-test-renderer": "18.3.1", "typescript": "5.0.4" }, "engines": { "node": ">=18" }, "packageManager": "yarn@3.6.4" }

babel.config,js:

module.exports = { presets: ['module:@react-native/babel-preset'], plugins: [['react-native-worklets-core/plugin']], };

index.tsx // for using this library import { useEffect, useState } from "react"; import { View, Text, StyleSheet, Pressable, Platform } from "react-native"; import Svg, { Rect } from "react-native-svg"; import { Camera, useCameraDevice, useCameraFormat, useFrameProcessor } from "react-native-vision-camera"; import { Worklets, useSharedValue } from "react-native-worklets-core"; import { CropRegion, crop } from "vision-camera-cropper";

export interface CameraScreenProps { route:any; navigation:any; }

export default function CameraScreen(props:CameraScreenProps){ const [hasPermission, setHasPermission] = useState(false); const [isActive,setIsActive] = useState(true); const device = useCameraDevice("back"); const format = useCameraFormat(device, [ { videoResolution: { width: 1920, height: 1080 } }, { fps: 30 } ]) const [cropRegion,setCropRegion] = useState({ left: 10, top: 20, width: 80, height: 30 }); const cropRegionShared = useSharedValue<undefined|CropRegion>(undefined); const shouldTake = useSharedValue(false); const [pressed,setPressed] = useState(false); const capture = () => { shouldTake.value=true; }

const adaptCropRegionForIDCard = () => { let size = getFrameSize(); let regionWidth = 0.8size.width; let desiredRegionHeight = regionWidth/(85.6/54); let height = Math.ceil(desiredRegionHeight/size.height100); let region = { left:10, width:80, top:20, height:height }; setCropRegion(region); cropRegionShared.value = region; }

const getViewBox = () => { const frameSize = getFrameSize(); const viewBox = "0 0 "+frameSize.width+" "+frameSize.height; return viewBox; }

const getFrameSize = ():{width:number,height:number} => { let size = {width:1080,height:1920}; return size; }

const onCaptured = (base64:string) => { setIsActive(false); if (props) { if (props.navigation) { props.navigation.navigate({ name: 'Card', params: { base64: base64 }, merge: true, }); } } }

const onCapturedJS = Worklets.createRunOnJS(onCaptured);

const frameProcessor = useFrameProcessor((frame) => { 'worklet';

if (shouldTake.value && cropRegionShared.value) {
  shouldTake.value = false;

  const result = crop(frame, {
    cropRegion: cropRegionShared.value, 
    includeImageBase64: true, 
    saveAsFile: false
  });

  if (result?.base64) {
    onCapturedJS(result.base64);
  }
}

}, []);

useEffect(() => { (async () => { const status = await Camera.requestCameraPermission(); setHasPermission(status === 'granted'); setIsActive(true); adaptCropRegionForIDCard(); })(); }, []);

return (

{device != null && hasPermission && ( <> )} {setPressed(true)}} onPressOut={()=>{setPressed(false)}} onPress={()=>{capture()}}> 
</View>

) }

const styles = StyleSheet.create({ bottomBar:{ position: "absolute", width: "100%", bottom: 0, height: 60, flexDirection:"row", justifyContent:"center", }, outerCircle: { width: 60, height: 60, borderRadius: 60 / 2, backgroundColor: "lightgray", display:"flex", alignItems:"center", justifyContent:"center", }, innerCircle: { width: 45, height: 45, borderRadius: 45 / 2, backgroundColor: "white", }, circlePressed: { backgroundColor: "lightgray", } });

tony-xlh commented 2 weeks ago

Try the example to see if it works and compare with your project to see what is missing.

thuydao commented 2 weeks ago

any updating?

Levinardo commented 2 weeks ago

any updating?

yeah i was able to fix it by downgrading the react-native version to 0.72.17 and using the v3 of vision camera along with same dependencies from this repo https://github.com/tony-xlh/react-native-id-card-scanner

Anj-interactivated commented 2 weeks ago 
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-native-community/blur": "^4.4.0",
"@react-native-firebase/app": "^20.1.0",
"@react-native-firebase/auth": "^20.1.0",
"@react-native-firebase/dynamic-links": "^20.1.0",
"@react-native-firebase/messaging": "^20.1.0",
"@react-native-firebase/storage": "^20.1.0",
"@react-native-google-signin/google-signin": "^11.0.1",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/material-top-tabs": "^6.6.14",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@shopify/react-native-skia": "^1.2.3",
"link": "^2.1.0",
"lottie-react-native": "^6.7.2",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-animated-pagination-dots": "^0.1.73",
"react-native-confetti": "^0.1.0",
"react-native-dotenv": "github:goatandsheep/react-native-dotenv",
"react-native-gesture-handler": "^2.18.1",
"react-native-image-picker": "^7.1.2",
"react-native-mmkv": "^2.12.2",
"react-native-pager-view": "^6.3.3",
"react-native-progress-wheel": "^2.1.0",
"react-native-reanimated": "^3.15.0",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.30.1",
"react-native-shadow-2": "^7.0.8",
"react-native-size-matters": "^0.4.2",
"react-native-snackbar": "^2.6.2",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^15.1.0",
"react-native-svg-transformer": "^1.3.0",
"react-native-swipe-detect": "^1.0.10",
"react-native-tab-view": "^3.5.2",
"react-native-vision-camera": "^4.0.5",
"react-native-worklets-core": "^1.3.3",
"rn-tooltip": "^3.0.3",
"victory-native": "^37.0.2",
"vision-camera-cropper": "1.2.0"

same here after upgrading to 1.2.0

Levinardo commented 2 weeks ago 
"@react-native-async-storage/async-storage": "^1.23.1",
"@react-native-community/blur": "^4.4.0",
"@react-native-firebase/app": "^20.1.0",
"@react-native-firebase/auth": "^20.1.0",
"@react-native-firebase/dynamic-links": "^20.1.0",
"@react-native-firebase/messaging": "^20.1.0",
"@react-native-firebase/storage": "^20.1.0",
"@react-native-google-signin/google-signin": "^11.0.1",
"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/material-top-tabs": "^6.6.14",
"@react-navigation/native": "^6.1.17",
"@react-navigation/native-stack": "^6.9.26",
"@shopify/react-native-skia": "^1.2.3",
"link": "^2.1.0",
"lottie-react-native": "^6.7.2",
"react": "18.2.0",
"react-native": "0.73.6",
"react-native-animated-pagination-dots": "^0.1.73",
"react-native-confetti": "^0.1.0",
"react-native-dotenv": "github:goatandsheep/react-native-dotenv",
"react-native-gesture-handler": "^2.18.1",
"react-native-image-picker": "^7.1.2",
"react-native-mmkv": "^2.12.2",
"react-native-pager-view": "^6.3.3",
"react-native-progress-wheel": "^2.1.0",
"react-native-reanimated": "^3.15.0",
"react-native-render-html": "^6.3.4",
"react-native-safe-area-context": "^4.9.0",
"react-native-screens": "^3.30.1",
"react-native-shadow-2": "^7.0.8",
"react-native-size-matters": "^0.4.2",
"react-native-snackbar": "^2.6.2",
"react-native-splash-screen": "^3.3.0",
"react-native-svg": "^15.1.0",
"react-native-svg-transformer": "^1.3.0",
"react-native-swipe-detect": "^1.0.10",
"react-native-tab-view": "^3.5.2",
"react-native-vision-camera": "^4.0.5",
"react-native-worklets-core": "^1.3.3",
"rn-tooltip": "^3.0.3",
"victory-native": "^37.0.2",
"vision-camera-cropper": "1.2.0"

same here after upgrading to 1.2.0

better to downgrade to v3 of vision camera untill this big resolves

Anj-interactivated commented 2 weeks ago

Upgraded react to latest using https://react-native-community.github.io/upgrade-helper

    "@react-native-async-storage/async-storage": "^1.23.1",
    "@react-native-community/blur": "^4.4.0",
    "@react-native-firebase/app": "^20.1.0",
    "@react-native-firebase/auth": "^20.1.0",
    "@react-native-firebase/dynamic-links": "^20.1.0",
    "@react-native-firebase/messaging": "^20.1.0",
    "@react-native-firebase/storage": "^20.1.0",
    "@react-native-google-signin/google-signin": "^11.0.1",
    "@react-navigation/bottom-tabs": "^6.5.20",
    "@react-navigation/material-top-tabs": "^6.6.14",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@shopify/react-native-skia": "^1.3.11",
    "link": "^2.1.0",
    "lottie-react-native": "^6.7.2",
    "react": "18.3.1",
    "react-native": "0.75.2",
    "react-native-animated-pagination-dots": "^0.1.73",
    "react-native-confetti": "^0.1.0",
    "react-native-dotenv": "github:goatandsheep/react-native-dotenv",
    "react-native-gesture-handler": "^2.18.1",
    "react-native-image-picker": "^7.1.2",
    "react-native-mmkv": "^2.12.2",
    "react-native-pager-view": "^6.3.3",
    "react-native-progress-wheel": "^2.1.0",
    "react-native-reanimated": "^3.15.0",
    "react-native-render-html": "^6.3.4",
    "react-native-safe-area-context": "^4.9.0",
    "react-native-screens": "^3.30.1",
    "react-native-shadow-2": "^7.0.8",
    "react-native-size-matters": "^0.4.2",
    "react-native-snackbar": "^2.6.2",
    "react-native-splash-screen": "^3.3.0",
    "react-native-svg": "^15.5.0",
    "react-native-svg-transformer": "^1.3.0",
    "react-native-swipe-detect": "^1.0.10",
    "react-native-tab-view": "^3.5.2",
    "react-native-vision-camera": "^4.5.1",
    "react-native-worklets-core": "^1.3.3",
    "rn-tooltip": "^3.0.3",
    "victory-native": "^37.0.2",
    "vision-camera-cropper": "^1.1.0",
    "zustand": "^4.5.2"

1.2.0 was still not working but after changing "vision-camera-cropper": "^1.1.0", it works.

xulihang commented 2 weeks ago

The new bob uses esm for output. I have disabled it in v1.3.0 to fix this problem: https://github.com/tony-xlh/vision-camera-cropper/commit/2aceedb92e91e6105280f33a4ac802024ce7511b

I don't know the exact reason but it works. Maybe @mrousavy has some insights.

thuydao commented 2 weeks ago

Change import to this import { crop, CropRegion } from 'vision-camera-cropper/src'; Its work for me