React Native Academy · บทเรียน

การเข้าถึงกล้องด้วย expo-camera

ขอสิทธิ์ใช้กล้อง แสดงคอมโพเนนต์ Camera พร้อมปุ่มชัตเตอร์ ถ่ายภาพ และแสดง URI ของภาพที่ถ่ายในคอมโพเนนต์ Image

บทเรียน 1 จาก 413 ขั้นตอน

การเข้าถึงกล้องด้วย expo-camera เป็นบทเรียน React Native Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน React Native Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส React Native Academy มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Why Use expo-camera?

expo-camera provides a React Native component that renders a live camera preview and lets users capture photos and videos. It works in both iOS and Android and integrates cleanly with Expo's managed workflow. Using expo-camera you can build features like profile photo capture, document scanning, QR code reading, and real-time image capture without writing any native code.

Installing expo-camera

Install expo-camera with the Expo install command so Expo picks the SDK-compatible version. After installation, expo-camera's native modules are linked automatically in an Expo managed project. In a bare workflow project you must also run pod install for iOS after installing.

npx expo install expo-camera

Requesting Camera Permission

ก่อนแสดงกล้อง คุณต้องขอสิทธิ์จากผู้ใช้ก่อน โดยใช้ Camera.requestCameraPermissionsAsync() และตรวจสอบฟิลด์ status ที่ส่งกลับมา หากสถานะไม่ใช่ 'granted' จะไม่สามารถแสดงกล้องได้ ควรขอสิทธิ์เพื่อตอบสนองต่อการกระทำของผู้ใช้เสมอ เช่น การแตะปุ่ม เพื่อให้กล่องโต้ตอบขอสิทธิ์ของระบบปฏิบัติการปรากฏในจังหวะที่เหมาะสม

import { Camera } from 'expo-camera';

const [permission, requestPermission] = Camera.useCameraPermissions();

if (!permission) {
  return <ActivityIndicator />;
}

if (!permission.granted) {
  return (
    <View>
      <Text>Camera access is required to take photos.</Text>
      <Button title='Grant Permission' onPress={requestPermission} />
    </View>
  );
}

การเรนเดอร์คอมโพเนนต์กล้อง

เมื่อได้รับสิทธิ์แล้ว ให้เรนเดอร์คอมโพเนนต์ CameraView จาก expo-camera โดยกำหนด style ที่มีขนาดชัดเจน คอมโพเนนต์จะไม่แสดงผลหากไม่มีขนาด พื้นที่พรีวิวกล้องจะเติมเต็มพื้นที่ที่จัดสรรไว้ ใช้ facing เพื่อกำหนดเลนส์เริ่มต้น โดยใช้ 'back' สำหรับกล้องหลัง หรือ 'front' สำหรับกล้องเซลฟี

import { CameraView } from 'expo-camera';
import { StyleSheet } from 'react-native';

export default function CameraScreen() {
  const [permission, requestPermission] = Camera.useCameraPermissions();
  const cameraRef = React.useRef(null);

  if (!permission?.granted) return <PermissionPrompt onPress={requestPermission} />;

  return (
    <View style={styles.container}>
      <CameraView style={styles.camera} facing='back' ref={cameraRef} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
  camera: { flex: 1 },
});

การถ่ายภาพ

ผูก ref เข้ากับคอมโพเนนต์ CameraView แล้วเรียก ref.current.takePictureAsync() เพื่อถ่ายภาพ ฟังก์ชันนี้จะส่งคืนออบเจ็กต์ CameraCapturedPicture ที่มีพร็อพเพอร์ตี uri ซึ่งชี้ไปยังรูปภาพที่ถ่ายไว้ในระบบไฟล์ชั่วคราวของอุปกรณ์ ให้แสดงรูปภาพที่ถ่ายโดยใช้คอมโพเนนต์ Image ของ React Native

const [photo, setPhoto] = React.useState(null);

async function takePicture() {
  if (cameraRef.current) {
    const captured = await cameraRef.current.takePictureAsync({
      quality: 0.8,     // 0 to 1, lower = smaller file
      base64: false,    // true to include base64 string in result
    });
    setPhoto(captured.uri);
  }
}

การแสดงรูปภาพที่ถ่าย

เมื่อได้ URI ของรูปภาพแล้ว ให้เปลี่ยนการแสดงผลจากพรีวิวกล้องเป็นคอมโพเนนต์ Image ที่แสดงรูปภาพที่ถ่ายไว้ เพิ่มปุ่ม 'ถ่ายใหม่' และ 'ใช้รูปภาพ' เพื่อให้ผู้ใช้ยืนยันหรือละทิ้งรูปภาพ รูปแบบการพรีวิวก่อนยืนยันนี้เป็นมาตรฐานของแอปกล้อง และช่วยป้องกันการใช้รูปภาพที่ถ่ายพลาดโดยไม่ตั้งใจ

if (photo) {
  return (
    <View style={styles.container}>
      <Image source={{ uri: photo }} style={styles.camera} />
      <View style={styles.buttonRow}>
        <Button title='Retake' onPress={() => setPhoto(null)} />
        <Button title='Use Photo' onPress={() => onPhotoSelected(photo)} />
      </View>
    </View>
  );
}

การสลับระหว่างกล้องหน้าและกล้องหลัง

อนุญาตให้ผู้ใช้สลับระหว่างกล้องหน้าและกล้องหลังด้วยการสลับค่าตัวแปรสถานะ ส่งค่าสถานะไปยังพร็อพ facing ของ CameraView React Native จะจัดการสลับกล้องโดยอัตโนมัติเมื่อพร็อพมีการเปลี่ยนแปลง เพิ่มปุ่มพลิกกล้องในโอเวอร์เลย์ของ UI เพื่อให้ผู้ใช้เข้าใจและใช้งานได้ง่าย

const [facing, setFacing] = React.useState<'back' | 'front'>('back');

function toggleCamera() {
  setFacing((current) => (current === 'back' ? 'front' : 'back'));
}

<CameraView style={styles.camera} facing={facing} ref={cameraRef}>
  <TouchableOpacity onPress={toggleCamera} style={styles.flipButton}>
    <Ionicons name='camera-reverse' size={32} color='white' />
  </TouchableOpacity>
  <TouchableOpacity onPress={takePicture} style={styles.shutterButton} />
</CameraView>

การสแกน QR Code

CameraView ยังรองรับการ สแกนบาร์โค้ด รวมถึง QR Code ด้วย กำหนดพร็อพ onBarcodeScanned ให้เป็นฟังก์ชันเรียกกลับ ฟังก์ชันเรียกกลับจะทำงานพร้อมออบเจ็กต์ผลลัพธ์ที่มี type และ data ของบาร์โค้ด (สตริงที่ถอดรหัสแล้ว) ให้หยุดการสแกนหลังจากได้ผลลัพธ์แรก เพื่อป้องกันการจัดการโค้ดเดิมซ้ำหลายครั้ง

const [scanned, setScanned] = React.useState(false);

function handleBarcodeScan({ type, data }) {
  if (!scanned) {
    setScanned(true);
    Alert.alert('Scanned!', 'Type: ' + type + '\nData: ' + data, [
      { text: 'Scan Again', onPress: () => setScanned(false) },
    ]);
  }
}

<CameraView
  style={styles.camera}
  onBarcodeScanned={scanned ? undefined : handleBarcodeScan}
  barcodeScannerSettings={{ barcodeTypes: ['qr', 'ean13'] }}
/>

การปรับคุณภาพกล้อง

พร็อพ pictureSize ช่วยให้คุณควบคุมความละเอียดของรูปภาพที่ถ่ายได้ ใช้ Camera.getAvailablePictureSizesAsync เพื่อสอบถามขนาดที่อุปกรณ์รองรับและให้ผู้ใช้เลือก รูปภาพที่มีความละเอียดสูงจะมีคุณภาพดีกว่า แต่จะสร้างไฟล์ขนาดใหญ่กว่า สำหรับรูปโปรไฟล์ของผู้ใช้ ความละเอียดปานกลาง (ประมาณ 1080p) มักเป็นจุดสมดุลที่เหมาะสม

const photo = await cameraRef.current.takePictureAsync({
  quality: 0.7,
  exif: false,      // skip EXIF metadata to reduce file size
  skipProcessing: true, // faster capture on Android
});
console.log('Photo size:', photo.width, 'x', photo.height);

การบันทึกลงคลังสื่อ

uri ของรูปภาพที่ถ่ายจะชี้ไปยังตำแหน่งชั่วคราว หากต้องการบันทึกรูปภาพนั้นอย่างถาวรลงในคลังรูปภาพของอุปกรณ์ ให้ใช้ expo-media-library เรียก MediaLibrary.saveToLibraryAsync(photo.uri) หลังจากถ่ายภาพแล้ว โปรดจำไว้ว่าต้องขอสิทธิ์ MediaLibrary แยกต่างหาก นอกเหนือจากสิทธิ์ใช้งานกล้อง

import * as MediaLibrary from 'expo-media-library';

async function savePhoto(uri: string) {
  const { status } = await MediaLibrary.requestPermissionsAsync();
  if (status === 'granted') {
    await MediaLibrary.saveToLibraryAsync(uri);
    Alert.alert('Saved!', 'Photo saved to your gallery.');
  }
}

เคล็ดลับ UI โอเวอร์เลย์ของกล้อง

คอมโพเนนต์ CameraView สามารถเรนเดอร์คอมโพเนนต์ลูกทับบนพรีวิวกล้องได้ ทำหน้าที่เป็นโอเวอร์เลย์ของ UI ให้วางปุ่มชัตเตอร์ ปุ่มสลับแฟลช และเส้นช่วยครอบตัดเป็นคอมโพเนนต์ลูกที่กำหนดตำแหน่งแบบสัมบูรณ์ภายใน CameraView ใช้ StyleSheet ร่วมกับ position: 'absolute' และพิกัด bottom / top เพื่อจัดวางตัวควบคุมโอเวอร์เลย์บนพรีวิวแบบสดอย่างเข้าใจง่าย

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจแนวคิดการพัฒนาแอปมือถือด้วย React Native จากบทเรียนนี้

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปบทเรียน

ในบทเรียนนี้ คุณได้เรียนรู้ว่า Camera.useCameraPermissions ใช้จัดการการขอและตรวจสอบสิทธิ์กล้องก่อนเรนเดอร์ช่องมองภาพ, CameraView with a ref ช่วยให้คุณเรียก takePictureAsync เพื่อถ่ายภาพและรับ URI ของภาพได้ และ onBarcodeScanned ช่วยเปิดใช้งานการอ่าน QR Code ด้วยคอมโพเนนต์กล้องเดิม บทถัดไปเราจะสำรวจการอ่านตำแหน่ง GPS ด้วย expo-location

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การเข้าถึงกล้องด้วย expo-camera” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเข้าถึงกล้องด้วย expo-camera” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส React Native Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส React Native Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเข้าถึงกล้องด้วย expo-camera”

ขอสิทธิ์ใช้กล้อง แสดงคอมโพเนนต์ Camera พร้อมปุ่มชัตเตอร์ ถ่ายภาพ และแสดง URI ของภาพที่ถ่ายในคอมโพเนนต์ Image คุณปฏิบัติ React Native Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน React Native Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน React Native Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “การเข้าถึงกล้องด้วย expo-camera” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน React Native Academy นี้ได้ไหม

ได้ บทเรียน React Native Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ React Native Academy