skills.rest
margelo
margeloOFFICIAL
Explore all skills by this author →
Website𝕏@margelo_comGitHub

react-native-vision-camera-realtime

Designs and reviews low-latency VisionCamera v5 pipelines for GPU, ML, and Skia frame processing.

172|8|Updated Apr 13, 2026
Search Tags:#real-time#latency#gpu#react-native#webgpu#frame-processing#vision-camera
One-click install
npx skills add https://github.com/margelo/react-native-skills --skill react-native-vision-camera-realtime-margelo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-vision-camera-realtime
Source: https://github.com/margelo/react-native-skills/tree/main/skills/react-native-vision-camera-realtime
Command: npx skills add https://github.com/margelo/react-native-skills --skill react-native-vision-camera-realtime-margelo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Building real-time camera pipelines in React Native often leads to dropped frames, GPU-CPU synchronization stalls, and missed frame budgets because developers process frames in the wrong memory domain or allocate resources per frame. ## Core Features & Use Cases - Pipeline Architecture Guidance: Choose the correct processing path based on the final consumer, whether Skia overlays, WebGPU compute, Nitro frame plugins, or CPU-bound ML inference. - Hot-Path Invariants: Enforce zero-copy interop, orientation-as-metadata handling, single GPU execution domains, and exact-once resource release for Frame and NativeBuffer objects. - Latency Profiling: Measure camera-to-result latency at p95/p99, track dropped frames, and validate thermal behavior on production devices. - Use Case: When building a 60 FPS pose-detection overlay with Skia, use this Skill to keep inference and rendering on one GPU timeline and avoid per-frame readbacks that blow the 16.67 ms budget. ## Quick Start Ask the agent to review my VisionCamera frame processor for latency issues and recommend a zero-copy GPU pipeline for real-time ML overlays.

Frequently Asked Questions about react-native-vision-camera-realtime

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a real-time VisionCamera frame processor without dropping frames?▼

Keep processing and rendering in one GPU execution domain, reuse warmed pipelines and buffers, and avoid per-frame allocations. Target under 16 ms at 60 FPS and never route per-frame geometry through React state.

Should I use Skia or WebGPU for VisionCamera frame overlays?▼

Use SkiaCamera for the fastest frame-coupled prototype with canvas drawing. Use WebGPU when you need WGSL compute shaders or GPU inference via device.importExternalTexture with the frame's NativeBuffer.

How do I pass a VisionCamera frame to WebGPU without copying?▼

Call Frame.getNativeBuffer(), create a video frame with RNWebGPU.createVideoFrameFromNativeBuffer, then import it via device.importExternalTexture with rotation and mirrored metadata. Release resources in reverse order and dispose the Frame last.

Why does my VisionCamera pipeline cause GPU synchronization stalls?▼

Stalls come from calling getPixelBuffer(), getPlanes(), or mapping GPU buffers, which force CPU visibility and downloads. Keep the path GPU-only with pixelFormat 'native' and read back only compact results asynchronously.

When should VisionCamera frame processing be asynchronous?▼

Use async only when optimized work still exceeds the frame interval, often around 50 ms or more, and stale results are acceptable. Bound in-flight work to one task or a small pool and never build an unbounded queue.

Does this skill cover basic VisionCamera setup and v4 migration?▼

No, this skill covers only real-time pipeline optimization and interop. Use the general react-native-vision-camera skill for setup, capture, controls, basic frame outputs, or v4 migration.

Related Skills

Explore More Software Engineering Skills→
CJHarmathCJHarmath

rn-native-features

Implement native iOS features in Expo React Native apps.

Community
Intermediate
proophboardproophboard
6

cody-automation

Construct automation rules for event-based reactions with dependencies and command triggers.

Official
Advanced
tjboudreauxtjboudreaux
6

eng-unity-mobile-optimization

Implement mobile-specific Unity optimizations for memory, battery, and thermal management.

Community
Advanced
Arupbiswas09Arupbiswas09

react-native-vision-camera

Capture images and videos with live preview in React Native apps.

Community
Advanced