Camera API

Examples

• Capture and upload photo to server

  Description

  This example demonstrates capturing a photo using `shopify.camera.takePhoto()` and uploading it to a backend server for further processing. It shows loading states during capture and upload, handles errors appropriately, and confirms successful upload with toast notifications.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    const [isProcessing, setIsProcessing] = useState(false);
  
    const handleCaptureAndUpload = async () => {
      setIsProcessing(true);
      try {
        const photo = await shopify.camera.takePhoto({
          quality: 0.8,
          maxWidth: 1520,
          maxHeight: 1520,
        });
  
        // Upload the image to your backend server
        // (Replace with your actual backend endpoint)
        await fetch('https://your-backend.com/api/upload', {
          method: 'POST',
          headers: {'Content-Type': 'application/json'},
          body: JSON.stringify({
            image: photo.base64,
            mimeType: photo.type,
          }),
        });
  
        shopify.toast.show('Photo uploaded successfully!');
      } catch (error) {
        shopify.toast.show(`Error: ${error.message}`);
      } finally {
        setIsProcessing(false);
      }
    };
  
    return (
      <s-tile
        heading="Upload Photo"
        onClick={handleCaptureAndUpload}
        disabled={isProcessing}
      />
    );
  };
  

• Capture and display a photo

  Description

  This example demonstrates using `shopify.camera.takePhoto()` to capture an image with the device camera and displaying it immediately using the `image` component.

  jsx

  import {render} from 'preact';
  import {useState} from 'preact/hooks';
  
  export default async () => {
    render(<Extension />, document.body);
  };
  
  const Extension = () => {
    const [imageData, setImageData] = useState(null);
    const [isCapturing, setIsCapturing] = useState(false);
  
    const handleTakePhoto = async () => {
      setIsCapturing(true);
      try {
        const photo = await shopify.camera.takePhoto();
        setImageData(photo);
        shopify.toast.show('Photo captured successfully!');
      } catch (error) {
        // skip showing errors when the user cancels the photo capture.
        if (!error.message.includes('User cancelled')) {
          shopify.toast.show(`Error: ${error.message}`);
        }
      } finally {
        setIsCapturing(false);
      }
    };
  
    return (
      <s-page heading="Camera Capture">
        <s-scroll-box>
          <s-stack>
            <s-button onClick={handleTakePhoto} disabled={isCapturing}>
              {isCapturing ? 'Capturing...' : 'Take Photo'}
            </s-button>
  
            {imageData && (
              <>
                <s-image
                  src={`data:${imageData.type};base64,${imageData.base64}`}
                />
                <s-section heading="Image Details">
                  <s-text>Width: {imageData.width}px</s-text>
                  <s-text>Height: {imageData.height}px</s-text>
                  <s-text>
                    File Size: {(imageData.fileSize / 1024).toFixed(2)} KB
                  </s-text>
                  <s-text>Type: {imageData.type}</s-text>
                </s-section>
              </>
            )}
          </s-stack>
        </s-scroll-box>
      </s-page>
    );
  };