Working with Camera and Media Capture

import { PermissionsAndroid, Platform } from 'react-native';
import { request, PERMISSIONS } from 'react-native-permissions';

const requestCameraPermission = async () => {
  if (Platform.OS === 'android') {
    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA,
        {
          title: 'Camera Permission',
          message: 'App needs camera access to take photos.',
          buttonNeutral: 'Ask Me Later',
          buttonNegative: 'Cancel',
          buttonPositive: 'OK'
        }
      );
      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log('Camera permission granted');
      } else {
        console.log('Camera permission denied');
      }
    } catch (err) {
      console.warn(err);
    }
  } else {
    // iOS logic here
    const result = await request(PERMISSIONS.IOS.CAMERA);
    console.log('iOS Camera Permission Result:', result);
  }
};

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

<Camera
  style={{ flex: 1 }}
  type={Camera.Constants.Type.back}
  captureQuality={Camera.Constants.Quality.high}
  mediaType={Camera.Constants.MediaType.photo}
  onPictureSaved={(data) => {
    console.log("Photo saved:", data);
  }}
/>

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

const startRecording = async () => {
  try {
    const options = {
      videoSource: 'back',
      quality: 'medium',
      maxDuration: 30,
      recordAudio: true
    };

    const data = await Camera.startVideoRecording(options);
    console.log('Video recorded:', data.uri);
  } catch (error) {
    console.error('Error starting video recording:', error);
  }
};

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

const stopRecording = async () => {
  try {
    const data = await Camera.stopVideoRecording();
    console.log('Video recorded:', data.uri);
  } catch (error) {
    console.error('Error stopping video recording:', error);
  }
};

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

<Camera
  style={{ flex: 1 }}
  type={Camera.Constants.Type.back}
  flashMode={Camera.Constants.FlashMode.auto}
  zoom={1.0}
  focusMode={Camera.Constants.FocusMode.auto}
/>

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

const cameraOptions = {
  cameraType: 'front',
  permission: 'granted'
};

<Camera
  type={cameraOptions.cameraType}
  captureMode={'still'}
  permission={cameraOptions.permission}
/>

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

<Camera
  style={styles.camera}
  orientation="landscape-left"
  autoRotate={true}
/>

import React, { useState } from 'react';
import { BarCodeScanner } from 'expo-barcode-scanner';

const QRScanner = () => {
  const [hasPermission, setHasPermission] = useState(null);
  const [scanned, setScanned] = useState(false);

  React.useEffect(() => {
    (async () => {
      const { status } = await BarCodeScanner.requestPermissionsAsync();
      setHasPermission(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = ({ data }) => {
    setScanned(true);
    alert(`QR Code scanned: ${data}`);
  };

  if (hasPermission === null) {
    return <div>Requesting camera permission</div>;
  }
  if (hasPermission === false) {
    return <div>Camera permission denied</div>;
  }

  return (
    <BarCodeScanner
      onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
      style={{ flex: 1 }}
    />
  );
};

export default QRScanner;

import React, { useRef } from 'react';
import { CameraView, CameraProps } from 'expo-camera';

const CameraPreview = () => {
  const cameraRef = useRef<CameraView>(null);

  return (
    <CameraView
      ref={cameraRef}
      style={{ flex: 1 }}
      facing="back"
      mode="preview"
    />
  );
};

export default CameraPreview;

import React, { useRef } from 'react';
import { CameraView, CameraProps } from 'expo-camera';

const CustomCameraPreview = () => {
  const cameraRef = useRef<CameraView>(null);

  return (
    <CameraView
      ref={cameraRef}
      style={{ flex: 1 }}
      facing="back"
      mode="preview"
      zoom={0.5}
      flashMode="auto"
    />
  );
};

export default CustomCameraPreview;

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

const captureImage = async () => {
  try {
    const options = { quality: 0.5, width: 640 };
    const data = await Camera.capture(options);
    console.log('Image captured:', data);
  } catch (error) {
    if (error.code === 'CAMERA_NOT_AUTHORIZED') {
      Alert.alert(
        'Permission Required',
        'Camera access is needed to capture images. Please enable in Settings.'
      );
    } else if (error.code === 'MEDIA_RECORDER_ERROR') {
      Alert.alert('Recording Error', 'Failed to record media. Please try again.');
    } else {
      console.error('Camera error:', error);
    }
  }
};

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

function CameraScreen() {
  const camera = Camera.useCameraDevice('back');

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