20644: Implement Camera API (#3597)

Co-authored-by: andy-chhuon <andy.chhuon@shopify.com>

Author: fatbattk

.changeset/slimy-foxes-hide.md

@@ -0,0 +1,5 @@
+---
+'@shopify/ui-extensions': minor
+---
+
+Add Camera API types

packages/ui-extensions/src/surfaces/point-of-sale/api.ts

@@ -14,6 +14,13 @@ export type {ActionApi, ActionApiContent} from './api/action-api/action-api';
 export type {StandardApi} from './api/standard/standard-api';
 export type {ActionTargetApi} from './api/action-target-api/action-target-api';
 
+export type {
+  CameraApi,
+  CameraApiContent,
+  CameraMediaOptions,
+  CameraMediaResponse,
+} from './api/camera-api/camera-api';
+
 export type {
   ConnectivityStateSeverity,
   ConnectivityState,

packages/ui-extensions/src/surfaces/point-of-sale/api/camera-api/camera-api.ts

@@ -0,0 +1,56 @@
+export interface CameraMediaOptions {
+  /**
+   * The camera that will be active when the camera interface first opens.
+   * - `'user'`: The front-facing camera
+   * - `'environment'`: The rear-facing camera
+   * @defaultValue 'environment'
+   */
+  facingMode?: 'user' | 'environment';
+  /**
+   * The maximum width (1 to 1920) of the image in pixels. Resizes the image to this width if it is larger.
+   * @defaultValue 1080
+   */
+  maxWidth?: number;
+  /**
+   * The maximum height (1 to 1920) of the image in pixels. Resizes the image to this height if it is larger.
+   * @defaultValue 1080
+   */
+  maxHeight?: number;
+  /**
+   * The quality of the image returned.
+   * Percentile value between 0 (lowest quality/highest compression) and 1 (highest quality/lowest compression).
+   * @defaultValue 0.9
+   */
+  quality?: number;
+}
+
+export interface CameraMediaResponse {
+  /** The image data as base64 string. */
+  base64: string;
+  /** The width of the image in pixels. */
+  width: number;
+  /** The height of the image in pixels. */
+  height: number;
+  /** The file size of the image in bytes. */
+  fileSize: number;
+  /** The MIME type of the image. */
+  type: string;
+}
+
+export interface CameraApiContent {
+  /**
+   * Launch the device's camera to take a photo.
+   *
+   * @param options the options for the camera media
+   * @returns a promise that resolves with the captured image and metadata
+   * @throws {Error} when camera permission is denied by the user
+   * @throws {Error} when the user cancels the photo capture
+   * @throws {Error} when the device has no available camera
+   * @throws {Error} when the camera API is already in use
+   */
+  takePhoto: (options?: CameraMediaOptions) => Promise<CameraMediaResponse>;
+}
+
+export interface CameraApi {
+  camera: CameraApiContent;
+}

packages/ui-extensions/src/surfaces/point-of-sale/api/standard/standard-api.ts

@@ -1,3 +1,4 @@
+import {CameraApi} from '../camera-api/camera-api';
 import {ConnectivityApi} from '../connectivity-api/connectivity-api';
 import {DeviceApi} from '../device-api/device-api';
 import {LocaleApi} from '../locale-api/locale-api';
@@ -20,4 +21,5 @@ export type StandardApi<T> = {[key: string]: any} & {
   DeviceApi &
   ConnectivityApi &
   StorageApi &
-  PinPadApi;
+  PinPadApi &
+  CameraApi;