Camera

Permission settings are required

openCameraBefore using it, you need to set camera permissions. Please check the permission setup guide first.

Take a photo

SDK function: openCamera

A function that launches the camera and returns the captured image.

Signature

function openCamera(options: { base64: boolean; maxWidth: number }): Promise<ImageResponse>;

Parameters

• options · Required · OpenCameraOptions

  An options object used when launching the camera.

  • options.base64 · boolean

    A boolean value indicating whether to return the image in Base64 format. The default is false. trueto dataUri Instead, it returns a Base64-encoded string.
  • options.maxWidth · number

    A numeric value indicating the maximum width of the image. The default is 1024.

Properties

• openPermissionDialog

  Displays a dialog to request camera access permission again. The user can choose one of "Allow", "Allow once", or "Don't allow". If they choose "Allow" or "Allow once", allowedit returns deniedis returned.
• getPermission

  Returns the current status of camera access permission. allowedis the state where the user has granted camera access permission. deniedis the state where the user has denied camera access permission. notDeterminedis the state where camera access permission has never been requested.

If camera permission is denied in the Toss app settings, osPermissionDeniedis returned.

Return value

• Promise<ImageResponse>

Returns an object containing information about the captured image. The structure of the returned object is as follows:

• id: The unique identifier of the image.
• dataUri: A data URI representing the image data.

Camera permission error

Error type: OpenCameraPermissionError

An error that occurs when camera permission is denied. When an error occurs, error instanceof OpenCameraPermissionErroryou can check it with.

Signature

class OpenCameraPermissionError extends PermissionError {
  constructor();
}

Example

Get the photo taken after opening the camera

An example of taking a photo with the camera and getting the result. During this process, you can check the current camera permission status, and if there is no permission, you request it. If the user has denied permission or if the system has restricted permission, OpenCameraPermissionErroris returned.

js

import { openCamera, OpenCameraPermissionError } from '@apps-in-toss/web-framework';

const base64 = true;

async function handleOpenCamera() {
  try {
    const response = await openCamera({ base64 });
    const imageUri = base64 ? 'data:image/jpeg;base64,' + response.dataUri : response.dataUri;
    console.log('Photo capture successful:', imageUri);
  } catch (error) {
    if (error instanceof OpenCameraPermissionError) {
      console.log('Permission error');
    }
    console.error('Failed to retrieve the photo:', error);
  }
}

async function handleGetPermissionForOpenCamera() {
  const permission = await openCamera.getPermission();
  return permission;
}

async function handleOpenPermissionDialogForOpenCamera() {
  const permission = await openCamera.openPermissionDialog();
  return permission;
}

React

import { ImageResponse, openCamera, OpenCameraPermissionError } from '@apps-in-toss/web-framework';
import { useState } from 'react';

const base64 = true;

// Component that launches the camera and displays the captured image on the screen
function Camera() {
  const [image, setImage] = useState<ImageResponse | null>(null);

  const handlePress = async () => {
    try {
      const response = await openCamera({ base64 });
      setImage(response);
    } catch (error) {
      if (error instanceof OpenCameraPermissionError) {
        console.log('Permission error');
      }

      console.error('Failed to retrieve the photo:', error);
    }
  };

  // To display an image returned in Base64 format, you need to add the data URL scheme prefix.
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <div>
      {image ? <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} /> : <span>No photo</span>}
      <input type="button" value="Take a photo" onClick={handlePress} />
      <input
        type="button"
        value="Check permission"
        onClick={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <input
        type="button"
        value="Request permission"
        onClick={async () => {
          const currentPermission = await openCamera.openPermissionDialog();
          Alert.alert(currentPermission);
        }}
      />

  );
}

React Native

import { ImageResponse, openCamera, OpenCameraPermissionError } from '@apps-in-toss/framework';
import { useState } from 'react';
import { Alert, Button, Image, Text, View } from 'react-native';

const base64 = true;

// Component that launches the camera and displays the captured image on the screen
function Camera() {
  const [image, setImage] = useState<ImageResponse | null>(null);

  const handlePress = async () => {
    try {
      const response = await openCamera({ base64 });
      setImage(response);
    } catch (error) {
      if (error instanceof OpenCameraPermissionError) {
        console.log('Permission error');
      }

      console.error('Failed to retrieve the photo:', error);
    }
  };

  // To display an image returned in Base64 format, you need to add the data URL scheme prefix.
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <View>
      {image ? <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} /> : <Text>No photo</Text>}
      <Button title="Take a photo" onPress={handlePress} />
      <Button
        title="Check Permission"
        onPress={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <Button
        title="Request permission"
        onPress={async () => {
          const currentPermission = await openCamera.openPermissionDialog();
          Alert.alert(currentPermission);
        }}
      />
    </View>
  );
}