{"_id":"@alejandrogonzalez/vision-camera-resize-plugin","name":"@alejandrogonzalez/vision-camera-resize-plugin","dist-tags":{"latest":"3.2.0"},"versions":{"3.2.0":{"name":"@alejandrogonzalez/vision-camera-resize-plugin","version":"3.2.0","description":"A VisionCamera Frame Processor Plugin for fast and efficient Frame resizing, cropping and pixelformat conversion","main":"lib/commonjs/index","module":"lib/module/index","types":"lib/typescript/src/index.d.ts","react-native":"src/index","source":"src/index","scripts":{"typescript":"tsc --noEmit","lint":"eslint \"**/*.{js,ts,tsx}\"","clean":"del-cli android/build example/android/build example/android/app/build example/ios/build lib","prepare":"git submodule update --init --recursive && bob build","update-submodule":"git submodule update --remote --merge","release":"release-it","check-all":"scripts/check-all.sh"},"keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/mrousavy/vision-camera-resize-plugin.git"},"author":{"name":"Marc Rousavy","email":"me@mrousavy.com","url":"https://github.com/mrousavy"},"license":"MIT","bugs":{"url":"https://github.com/mrousavy/vision-camera-resize-plugin/issues"},"homepage":"https://github.com/mrousavy/vision-camera-resize-plugin#readme","publishConfig":{"registry":"https://registry.npmjs.org/"},"devDependencies":{"@jamesacarr/eslint-formatter-github-actions":"^0.2.0","@react-native/eslint-config":"^0.73.2","@release-it/conventional-changelog":"^8.0.1","@types/react":"~18.2.48","@types/react-native":"0.73.0","del-cli":"^5.0.0","eslint":"^8.4.1","eslint-config-prettier":"^9.1.0","eslint-plugin-prettier":"^5.1.3","prettier":"^3.2.4","react":"18.2.0","react-native":"0.73.2","react-native-builder-bob":"^0.23.2","react-native-vision-camera":"^4.0.1","react-native-worklets-core":"^1.2.0","release-it":"^17.0.3","turbo":"^1.10.7","typescript":"^5.0.2"},"resolutions":{"@types/react":"17.0.21"},"peerDependencies":{"react":"*","react-native":"*","react-native-vision-camera":">=4.0.1","react-native-worklets-core":">=1.2.0"},"engines":{"node":">= 18.0.0"},"release-it":{"git":{"commitMessage":"chore: release ${version}","tagName":"v${version}"},"npm":{"publish":true},"github":{"release":true},"plugins":{"@release-it/conventional-changelog":{"preset":"angular"}}},"eslintConfig":{"root":true,"extends":["@react-native","prettier"],"rules":{"prettier/prettier":["error",{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false}]}},"eslintIgnore":["node_modules/","lib/"],"prettier":{"quoteProps":"consistent","singleQuote":true,"tabWidth":2,"trailingComma":"es5","useTabs":false},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module",["typescript",{"project":"tsconfig.json"}]]},"codegenConfig":{"name":"RNVisionCameraResizePluginSpec","type":"modules","jsSrcsDir":"src"},"packageManager":"yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447","_id":"@alejandrogonzalez/vision-camera-resize-plugin@3.2.0","gitHead":"e95eda69ab16a4c2c1386530e85b86e4e87c88fe","_nodeVersion":"20.20.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-CsiGPD7O5SqDrjD/7dDHcMcK7P/47A9CuwfLgS6NpAgfkqmrg8Ut6AfhE9dcO9ZKUxod3iPCtsGw0msQRpHxVA==","shasum":"ab1b1ebec1f7dd95a176e2adbb142412ac563955","tarball":"https://registry.npmjs.org/@alejandrogonzalez/vision-camera-resize-plugin/-/vision-camera-resize-plugin-3.2.0.tgz","fileCount":222,"unpackedSize":5724437,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCs8mpXZnRDGnc1YCWhN5im3eGsxUWXAx9d4Plb6q+DqQIhAMyISzNMO91hVmGIRKX73dK0V6jbrNVBS4sDmnozpbED"}]},"_npmUser":{"name":"alejandrogonzalez","email":"alejogonzalezrubio@gmail.com"},"directories":{},"maintainers":[{"name":"alejandrogonzalez","email":"alejogonzalezrubio@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vision-camera-resize-plugin_3.2.0_1773725398117_0.017395578343318174"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-17T05:29:58.003Z","3.2.0":"2026-03-17T05:29:58.406Z","modified":"2026-03-17T05:29:58.915Z"},"maintainers":[{"name":"alejandrogonzalez","email":"alejogonzalezrubio@gmail.com"}],"description":"A VisionCamera Frame Processor Plugin for fast and efficient Frame resizing, cropping and pixelformat conversion","homepage":"https://github.com/mrousavy/vision-camera-resize-plugin#readme","keywords":["react-native","ios","android"],"repository":{"type":"git","url":"git+https://github.com/mrousavy/vision-camera-resize-plugin.git"},"author":{"name":"Marc Rousavy","email":"me@mrousavy.com","url":"https://github.com/mrousavy"},"bugs":{"url":"https://github.com/mrousavy/vision-camera-resize-plugin/issues"},"license":"MIT","readme":"# vision-camera-resize-plugin\n\nA [VisionCamera](https://github.com/mrousavy/react-native-vision-camera) Frame Processor Plugin for fast and efficient Frame resizing, cropping and pixel-format conversion (YUV -> RGB) using GPU-acceleration, CPU-vector based operations and ARM NEON SIMD acceleration.\n\n## Installation\n\n1. Install [react-native-vision-camera](https://github.com/mrousavy/react-native-vision-camera) (>= 3.8.2) and [react-native-worklets-core](https://github.com/margelo/react-native-worklets-core) (>= 0.2.4) and make sure Frame Processors are enabled.\n2. Install vision-camera-resize-plugin:\n    ```sh\n    yarn add vision-camera-resize-plugin\n    cd ios && pod install\n    ```\n\n## Usage\n\nUse the `resize` plugin within a Frame Processor:\n\n```tsx\nconst { resize } = useResizePlugin()\n\nconst frameProcessor = useFrameProcessor((frame) => {\n  'worklet'\n\n  const resized = resize(frame, {\n    scale: {\n      width: 192,\n      height: 192\n    },\n    pixelFormat: 'rgb',\n    dataType: 'uint8'\n  })\n\n  const firstPixel = {\n    r: resized[0],\n    g: resized[1],\n    b: resized[2]\n  }\n}, [])\n```\n\nOr outside of a function component:\n\n```tsx\nconst { resize } = createResizePlugin()\n\nconst frameProcessor = createFrameProcessor((frame) => {\n  'worklet'\n\n  const resized = resize(frame, {\n    // ...\n  })\n  // ...\n})\n```\n\n## Pixel Formats\n\nThe resize plugin operates in RGB colorspace.\n\n<table>\n<tr>\n<th>Name</th>\n<th><code>0</code></th>\n<th><code>1</code></th>\n<th><code>2</code></th>\n<th><code>3</code></th>\n</tr>\n\n<tr>\n<td><code>rgb</code></td>\n<td>R</td>\n<td>G</td>\n<td>B</td>\n<td>R</td>\n</tr>\n\n<tr>\n<td><code>rgba</code></td>\n<td>R</td>\n<td>G</td>\n<td>B</td>\n<td>A</td>\n</tr>\n\n<tr>\n<td><code>argb</code></td>\n<td>A</td>\n<td>R</td>\n<td>G</td>\n<td>B</td>\n</tr>\n\n<tr>\n<td><code>bgra</code></td>\n<td>B</td>\n<td>G</td>\n<td>R</td>\n<td>A</td>\n</tr>\n\n<tr>\n<td><code>bgr</code></td>\n<td>B</td>\n<td>G</td>\n<td>R</td>\n<td>B</td>\n</tr>\n\n<tr>\n<td><code>abgr</code></td>\n<td>A</td>\n<td>B</td>\n<td>G</td>\n<td>R</td>\n</tr>\n\n</table>\n\n## Data Types\n\nThe resize plugin can either convert to uint8 or float32 values:\n\n<table>\n<tr>\n<th>Name</th>\n<th>JS Type</th>\n<th>Value Range</th>\n<th>Example size</th>\n</tr>\n\n<tr>\n<td><code>uint8</code></td>\n<td><code>Uint8Array</code></td>\n<td>0...255</td>\n<td>1920x1080 RGB Frame = ~6.2 MB</td>\n</tr>\n\n<tr>\n<td><code>float32</code></td>\n<td><code>Float32Array</code></td>\n<td>0.0...1.0</td>\n<td>1920x1080 RGB Frame = ~24.8 MB</td>\n</tr>\n\n</table>\n\n## Cropping\n\nWhen scaling to a different size (e.g. 1920x1080 -> 100x100), the Resize Plugin performs a center-crop on the image before scaling it down so the resulting image matches the target aspect ratio instead of being stretched.\n\nYou can customize this by passing a custom `crop` parameter, e.g. instead of center-crop, use the top portion of the screen:\n\n```ts\nconst resized = resize(frame, {\n  scale: {\n    width: 192,\n    height: 192\n  },\n  crop: {\n    y: 0,\n    x: 0,\n    // 1:1 aspect ratio because we scale to 192x192\n    width: frame.width,\n    height: frame.width\n  },\n  pixelFormat: 'rgb',\n  dataType: 'uint8'\n})\n```\n\n### Performance\n\nIf possible, use one of these two formats:\n\n- `argb` in `uint8`: Can be converted the fastest, but has an additional unused alpha channel.\n- `rgb` in `uint8`: Requires one more conversion step from `argb`, but uses 25% less memory due to the removed alpha channel.\n\nAll other formats require additional conversion steps, and `float` models have additional memory overhead (4x as big).\n\nWhen using TensorFlow Lite, try to convert your model to use `argb-uint8` or `rgb-uint8` as it's input type.\n\n## react-native-fast-tflite\n\nThe vision-camera-resize-plugin can be used together with [react-native-fast-tflite](https://github.com/mrousavy/react-native-fast-tflite) to prepare the input tensor data.\n\nFor example, to use the [efficientdet](https://www.kaggle.com/models/tensorflow/efficientdet/frameworks/tfLite) TFLite model to detect objects inside a Frame, simply add the model to your app's bundle, set up VisionCamera and react-native-fast-tflite, and resize your Frames accordingly.\n\nFrom the model's description on the website, we understand that the model expects 320 x 320 x 3 buffers as input, where the format is uint8 rgb.\n\n```ts\nconst objectDetection = useTensorflowModel(require('assets/efficientdet.tflite'))\nconst model = objectDetection.state === \"loaded\" ? objectDetection.model : undefined\n\nconst { resize } = useResizePlugin()\n\nconst frameProcessor = useFrameProcessor((frame) => {\n  'worklet'\n\n  const data = resize(frame, {\n    scale: {\n      width: 320,\n      height: 320,\n    },\n    pixelFormat: 'rgb',\n    dataType: 'uint8'\n  })\n  const output = model.runSync([data])\n\n  const numDetections = output[0]\n  console.log(`Detected ${numDetections} objects!`)\n}, [model])\n```\n\n## Benchmarks\n\nI benchmarked vision-camera-resize-plugin on an iPhone 15 Pro, using the following code:\n\n```tsx\nconst start = performance.now()\nconst result = resize(frame, {\n  scale: {\n    width: 100,\n    height: 100,\n  },\n  pixelFormat: 'rgb',\n  dataType: 'uint8'\n})\nconst end = performance.now()\n\nconst diff = (end - start).toFixed(2)\nconsole.log(`Resize and conversion took ${diff}ms!`)\n```\n\nAnd when running on 1080x1920 yuv Frames, I got the following results:\n\n```\n LOG  Resize and conversion took 6.48ms\n LOG  Resize and conversion took 6.06ms\n LOG  Resize and conversion took 5.89ms\n LOG  Resize and conversion took 5.97ms\n LOG  Resize and conversion took 6.98ms\n```\n\nThis means the Frame Processor can run at up to ~160 FPS.\n\n## Adopting at scale\n\n<a href=\"https://github.com/sponsors/mrousavy\">\n  <img align=\"right\" width=\"160\" alt=\"This library helped you? Consider sponsoring!\" src=\".github/funding-octocat.svg\">\n</a>\n\nThis library is provided _as is_, I work on it in my free time.\n\nIf you're integrating vision-camera-resize-plugin in a production app, consider [funding this project](https://github.com/sponsors/mrousavy) and <a href=\"mailto:me@mrousavy.com?subject=Adopting vision-camera-resize-plugin at scale\">contact me</a> to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating vision-camera-resize-plugin and/or VisionCamera Frame Processors, and more.\n\n\n## Contributing\n\nSee the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","readmeFilename":"README.md","_rev":"1-b0a1d8a4b24fddd4a7a958ebe3c621ce"}