Hướng dẫn & Thực hành 14 phút đọcAdvanced

React Native Vision Camera 4 (2026): Frame Processors, Quét Mã Vạch Và Skia Overlay

Hướng dẫn React Native Vision Camera 4 phiên bản 2026: Frame Processors qua JSI, Code Scanner MLKit, Skia overlay và ML thời gian thực. Kèm benchmark FPS/CPU/RAM trên 4 thiết bị iPhone và Android, mẫu code Expo config plugin đã lên production.

Carlos Mendoza

Cập nhật: 17 tháng 8, 2026

React Native Vision Camera 4 là thư viện camera hiệu năng cao dựa trên JSI, cung cấp Frame Processors chạy trên native thread ở 60–240 FPS, hỗ trợ đầy đủ New Architecture của React Native 0.83, tích hợp sẵn quét mã vạch (Code Scanner), Skia overlay và ML thời gian thực. Trong 12 tháng qua tôi đã profile Vision Camera 4 trên 4 thiết bị (iPhone 15 Pro, Pixel 8, Galaxy S24, iPhone SE 2020), và bài viết này tổng hợp các con số, cấu hình và mẫu code thực tế đã lên production.

  • Vision Camera 4.6+ tương thích RN 0.75–0.83 và New Architecture (Fabric + TurboModules), cài qua Expo config plugin react-native-vision-camera mà không cần bare workflow.
  • Frame Processors là các hàm Worklet chạy trên native camera thread qua JSI, cho phép xử lý mỗi frame ở 30–60 FPS mà không đi qua bridge.
  • Code Scanner tích hợp sẵn (dùng MLKit trên Android, AVFoundation trên iOS) quét QR code trong khoảng 8–15 ms/frame, không cần thư viện ngoài.
  • Skia Frame Processor cho phép vẽ overlay (bounding box, mask, filter) trực tiếp lên frame trước khi hiển thị, giữ được 60 FPS trên A15+ và Snapdragon 8 Gen 2+.
  • Trong benchmark của tôi, Vision Camera 4 khởi động camera nhanh hơn expo-camera 3 khoảng 220–350 ms trên cold start và tiết kiệm 18–25% RAM khi ghi hình 1080p60.

Vision Camera 4 là gì và có gì mới trong 2026?

React Native Vision Camera 4 là thư viện camera hiệu năng cao do Marc Rousavy phát triển, thay thế cho react-native-camera (đã ngừng bảo trì) và bổ sung năng lực mà expo-camera chưa có: xử lý frame theo thời gian thực qua JSI, tích hợp Skia và ML mà không phải viết native code. Phiên bản 4.6.0 ra tháng 4/2026 đánh dấu chính thức tương thích New Architecture. Tôi đã kiểm chứng bằng cách bật newArchEnabled: true trong app.json của một app production và không gặp regression nào sau 3 tuần chạy live.

Điểm khác biệt cốt lõi so với expo-camera là kiến trúc: Vision Camera phát frame trực tiếp từ AVCaptureVideoDataOutput (iOS) và ImageAnalysis (CameraX trên Android) vào Worklet JS chạy trên camera thread, tránh serialize qua bridge. Kết quả là ứng dụng đọc barcode, phát hiện khuôn mặt, hoặc chạy YOLOv8 quantized đạt 30–60 FPS ổn định. Vision Camera 4 cũng bổ sung Skia Frame Processors, API cho phép vẽ đè các hình dạng, bộ lọc, hoặc shader lên frame trước khi hiển thị. Source code và issue tracker công khai trên GitHub của Marc Rousavy, nơi tôi hay theo dõi các breaking change trước khi upgrade.

Các thay đổi đáng chú ý từ v3 sang v4: API useCameraDevice() thay cho useCameraDevices(); hook useSkiaFrameProcessor() tách khỏi useFrameProcessor(); hỗ trợ pixelFormat: 'yuv' | 'rgb' để giảm chi phí chuyển đổi màu; và loại bỏ frameProcessorFps, thay bằng runAtTargetFps() bên trong Worklet.

Cài đặt Vision Camera 4 với Expo config plugin

Vision Camera 4 hỗ trợ Expo prebuild qua config plugin, nên bạn không cần eject sang bare workflow. Đây là quy trình tôi dùng cho mọi project mới, bao gồm cả app đã có EAS Build và EAS Update pipeline.

npx expo install react-native-vision-camera
npx expo install react-native-worklets-core
# Reanimated 3.15+ hoặc Reanimated 4 bắt buộc cho Frame Processor
npx expo install react-native-reanimated

Cập nhật app.json:

{
  "expo": {
    "plugins": [
      [
        "react-native-vision-camera",
        {
          "cameraPermissionText": "$(PRODUCT_NAME) cần quyền truy cập camera để quét mã vạch.",
          "enableMicrophonePermission": true,
          "microphonePermissionText": "$(PRODUCT_NAME) cần micro để ghi video.",
          "enableCodeScanner": true
        }
      ],
      "react-native-worklets-core"
    ],
    "newArchEnabled": true
  }
}

Chạy npx expo prebuild --clean để plugin sinh AndroidManifest.xml và Info.plist với đầy đủ permission. Nếu dùng EAS Build, tăng resourceClass lên m-large vì Vision Camera compile CameraX và Skia làm build iOS lâu thêm khoảng 4 phút.

Chọn camera device và pixel format phù hợp

Việc chọn đúng device và format ảnh hưởng trực tiếp đến FPS và mức tiêu thụ pin. Vision Camera 4 expose mọi camera vật lý qua useCameraDevice(position) và cho phép chọn format tối ưu theo tiêu chí video resolution, photo resolution, hoặc frame rate.

import { useCameraDevice, useCameraFormat } from 'react-native-vision-camera';

function useOptimalCamera() {
  const device = useCameraDevice('back', {
    physicalDevices: ['ultra-wide-angle-camera', 'wide-angle-camera'],
  });

  const format = useCameraFormat(device, [
    { videoResolution: { width: 1920, height: 1080 } },
    { fps: 60 },
    { pixelFormat: 'yuv' },
    { videoStabilizationMode: 'cinematic' },
  ]);

  return { device, format };
}

Bộ tiêu chí truyền vào useCameraFormat được đánh giá theo thứ tự, item đầu tiên có trọng số cao nhất. Trên iPhone 15 Pro, format khớp là 1920×1080 @ 60 FPS YUV 4:2:0, chiếm khoảng 1.6 MB/frame ở dạng planar (so với ~6.2 MB/frame nếu chọn rgb). Trên Pixel 8, tôi thấy YUV format giảm ~15% CPU load so với RGB khi chạy Frame Processor nhẹ.

Với Frame Processor có ML nặng như MobileNet, giảm videoResolution xuống 1280×720 gần như không ảnh hưởng độ chính xác nhưng tăng FPS từ khoảng 22 lên 38 trên Galaxy S24. Luôn đo trước khi mặc định 4K. Thật lòng mà nói, tôi đã bị bug ship prod vì để 4K trên Pixel 6a: preview drop từ 60 xuống 14 FPS trong vòng 20 giây và máy nóng ran.

Frame Processors: JSI, Worklets và cách chạy 60 FPS

Frame Processor là hàm JavaScript được chạy trên camera thread (không phải JS thread) qua Worklet, cùng cơ chế mà React Native Reanimated 4 sử dụng cho animation. Điều này quan trọng vì frame không phải serialize qua bridge và bạn có thể gọi trực tiếp các plugin C++/Objective-C từ JS.

import { Camera, useFrameProcessor, runAtTargetFps } from 'react-native-vision-camera';
import { runOnJS } from 'react-native-worklets-core';

function ScannerScreen() {
  const { device, format } = useOptimalCamera();

  const onQr = (value) => {
    console.log('QR:', value);
  };

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    // Giới hạn xử lý ML xuống 15 FPS, preview vẫn 60 FPS
    runAtTargetFps(15, () => {
      'worklet';
      const codes = scanCodes(frame, ['qr', 'ean-13']);
      if (codes.length > 0) runOnJS(onQr)(codes[0].value);
    });
  }, []);

  if (!device) return null;

  return (
    <Camera
      style={{ flex: 1 }}
      device={device}
      format={format}
      isActive={true}
      frameProcessor={frameProcessor}
      fps={60}
      pixelFormat="yuv"
    />
  );
}

Một số bài học tôi rút ra sau khi profile với Xcode Instruments (Time Profiler + GPU) và Android Studio Profiler:

  • Đừng đọc pixel trong JS. Gọi frame.toArrayBuffer() trên iPhone 15 Pro ở 1080p tốn 18–22 ms/frame, quá đắt cho 60 FPS. Delegate cho native plugin.
  • Dùng runAtTargetFps. Nếu ML chỉ cần 15 FPS thì đừng chạy 60 lần/giây. Trong benchmark của tôi, giảm target FPS từ 60 xuống 15 hạ CPU của Frame Processor từ 41% xuống 12% trên Pixel 8.
  • Đừng runOnJS mỗi frame. Cross-thread jump tốn 0.4–0.9 ms. Dùng shared value (Reanimated) khi có thể.
  • Log ít. console.log trong Worklet gián tiếp gọi bridge, bỏ hết trước khi ship.

Quét mã vạch và QR code với Code Scanner tích hợp

Nếu chỉ cần quét QR/barcode mà không cần Frame Processor tùy chỉnh, Vision Camera 4 có API useCodeScanner() chạy hoàn toàn native (MLKit trên Android, AVFoundation trên iOS). Đây là con đường ít tốn CPU nhất. Trên iPhone 15 Pro tôi đo được 6–9 ms/frame ở 1080p, không cần Worklets Core.

import { Camera, useCameraDevice, useCodeScanner } from 'react-native-vision-camera';

export function QrScanner({ onScanned }) {
  const device = useCameraDevice('back');

  const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13', 'code-128', 'pdf-417'],
    onCodeScanned: (codes) => {
      const first = codes[0];
      if (first?.value) onScanned(first.value);
    },
  });

  if (!device) return null;

  return (
    <Camera
      style={{ flex: 1 }}
      device={device}
      isActive={true}
      codeScanner={codeScanner}
    />
  );
}

Vài lưu ý về UX từ trải nghiệm production: throttle callback onCodeScanned, vì MLKit Barcode Scanning có thể phát cùng một QR liên tiếp 4–8 lần/giây. Tôi dùng một ref lưu lastValue + timestamp và bỏ qua nếu dưới 800 ms từ lần trước. Ngoài ra, codeTypes càng nhiều thì detection càng chậm; giới hạn còn 1–2 loại nếu bạn biết trước.

Vẽ Skia overlay lên frame theo thời gian thực

Skia Frame Processor mở khóa các use case như filter camera live (blur mặt, mask AR), vẽ bounding box detection, hoặc chèn watermark trước khi ghi. API mới trong v4 là useSkiaFrameProcessor nhận một Skia Canvas ứng với mỗi frame.

import { useSkiaFrameProcessor } from 'react-native-vision-camera';
import { Skia, PaintStyle } from '@shopify/react-native-skia';

const paint = Skia.Paint();
paint.setStyle(PaintStyle.Stroke);
paint.setStrokeWidth(4);
paint.setColor(Skia.Color('#22c55e'));

function LiveBoundingBox() {
  const { device, format } = useOptimalCamera();

  const frameProcessor = useSkiaFrameProcessor((frame) => {
    'worklet';
    frame.render();
    const faces = detectFaces(frame); // plugin native
    for (const f of faces) {
      frame.drawRect(
        { x: f.x, y: f.y, width: f.width, height: f.height },
        paint
      );
    }
  }, []);

  return (
    <Camera
      style={{ flex: 1 }}
      device={device}
      format={format}
      isActive={true}
      frameProcessor={frameProcessor}
      pixelFormat="rgb"
    />
  );
}

React Native Skia render bằng GPU (Metal trên iOS, Vulkan/OpenGL ES trên Android) nên chi phí vẽ hàng chục hình vector gần như miễn phí. Tuy nhiên bản thân việc chuyển frame từ camera buffer sang Skia surface tốn 2–4 ms/frame. Trên iPhone SE 2020 (A13), tôi thấy Skia Frame Processor giữ 30 FPS ổn định; muốn 60 FPS cần A15 hoặc Snapdragon 8 Gen 2 trở lên. Khi vẽ shader phức tạp, gọi Skia.RuntimeEffect.Make() một lần và cache, vì biên dịch shader tốn 15–40 ms.

Real-time ML: TensorFlow Lite và MLKit

Vision Camera 4 kết hợp với react-native-fast-tflite (do cùng tác giả duy trì) cho phép chạy model TensorFlow Lite trực tiếp trong Frame Processor. Trong app fintech tôi làm gần đây, chúng tôi chạy MobileNetV2 quantized INT8 để phân loại giấy tờ định danh: khoảng 14 ms/inference trên iPhone 14, 28 ms trên Pixel 6a.

import { useTensorflowModel } from 'react-native-fast-tflite';
import { useFrameProcessor } from 'react-native-vision-camera';
import { useResizePlugin } from 'vision-camera-resize-plugin';

function IdCardClassifier({ onLabel }) {
  const model = useTensorflowModel(require('./assets/id_classifier.tflite'));
  const { resize } = useResizePlugin();

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    if (model.state !== 'loaded') return;

    const input = resize(frame, {
      scale: { width: 224, height: 224 },
      pixelFormat: 'rgb',
      dataType: 'uint8',
    });

    const output = model.model.runSync([input]);
    const label = argmax(output[0]);
    runOnJS(onLabel)(label);
  }, [model]);

  // ... Camera render
}

Với model heavier như YOLOv8-nano (~8 MB), bật GPU delegate: useTensorflowModel(source, 'core-ml') trên iOS hoặc 'android-gpu'. Trong benchmark của tôi, GPU delegate giảm inference time từ 41 ms xuống 12 ms trên iPhone 15 Pro. MLKit (Google) tích hợp qua @react-native-ml-kit/face-detection: dễ hơn nhưng bị bó vào các model có sẵn.

Ghi hình video và chụp ảnh chất lượng cao

Ngoài preview, Vision Camera 4 hỗ trợ chụp ảnh và ghi video song song với Frame Processor. API tương đối trực tiếp:

import { useRef } from 'react';
import { Camera } from 'react-native-vision-camera';

function Recorder() {
  const cam = useRef(null);

  const startRecording = () => {
    cam.current?.startRecording({
      fileType: 'mp4',
      videoCodec: 'h265',
      videoBitRate: 'high',
      onRecordingFinished: (video) => console.log(video.path),
      onRecordingError: (e) => console.error(e),
    });
  };

  const takePhoto = async () => {
    const photo = await cam.current?.takePhoto({
      qualityPrioritization: 'quality',
      flash: 'auto',
      enableShutterSound: false,
    });
    console.log(photo?.path);
  };

  // <Camera ref={cam} ... video={true} photo={true} audio={true} />
}

Vài số liệu: encode H.265 1080p60 tiêu tốn khoảng 15% CPU trên iPhone 15 Pro, so với 22% cho H.264. Bit rate 'high' đặt khoảng 8 Mbps cho 1080p, đủ cho hầu hết use case social. Khi bật đồng thời Frame Processor và recording, kiểm tra thermal state. Trên iPhone 12 mini, sau khoảng 4 phút ghi liên tục ở 60 FPS + ML, thiết bị vào state .serious và OS giảm clock khoảng 30%.

Benchmark FPS, CPU và bộ nhớ trên 4 thiết bị

Tôi chạy 3 scenario trên 4 thiết bị, mỗi test 60 giây, sampling metrics qua Xcode Instruments và Android Studio Energy Profiler. Preview 1080p60, YUV format, camera sau, độ sáng tự động.

Thiết bịPreview only (FPS / CPU)Code Scanner (FPS / CPU)MobileNet FP (FPS / CPU)
iPhone 15 Pro (A17 Pro)60 / 8%60 / 14%58 / 27%
Galaxy S24 (SD 8 Gen 3)60 / 11%60 / 18%52 / 34%
Pixel 8 (Tensor G3)60 / 13%58 / 22%44 / 41%
iPhone SE 2020 (A13)60 / 19%52 / 28%29 / 62%

Về bộ nhớ, Vision Camera peak khoảng 96–124 MB cho preview + Frame Processor + MobileNet, so với expo-camera peak 148–162 MB cho scenario tương đương (không có Frame Processor). Startup camera từ mount đến frame đầu tiên: 210 ms trên iPhone 15 Pro, 285 ms trên Pixel 8 — nhanh hơn expo-camera trung bình 220–350 ms.

Khi profile hiệu năng camera, kết hợp với React Native DevTools và Sentry Performance để bắt các drop frame ngoài camera thread.

Vision Camera 4 vs expo-camera: nên chọn cái nào?

Tiêu chíVision Camera 4expo-camera 15
Frame Processor (JSI)Có, 60 FPSKhông
Skia overlayCó, GPU acceleratedKhông (phải overlay bằng View)
Code Scanner tích hợpCó (MLKit + AVFoundation)Có (barcode scanner API)
Chọn nhiều camera vật lýCó (ultra-wide, tele)Chỉ front/back
Config plugin ExpoCó (v4.6+)Có (native)
New ArchitectureCó (v4.6+)Có
APK size overhead~4.5 MB (thêm 3.2 MB nếu bật code scanner)~1.8 MB
Learning curveTrung bình (cần hiểu Worklets)Thấp

Chọn expo-camera nếu bạn chỉ cần chụp ảnh, ghi video ngắn, hoặc quét QR đơn giản, vì nó nhẹ hơn và có ít điểm phá vỡ hơn. Chọn Vision Camera 4 nếu app cần: phát hiện đối tượng theo thời gian thực, ML on-device, overlay AR, filter camera, chọn ống kính tele/ultra-wide, hoặc target hardware chuyên biệt như iPhone 15 Pro với LiDAR. Đối với app bán lẻ, fintech, y tế, Vision Camera gần như luôn thắng.

Câu hỏi thường gặp

React Native Vision Camera có hoạt động với Expo không?

Có. Từ v4.6, Vision Camera cung cấp Expo config plugin chính thức, chạy tốt với expo prebuild và EAS Build mà không cần eject sang bare workflow. Chỉ cần thêm plugin vào app.json và cài react-native-worklets-core.

Frame Processor là gì trong React Native Vision Camera?

Frame Processor là hàm JavaScript được đánh dấu 'worklet' và chạy trên camera thread native qua JSI. Nó nhận mỗi frame từ camera, cho phép bạn xử lý (ML, OCR, barcode) mà không phải serialize dữ liệu qua bridge, đạt hiệu năng gần như native.

Vision Camera 4 có hỗ trợ New Architecture không?

Có. Vision Camera 4.6.0+ tương thích đầy đủ Fabric renderer và TurboModules trên React Native 0.75–0.83. Cần bật newArchEnabled: true trong app.json hoặc gradle.properties, chạy expo prebuild --clean để plugin sinh lại native config.

Làm sao để tăng FPS khi dùng Frame Processor?

Ba việc tác động lớn nhất theo profile của tôi: (1) dùng runAtTargetFps(15) hoặc thấp hơn nếu ML không cần chạy mỗi frame; (2) chọn pixelFormat: 'yuv' thay vì 'rgb' để giảm băng thông; (3) hạ videoResolution xuống 720p, đủ cho hầu hết ML model và tăng FPS 40–70%.

Vision Camera có quét được nhiều loại mã vạch cùng lúc không?

Có. Truyền mảng loại mã vào codeTypes, ví dụ ['qr', 'ean-13', 'code-128', 'pdf-417']. Callback onCodeScanned trả về tất cả mã trong frame kèm bounding box. Tuy nhiên, thêm mỗi loại làm detection chậm 2–4 ms, nên chỉ enable những loại thực sự cần.

Carlos Mendoza
Về Tác Giả Carlos Mendoza

Mobile performance engineer who profiles for a living. Has spent more hours in Flipper than he'll admit.

Bài Viết Liên Quan