Utilisation d'expo-camera pour prendre des photos, scanner des QR codes et gérer les permissions de la caméra.

Caméra

ScaleRocket Mobile utilise expo-camera pour prendre des photos et scanner des QR codes. La caméra nécessite un build de développement et une permission explicite de l'utilisateur.

Installation

npx expo install expo-camera

Ajoutez la description de permission de la caméra dans app.json :

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "We use the camera to take profile photos and scan QR codes"
      }
    }
  }
}

Gestion des permissions

Demandez toujours la permission avant d'afficher la caméra :

import { CameraView, useCameraPermissions } from "expo-camera";

export default function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission) return <Loading />;

  if (!permission.granted) {
    return (
      <View style={styles.container}>
        <Text>Camera access is required</Text>
        <Button title="Grant Permission" onPress={requestPermission} />
      </View>
    );
  }

  return <CameraView style={{ flex: 1 }} />;
}

Prendre des photos

Capturez une photo en utilisant une ref :

import { useRef } from "react";
import { CameraView } from "expo-camera";

export default function PhotoScreen() {
  const cameraRef = useRef<CameraView>(null);

  const takePhoto = async () => {
    if (!cameraRef.current) return;

    const photo = await cameraRef.current.takePictureAsync({
      quality: 0.8,
      base64: false,
      exif: false,
    });

    console.log("Photo URI:", photo.uri);
    // Naviguer vers l'aperçu ou uploader
  };

  return (
    <View style={{ flex: 1 }}>
      <CameraView ref={cameraRef} style={{ flex: 1 }} facing="back">
        <View style={styles.controls}>
          <TouchableOpacity style={styles.captureButton} onPress={takePhoto}>
            <View style={styles.captureInner} />
          </TouchableOpacity>
        </View>
      </CameraView>
    </View>
  );
}

Changer de caméra

Basculez entre les caméras avant et arrière :

function CameraWithToggle() {
  const [facing, setFacing] = useState<"front" | "back">("back");
  const cameraRef = useRef<CameraView>(null);

  const toggleFacing = () => {
    setFacing((prev) => (prev === "back" ? "front" : "back"));
  };

  return (
    <CameraView ref={cameraRef} style={{ flex: 1 }} facing={facing}>
      <TouchableOpacity style={styles.flipButton} onPress={toggleFacing}>
        <Ionicons name="camera-reverse" size={28} color="white" />
      </TouchableOpacity>
    </CameraView>
  );
}

Scanner des QR codes

Utilisez le scanner de codes-barres intégré de la caméra :

import { CameraView } from "expo-camera";

function QRScanner() {
  const [scanned, setScanned] = useState(false);

  const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
    if (scanned) return;
    setScanned(true);

    Alert.alert("QR Code Scanned", data, [
      { text: "Scan Again", onPress: () => setScanned(false) },
      { text: "Open", onPress: () => Linking.openURL(data) },
    ]);
  };

  return (
    <CameraView
      style={{ flex: 1 }}
      facing="back"
      barcodeScannerSettings={{
        barcodeTypes: ["qr"],
      }}
      onBarcodeScanned={scanned ? undefined : handleBarCodeScanned}
    />
  );
}

Overlay de caméra

Ajoutez un overlay personnalisé pour le viseur de la caméra :

<CameraView style={{ flex: 1 }} facing="back">
  <View style={styles.overlay}>
    <View style={styles.scanArea}>
      {/* Centre transparent pour le scan QR */}
    </View>
    <Text style={styles.instructions}>
      Point your camera at a QR code
    </Text>
  </View>
</CameraView>

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
  },
  scanArea: {
    width: 250,
    height: 250,
    borderWidth: 2,
    borderColor: "white",
    borderRadius: 12,
    backgroundColor: "transparent",
  },
  instructions: {
    color: "white",
    marginTop: 24,
    fontSize: 16,
  },
});

Notes importantes

La caméra nécessite un build de développement (pas Expo Go)
Les simulateurs iOS ont une simulation limitée de la caméra
Les émulateurs Android supportent une caméra de scène virtuelle
Gérez toujours le cas où la permission est refusée avec élégance
Libérez les URIs de photos quand vous avez fini pour libérer la mémoire

Caméra

On this page