Choose a version:

Camera API

The Camera API provides access to the device's camera, enabling photo capture directly within POS UI extensions. The API requests camera permissions if not already enabled, opens the native camera interface, and returns the image data including dimensions, file size, and base64 string for immediate display or server upload.

Anchor to Use casesUse cases

Photo capture: Capture photos for product documentation, damage verification, or visual records.
Proof workflows: Create photo-based proof workflows for deliveries, returns, or customer verification.
Visual documentation: Document inventory conditions or store displays.
Customer engagement: Implement features requiring visual capture for custom orders or personalization.

Support

Targets (28)

Supported targets

Anchor to PropertiesProperties

The shopify global object provides camera capabilities for the POS device. Access the following properties on shopify to capture photos for documentation, verification, or customer engagement.

Anchor to takePhoto takePhoto (options?: ) => Promise<> required: Launch the device's camera to take a photo.

CameraMediaOptions

Specifies configuration options for capturing photos using the device camera.

facingMode
The camera that will be active when the camera interface first opens. - `'user'`: The front-facing camera - `'environment'`: The rear-facing camera
```
'user' | 'environment'
```
maxHeight
The maximum height (1 to 1920) of the image in pixels. Resizes the image to this height if it is larger.
```
number
```
maxWidth
The maximum width (1 to 1920) of the image in pixels. Resizes the image to this width if it is larger.
```
number
```
quality
The quality of the image returned. Percentile value between 0 (lowest quality/highest compression) and 1 (highest quality/lowest compression).
```
number
```

CameraMediaResponse

Represents the captured image and associated metadata returned by `shopify.camera.takePhoto()`.

base64
The image data as base64 string.
```
string
```
fileSize
The file size of the image in bytes.
```
number
```
height
The height of the image in pixels.
```
number
```
type
The MIME type of the image.
```
string
```
width
The width of the image in pixels.
```
number
```

Examples

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}

);

};

Examples

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}
    />
  );
};

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>
  );
};

Anchor to Best practicesBest practices

Optimize image quality: Use appropriate quality and size settings to balance image quality with file size and upload performance.
Provide feedback: Show loading states while processing images and clear success/error messages after capture.
Handle errors gracefully: Account for scenarios where users cancel, camera is unavailable, or permissions are denied.

Anchor to LimitationsLimitations

Camera functionality requires the device to have a camera and appropriate permissions granted by the user.
Only one camera operation can be in progress at a time. Attempting to call takePhoto() while a capture is already in progress will result in a rejected promise.
Base64 strings can be memory-intensive for large images. Use appropriate maxWidth, maxHeight, and quality settings to optimize performance.
The facingMode parameter may not behave consistently on all Android devices, because camera-facing behavior varies across manufacturers. If a requested mode isn't supported, the rear-facing camera is used by default, and users can still manually switch cameras from the camera interface.

Was this page helpful?