VisionCamera v4 คู่มือ 2026

Q: ทำไม Frame Processor ของผมไม่ทำงาน?

สาเหตุที่พบบ่อยคือ (1) ลืมใส่ 'worklet' directive ที่ต้นฟังก์ชัน, (2) ลืมเพิ่ม react-native-worklets-core/plugin ใน babel.config.js, หรือ (3) เรียก JS function โดยตรงแทนที่จะใช้ runOnJS / Worklets.createRunOnJS ตรวจสอบทั้งสามจุดนี้ก่อนเสมอ

Q: เก็บภาพที่ถ่ายไว้ที่ไหนและจะอัปโหลดขึ้น server ได้อย่างไร?

takePhoto() return object ที่มี path เป็น local file URI (เช่น file:///var/mobile/.../photo.jpg ) สามารถใช้ fetch พร้อม FormData หรือไลบรารีเช่น react-native-blob-util เพื่ออัปโหลด ระวังลบไฟล์หลัง upload เสร็จ ไม่งั้น cache จะโตเรื่อย ๆ

อัปเดตล่าสุด: 3 สิงหาคม 2026

react-native-vision-camera v4 คือไลบรารีกล้องประสิทธิภาพสูงสำหรับ React Native ที่รองรับการถ่ายรูป, วิดีโอ 4K/8K, การสแกน QR/Barcode ด้วย MLKit, Frame Processors ที่รันบน worklet thread แยกจาก JS thread และการเชื่อมต่อโดยตรงกับ CameraX (Android) กับ AVCaptureSession (iOS) ผ่าน JSI ทำให้ประมวลผลเฟรมได้ 2–5ms ต่อเฟรม เหมาะกับแอปที่ต้องการควบคุมกล้องแบบ manual, ทำ AI/ML แบบเรียลไทม์ หรือฟีเจอร์ AR ที่ expo-camera ทำไม่ได้ ในบทความนี้จะสอนตั้งแต่ติดตั้งกับ Expo Dev Client ไปจนถึงการเขียน Frame Processor ของตัวเอง

VisionCamera v4 ใช้ JSI + Nitro Modules ทำให้ frame processing เร็วกว่า expo-camera 10–20 เท่า และรันบน worklet thread แยกจาก JS thread
ต้องรันบน Expo Dev Client หรือ Bare React Native เท่านั้น ไม่รองรับ Expo Go เพราะเป็น native module
Code Scanner API ใช้ MLKit ในตัวและรองรับ QR, EAN-13, Code-128, PDF-417 และ format อื่นอีก 10+ รูปแบบโดยไม่ต้องติดตั้ง plugin เพิ่ม
Frame Processors ต้องพึ่ง react-native-worklets-core (ตั้งแต่ v3) และต้องเพิ่ม Babel plugin ก่อนใช้งาน
Face Detection ใช้ผ่าน react-native-vision-camera-face-detector หรือรวมกับ Skia Frame Processor เพื่อวาดกรอบใบหน้าแบบเรียลไทม์
สำหรับ iOS ต้องเพิ่ม NSCameraUsageDescription และ NSMicrophoneUsageDescription ใน Info.plist มิฉะนั้นแอปจะ crash ทันทีที่เปิดกล้อง

VisionCamera v4 คืออะไร และทำงานอย่างไร

react-native-vision-camera เป็นไลบรารีกล้องที่พัฒนาโดยทีม Margelo เขียนด้วย C++/Objective-C/Kotlin และเชื่อมต่อกับ JavaScript ผ่าน JSI ทำให้ข้ามการเรียกผ่าน bridge แบบเดิม จุดต่างที่ทำให้ v4 เร็วกว่ารุ่นก่อนคือการย้ายไปใช้ Nitro Modules ซึ่งลด overhead ของ JSI call ลงเหลือระดับนาโนวินาที และรองรับ type-safe interface ระหว่าง JS กับ native

สถาปัตยกรรมภายในของ VisionCamera v4 แบ่งเป็น 3 layer ชัดเจน คือ (1) Camera Session ที่ห่อ AVCaptureSession และ CameraX ให้เรียกใช้งานเหมือนกันทั้งสองแพลตฟอร์ม (2) Frame Processor Runtime ซึ่งเป็น JS runtime แยกจาก React JS Runtime ที่ทำงานบน camera thread และ (3) Plugin API สำหรับเขียน native processor เอง เช่น MLKit, TensorFlow Lite หรือ OpenCV. ถ้าอยากเข้าใจรากฐานสถาปัตยกรรม React Native ยุคใหม่ที่ VisionCamera พึ่งพา ผมแนะนำให้อ่านคู่มือ React Native New Architecture ควบคู่ไปด้วย เพราะอธิบายเรื่อง JSI, Fabric และ TurboModules ค่อนข้างละเอียด

ในเชิงประสิทธิภาพ Margelo รายงานว่า Frame Processor สามารถรันได้เกิน 1,000 ครั้งต่อวินาที (โดยไม่รวมงาน native ที่เรียกภายใน) และประมวลผลเฟรมได้เร็วในระดับ 2–5ms ที่ 60 FPS ตัวเลขนี้ทำให้ VisionCamera กลายเป็นตัวเลือกเดียวสำหรับแอปประเภท AR, ML inference, real-time filter หรือ document scanner ที่ต้องการ throughput สูง โดยไม่ต้องแลกกับการ block UI thread

VisionCamera vs Expo Camera vs react-native-camera

ก่อนจะติดตั้งควรเข้าใจว่าแต่ละไลบรารีเหมาะกับ use case ที่ต่างกัน ตารางด้านล่างสรุปจุดต่างที่สำคัญที่สุด เพื่อช่วยตัดสินใจว่าโปรเจกต์ของคุณควรใช้ตัวไหน. เกณฑ์หลักที่ควรพิจารณาคือความต้องการเรื่อง Expo Go compatibility, ประสิทธิภาพในการประมวลผลเฟรม และการรองรับฟีเจอร์ระดับล่างของกล้อง

คุณสมบัติ	VisionCamera v4	expo-camera	react-native-camera (ยกเลิกแล้ว)
รองรับ Expo Go	ไม่ (ต้องใช้ Dev Client)	ใช่	ไม่
Frame Processors	ใช่ (worklets + JSI)	ไม่มี	ไม่มี
Code Scanner ในตัว	รองรับ 12+ format	รองรับ QR/Barcode พื้นฐาน	Deprecated
ควบคุม ISO, ชัตเตอร์, WB	ครบทุกอย่าง	ไม่รองรับ	รองรับบางส่วน
วิดีโอ 4K/8K + HDR	ใช่	สูงสุด 1080p	สูงสุด 1080p
รองรับ Web	ไม่	ใช่	ไม่
Multi-camera / depth sensor	ใช่	ไม่	ไม่
เวลาการตั้งค่า	15–30 นาที	2–5 นาที	ไม่แนะนำแล้ว
สถานะการบำรุงรักษา	Active (อัปเดตทุกเดือน)	Active (Expo SDK)	Archived

สรุปการตัดสินใจ เลือก expo-camera ถ้าโปรเจกต์ยังต้องรัน Expo Go, ต้องการ web support หรือใช้กล้องแค่ถ่ายรูป/สแกน QR แบบพื้นฐาน แต่ถ้าคุณกำลังทำแอปที่ต้องพึ่งกล้องเป็นฟีเจอร์หลัก เช่น scanner ระดับ enterprise, AR filter, virtual try-on, document capture หรือ real-time ML สิ่งที่ผมเลือกทุกครั้งคือ VisionCamera v4 เพราะปรับขยายได้ตามที่ต้องการโดยไม่ต้องเปลี่ยนไลบรารีทีหลัง นอกจากนี้ react-native-camera ตัวเก่าถูก archive ตั้งแต่ปี 2023 และไม่ควรเริ่มโปรเจกต์ใหม่ด้วยไลบรารีนี้อีกต่อไป

ติดตั้ง VisionCamera v4 บน Expo และ Bare RN

เนื่องจาก VisionCamera เป็น native module จึงติดตั้งใน Expo Go ไม่ได้ ต้องใช้ Expo Dev Client (แนะนำ) หรือ Bare React Native project. สำหรับผู้ที่ใช้ managed workflow ควรเรียก npx expo prebuild ก่อนเพื่อให้ Expo generate โฟลเดอร์ ios/android ให้ครบ ตัวอย่างคำสั่งติดตั้งบน Expo:

npx expo install react-native-vision-camera
npx expo install react-native-worklets-core
npx expo install react-native-reanimated
npx expo prebuild --clean

ต่อไปให้เพิ่ม config plugin ใน app.json เพื่อให้ VisionCamera ขอ permission ตอน build แบบอัตโนมัติ ถ้าลืมขั้นตอนนี้ Info.plist กับ AndroidManifest.xml จะไม่มี permission entry และแอปจะ crash ทันทีที่เปิดกล้อง (ผมเคยเจอเองตอน ship อัปเดตแรก ๆ เพราะไม่ทดสอบบน production build):

{
  "expo": {
    "plugins": [
      [
        "react-native-vision-camera",
        {
          "cameraPermissionText": "แอปต้องการเข้าถึงกล้องเพื่อถ่ายรูปและสแกน QR code",
          "enableMicrophonePermission": true,
          "microphonePermissionText": "แอปต้องการไมโครโฟนสำหรับบันทึกวิดีโอ",
          "enableCodeScanner": true
        }
      ]
    ]
  }
}

สุดท้ายเพิ่ม Babel plugin สำหรับ worklets ใน babel.config.js ให้แน่ใจว่าใส่ react-native-worklets-core/plugin เป็นตัวสุดท้ายเสมอ (Reanimated plugin ก็ต้องอยู่ท้ายเช่นกัน จำลำดับให้ถูก):

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      'react-native-worklets-core/plugin',
      'react-native-reanimated/plugin',
    ],
  };
};

ขอ Permissions และแสดง Camera Preview

VisionCamera v4 มี hook useCameraPermission() และ useMicrophonePermission() ที่ห่อ native permission API ไว้แล้ว ทำให้ขอสิทธิ์และ re-render UI ตามสถานะได้ง่าย. ตัวอย่างด้านล่างแสดงหน้าจอ preview พร้อมจัดการ 4 กรณีหลักคือ กำลังโหลด, ยังไม่ขอ, ถูกปฏิเสธ และอนุญาตแล้ว

import React, { useEffect } from 'react';
import { Text, View, Button, StyleSheet } from 'react-native';
import {
  Camera,
  useCameraDevice,
  useCameraPermission,
} from 'react-native-vision-camera';

export function CameraScreen() {
  const { hasPermission, requestPermission } = useCameraPermission();
  const device = useCameraDevice('back');

  useEffect(() => {
    if (!hasPermission) requestPermission();
  }, [hasPermission, requestPermission]);

  if (!hasPermission) {
    return (
      <View style={styles.center}>
        <Text>ต้องอนุญาตการเข้าถึงกล้องก่อน</Text>
        <Button title="ขออนุญาต" onPress={requestPermission} />
      </View>
    );
  }

  if (device == null) {
    return (
      <View style={styles.center}>
        <Text>ไม่พบกล้องด้านหลัง</Text>
      </View>
    );
  }

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      photo={true}
      video={true}
      audio={true}
    />
  );
}

const styles = StyleSheet.create({
  center: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

บนฝั่ง iOS ให้ตรวจสอบว่า Info.plist มี key NSCameraUsageDescription และ NSMicrophoneUsageDescription อยู่ (config plugin ด้านบนจะเติมให้เอง แต่ถ้าเป็น bare project ต้องเพิ่มด้วยตัวเอง). บน Android VisionCamera จะเพิ่ม android.permission.CAMERA ให้อัตโนมัติผ่าน merger ของ Gradle

อีกจุดที่นักพัฒนามือใหม่มักผิดพลาดคือลืมปิด isActive ตอน screen ไม่ active ทำให้กล้องทำงานต่อในพื้นหลังและเปลืองแบตเตอรี่มาก. ผมแนะนำให้ใช้ useIsFocused() จาก React Navigation ร่วมกับ AppState เพื่อควบคุมค่า isActive ให้เปิดเฉพาะตอนหน้าจอกำลังแสดงจริง

ถ่ายรูปและบันทึกวิดีโอด้วย useCameraDevice

การถ่ายรูปใน VisionCamera v4 ทำผ่าน ref ของ Camera component ใช้ method takePhoto() ซึ่ง return object ที่มี path, width, height, orientation และ metadata EXIF ครบชุด. สำหรับวิดีโอใช้ startRecording() และ stopRecording() ตามลำดับ ตัวอย่างเต็มของ shutter button:

import React, { useRef } from 'react';
import { Pressable, Text, StyleSheet } from 'react-native';
import { Camera } from 'react-native-vision-camera';

export function ShutterButton({ device }) {
  const camera = useRef<Camera>(null);

  const takePhoto = async () => {
    if (!camera.current) return;
    const photo = await camera.current.takePhoto({
      flash: 'auto',
      enableShutterSound: false,
    });
    console.log('ถ่ายรูปสำเร็จ:', photo.path);
    // photo.path เป็น local file URI พร้อมส่งไป upload หรือแสดงผล
  };

  return (
    <>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        photo={true}
      />
      <Pressable onPress={takePhoto} style={styles.button}>
        <Text>ถ่าย</Text>
      </Pressable>
    </>
  );
}

const styles = StyleSheet.create({
  button: {
    position: 'absolute',
    bottom: 40,
    alignSelf: 'center',
    width: 72,
    height: 72,
    borderRadius: 36,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center',
  },
});

สำหรับการบันทึกวิดีโอ VisionCamera v4 รองรับ codec H.264 และ H.265 (HEVC), การเลือก bitrate เอง และการเปิด HDR video บนอุปกรณ์ที่รองรับ ตัวอย่างการเริ่มและหยุดบันทึก:

const startRecording = () => {
  camera.current?.startRecording({
    fileType: 'mp4',
    videoCodec: 'h265',
    onRecordingFinished: (video) => {
      console.log('บันทึกเสร็จ:', video.path, video.duration);
    },
    onRecordingError: (error) => console.error(error),
  });
};

const stopRecording = async () => {
  await camera.current?.stopRecording();
};

หากต้องการ format ที่กำหนดเอง เช่น เลือก 4K 60fps โดยเฉพาะ ใช้ hook useCameraFormat() เพื่อ filter format list ตามความละเอียดและ frame rate ที่ต้องการ. ควรทดสอบบนเครื่องจริงหลายรุ่น เพราะ format ที่ใช้ได้ไม่เท่ากันระหว่าง iPhone SE กับ iPhone 17 Pro (ผมเจอเคสที่โค้ดชุดเดียวรันบนเครื่องหนึ่งได้ 4K60 แต่อีกเครื่องมีแค่ 4K30 อย่างเดียว)

สแกน QR Code และ Barcode ด้วย Code Scanner

ก่อนหน้านี้การสแกน QR ใน React Native ต้องพึ่ง plugin แยกอย่าง vision-camera-code-scanner แต่ตั้งแต่ v4 เป็นต้นมา VisionCamera มี Code Scanner API ในตัวที่ใช้ MLKit (Android) และ AVFoundation (iOS) โดยตรง ไม่ต้องติดตั้ง dependency เพิ่ม. API นี้เร็วกว่า plugin เก่ามาก เพราะรันบน native layer ทั้งหมด และไม่ต้องส่ง frame กลับไป JS

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

export function QRScannerScreen() {
  const device = useCameraDevice('back');
  const [scannedCode, setScannedCode] = useState<string | null>(null);

  const codeScanner = useCodeScanner({
    codeTypes: ['qr', 'ean-13', 'code-128', 'pdf-417'],
    onCodeScanned: (codes) => {
      const value = codes[0]?.value;
      if (value && value !== scannedCode) {
        setScannedCode(value);
        console.log('พบรหัส:', value, 'ประเภท:', codes[0].type);
      }
    },
  });

  if (device == null) return null;

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      codeScanner={codeScanner}
    />
  );
}

API รองรับ codeType ได้แก่ qr, aztec, data-matrix, pdf-417, ean-13, ean-8, code-128, code-39, code-93, codabar, itf, upc-a, และ upc-e ครอบคลุมมาตรฐาน barcode ที่ใช้จริงในธุรกิจค้าปลีก โลจิสติกส์ และการชำระเงินได้เกือบทั้งหมด

สำหรับกรณีต้องการ overlay กรอบ QR ที่ตำแหน่ง code ที่พบ ให้อ่านค่า codes[0].frame ที่มี x, y, width, height (สัมพันธ์กับขนาด preview) แล้ววาด View ทับที่ตำแหน่งนั้น. ระวังว่าค่า frame เป็น pixel coordinate ของ camera sensor ไม่ใช่ screen coordinate ต้องหารด้วย scale factor ก่อนใช้

Frame Processors: worklet ทำงานอย่างไร

Frame Processor คือ JS function ที่ถูกแปลงเป็น worklet โดย react-native-worklets-core แล้วรันบน camera thread แยกจาก JS main thread ทำให้ไม่ต้องข้าม bridge. เทคนิคเดียวกับที่ Reanimated ใช้สำหรับ animation แต่ VisionCamera มี VisionCamera JS-Runtime ของตัวเองเพื่อให้ปลอดภัยจาก race condition กับ UI thread

ตัวอย่างเบื้องต้นของ Frame Processor ที่ประมวลผลทุกเฟรม เช่น นับ FPS หรือส่ง frame ไปยัง native plugin:

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

export function FrameProcessorDemo() {
  const device = useCameraDevice('back');

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    // frame มี width, height, pixelFormat, timestamp
    // เรียก plugin เช่น examplePlugin(frame) จากที่นี่
    if (frame.timestamp % 30 === 0) {
      runOnJS(logFps)(frame.width, frame.height);
    }
  }, []);

  if (device == null) return null;
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
    />
  );
}

function logFps(w: number, h: number) {
  console.log(`เฟรมล่าสุด: ${w}x${h}`);
}

สังเกตคีย์เวิร์ด 'worklet' ที่ต้นฟังก์ชัน ตัวนี้บอกให้ Babel plugin แปลง function นี้เป็น worklet ที่รันบน VisionCamera runtime ได้. ถ้าลืมใส่ Frame Processor จะไม่ทำงานและแอปจะโยน error "Trying to run a non-worklet function on a worklet runtime"

Frame Processor เหมาะกับงานเช่น pose detection, text OCR, motion tracking หรือแม้แต่ streaming video ไปยัง WebRTC. หากอยากเจาะลึกเรื่อง worklet และ animation ผมแนะนำอ่านคู่มือ Reanimated 4 และ Worklets เพิ่ม เพราะอธิบายเรื่อง shared value และการเรียก runOnJS ค่อนข้างละเอียด

Face Detection แบบเรียลไทม์

การตรวจจับใบหน้าไม่ได้ ship มาใน VisionCamera core แต่ community มาตรฐานที่ใช้กันคือ react-native-vision-camera-face-detector ซึ่งเป็น Frame Processor Plugin ที่ห่อ MLKit Face Detection API ทั้งบน iOS และ Android. รองรับการตรวจจับหลายใบหน้าพร้อมกัน, contour (68 จุด), landmark (ตา, จมูก, ปาก), classification (ยิ้ม, ตาเปิด/ปิด) และ tracking ID

npm install react-native-vision-camera-face-detector

import { useFaceDetector } from 'react-native-vision-camera-face-detector';
import { useFrameProcessor, Camera, useCameraDevice } from 'react-native-vision-camera';
import { Worklets } from 'react-native-worklets-core';

export function FaceCamera() {
  const device = useCameraDevice('front');

  const { detectFaces } = useFaceDetector({
    performanceMode: 'fast',
    landmarkMode: 'all',
    classificationMode: 'all',
    contourMode: 'all',
    trackingEnabled: true,
  });

  const handleFaces = Worklets.createRunOnJS((faces) => {
    if (faces.length > 0) {
      console.log(`พบ ${faces.length} ใบหน้า, ยิ้ม: ${faces[0].smilingProbability}`);
    }
  });

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const faces = detectFaces(frame);
    handleFaces(faces);
  }, [detectFaces, handleFaces]);

  if (device == null) return null;
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
      pixelFormat="yuv"
    />
  );
}

สำหรับกรณีที่ต้องการ overlay กรอบใบหน้าแบบเรียลไทม์ (เช่น face filter, virtual try-on) ให้ใช้ Skia Frame Processor ร่วมกับ @shopify/react-native-skia เพื่อวาดโดยตรงบน preview canvas จะได้ประสิทธิภาพระดับ 60 FPS แม้บนเครื่อง Android รุ่นกลาง เพราะการวาดเกิดขึ้นบน GPU thread โดยไม่ผ่าน React reconciler

ถ้าโปรเจกต์ของคุณต้องการโมเดล ML แบบ custom (เช่น emotion detection, brand-specific object detection) ให้พิจารณา react-native-fast-tflite ซึ่งรัน TensorFlow Lite model โดยตรงภายใน worklet เหมาะกับกรณีที่ MLKit ไม่มี model ให้. โดยรวมแล้วสถาปัตยกรรม native plugin ของ VisionCamera สอดคล้องกับแนวทางการสร้าง Native Module ด้วย Nitro ที่กลายเป็นมาตรฐานใหม่ของ React Native ปี 2026

Best Practices และปัญหาที่พบบ่อย

จากประสบการณ์ที่ผมชิพแอปที่ใช้ VisionCamera บน production หลายตัว มีข้อพลาดซ้ำ ๆ ที่ทีมส่วนใหญ่พลาดตอนเริ่มต้น. สามข้อแรกที่พบบ่อยที่สุดคือลืมจัดการ lifecycle ของกล้อง, ใช้ pixelFormat ผิดกับ Frame Processor และไม่ optimize memory เวลาถ่ายวิดีโอต่อเนื่อง

จัดการ lifecycle ให้ถูกต้อง

ปิด isActive ทุกครั้งที่หน้าจอไม่ active. แนะนำใช้ useIsFocused จาก React Navigation ร่วมกับ AppState เพราะ VisionCamera จะเปิด CameraX/AVCaptureSession ทันทีที่ mount ถ้าไม่ปิดจะเปลืองแบตและทำให้ระบบปฏิบัติการหมายว่าแอปใช้กล้องจน user เห็น indicator สีเขียวค้าง

เลือก pixelFormat ให้ตรงกับ plugin

MLKit ต้องการ yuv, ส่วน TensorFlow Lite ส่วนใหญ่ต้องการ rgb. ถ้าเลือกผิด plugin จะทำงานช้าลงหลายเท่า หรือ crash เพราะ conversion overhead

ล็อก orientation เมื่อบันทึกวิดีโอ

ถ้าไม่กำหนด orientation prop วิดีโอที่ได้จะหมุนตามการหมุนของอุปกรณ์ระหว่างการอัด ทำให้ตัดต่อภายหลังยาก แนะนำล็อกเป็น 'portrait' หรือ 'landscape-right' ตาม UX ของแอป

ทดสอบบนเครื่องจริงเสมอ

Simulator/Emulator ส่วนใหญ่ไม่มีกล้อง โดยเฉพาะ Android Emulator ที่ให้ virtual camera ที่ไม่ให้ FPS จริงและไม่รองรับ Code Scanner. คุณต้องมีอุปกรณ์อย่างน้อย iOS และ Android ในการ QA ก่อน ship

ระวัง memory leak จาก recording ยาว

บันทึกวิดีโอเกิน 5 นาทีอาจทำให้ RAM ใช้เกิน 500MB ตั้ง maxDuration หรือแบ่งไฟล์เป็น chunk เล็ก ๆ จะปลอดภัยกว่า. อ่านรายละเอียดเพิ่มเติมได้ที่ VisionCamera repository บน GitHub ในส่วน issue tracker

คำถามที่พบบ่อย

VisionCamera ใช้งานกับ Expo Go ได้ไหม?

ไม่ได้ VisionCamera เป็น native module จึงไม่ทำงานใน Expo Go ต้องสร้าง Expo Dev Client ผ่าน EAS Build หรือรัน npx expo prebuild เพื่อ generate native project ก่อน จากนั้นติดตั้งลงเครื่องจริงเพื่อทดสอบ

ควรเลือก VisionCamera หรือ expo-camera สำหรับสแกน QR?

สำหรับ QR scanning แบบง่าย ๆ expo-camera พอ แต่ถ้าต้องสแกน barcode รูปแบบพิเศษ (เช่น PDF-417, Data Matrix) ต้องการความเร็วสูงหรือทำงานร่วมกับ ML แนะนำ VisionCamera v4 เพราะรองรับ 12+ code type ในตัวและใช้ MLKit ที่เร็วกว่า

Frame Processor รันได้กี่ครั้งต่อวินาที?

ตามที่ Margelo รายงาน Frame Processor รันได้เกิน 1,000 ครั้งต่อวินาทีสำหรับ operation ที่เบา แต่ throughput จริงขึ้นอยู่กับความหนักของ plugin ที่เรียก งาน MLKit Face Detection ปกติวิ่งที่ 30–60 FPS บนเครื่อง flagship

ทำไม Frame Processor ของผมไม่ทำงาน?

สาเหตุที่พบบ่อยคือ (1) ลืมใส่ 'worklet' directive ที่ต้นฟังก์ชัน, (2) ลืมเพิ่ม react-native-worklets-core/plugin ใน babel.config.js, หรือ (3) เรียก JS function โดยตรงแทนที่จะใช้ runOnJS/Worklets.createRunOnJS ตรวจสอบทั้งสามจุดนี้ก่อนเสมอ

VisionCamera รองรับ React Native New Architecture หรือไม่?

รองรับเต็มตัว v4 ใช้ Nitro Modules ซึ่งออกแบบมาสำหรับ New Architecture โดยเฉพาะ และทำงานร่วมกับ Fabric renderer, TurboModules และ Hermes engine ได้โดยไม่ต้องตั้งค่าเพิ่ม

เก็บภาพที่ถ่ายไว้ที่ไหนและจะอัปโหลดขึ้น server ได้อย่างไร?

takePhoto() return object ที่มี path เป็น local file URI (เช่น file:///var/mobile/.../photo.jpg) สามารถใช้ fetch พร้อม FormData หรือไลบรารีเช่น react-native-blob-util เพื่ออัปโหลด ระวังลบไฟล์หลัง upload เสร็จ ไม่งั้น cache จะโตเรื่อย ๆ