Camera

import { Camera } from "@/components/ui/camera"

<Camera 
  onCapture={(imageData) => console.log('Photo captured:', imageData)}
  onError={(error) => console.error('Camera error:', error)}
/>

<Camera
  outputFormat="base64"
  captureFormat="image/jpeg"
  captureQuality={0.8}
  onCapture={(imageData) => {
    // imageData is a base64 string
    console.log('Base64 data:', imageData)
    // Example: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD..."
    
    // Direct usage in img src
    setProfileImage(imageData)
  }}
/>

<Camera
  outputFormat="file"
  captureFormat="image/png"
  captureQuality={0.9}
  onCapture={(imageData) => {
    if (imageData instanceof File) {
      console.log('File object:', imageData)
      // Example file properties:
      // imageData.name: "photo-1703847234567.png"
      // imageData.size: 245760 (bytes)
      // imageData.type: "image/png"
      // imageData.lastModified: 1703847234567
      
      // Direct upload to server
      uploadFile(imageData)
    }
  }}
/>

import { Camera } from "@/components/ui/camera"
import { useState } from "react"

export function CameraExample() {
  const [capturedData, setCapturedData] = useState<{
    type: "base64" | "file"
    data: string | File
    preview?: string
  } | null>(null)

  const onCaptureBase64 = (imageData: string | File) => {
    if (typeof imageData === "string") {
      setCapturedData({
        type: "base64",
        data: imageData,
        preview: imageData
      })
    }
  }

  const onCaptureFile = (imageData: string | File) => {
    if (imageData instanceof File) {
      // Convert File to base64 for preview
      const reader = new FileReader()
      reader.onload = (e) => {
        setCapturedData({
          type: "file",
          data: imageData,
          preview: e.target?.result as string
        })
      }
      reader.readAsDataURL(imageData)
    }
  }

  const uploadFile = async (file: File) => {
    const formData = new FormData()
    formData.append('image', file)

    try {
      const response = await fetch('/api/upload', {
        method: 'POST',
        body: formData
      })
      
      if (response.ok) {
        console.log('File uploaded successfully')
      }
    } catch (error) {
      console.error('Upload failed:', error)
    }
  }

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
      {/* Base64 Output */}
      <div>
        <h3>Base64 Output</h3>
        <Camera
          size="sm"
          outputFormat="base64"
          onCapture={onCaptureBase64}
        />
      </div>

      {/* File Output */}
      <div>
        <h3>File Output</h3>
        <Camera
          size="sm"
          outputFormat="file"
          onCapture={onCaptureFile}
        />
      </div>

      {/* Display Results */}
      {capturedData && (
        <div className="col-span-full">
          <h4>Captured {capturedData.type.toUpperCase()}</h4>
          {capturedData.preview && (
            <img src={capturedData.preview} alt="Captured" />
          )}
          <pre>{JSON.stringify({
            type: capturedData.type,
            ...(capturedData.data instanceof File ? {
              name: capturedData.data.name,
              size: capturedData.data.size,
              type: capturedData.data.type
            } : {
              length: capturedData.data.length
            })
          }, null, 2)}</pre>
        </div>
      )}
    </div>
  )
}

// Automatic permission checking on component mount
useEffect(() => {
  checkCameraPermission() // Multi-method browser detection
}, [])

// Enhanced privacy-focused camera usage
<Camera
  onStart={() => console.log('Camera started with user consent')}
  onError={(error) => {
    // Handle permission denied gracefully with recovery options
    if (error.includes('Permission denied')) {
      showPermissionRecoveryFlow()
    }
  }}
  autoStart={false} // Requires explicit user action
/>

// Example base64 string (truncated)
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAABAAEDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAX/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwCdABmX/9k="

// Length: typically 50,000-200,000 characters

// Example File object properties
{
  name: "photo-1703847234567.png",
  size: 245760,
  type: "image/png", 
  lastModified: 1703847234567,
  // Methods: stream(), text(), arrayBuffer(), etc.
}

<Camera
  mask="square"
  aspect="1:1"
  mirror="preview"
  onCapture={(imageData) => {
    // Upload to your backend
    uploadProfilePhoto(imageData)
  }}
/>

<Camera
  mask="card"
  aspect="16:9"
  captureQuality={1.0}
  onCapture={(imageData) => {
    // Process ID card
    processIDCard(imageData)
  }}
/>

<Camera
  mask="round"
  aspect="1:1"
  size="sm"
  onCapture={(imageData) => {
    // Create avatar
    createAvatar(imageData)
  }}
/>