相机

需要设置权限

openCamera在使用之前，您需要设置相机权限。请先查看权限设置指南。

拍摄照片

SDK 函数： openCamera

这是一个启动相机并返回拍摄图像的函数。

签名

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

参数

• options · 必填 · OpenCameraOptions

  相机启动时使用的选项对象。

  • options.base64 · boolean

    表示是否以 Base64 格式返回图像的布尔值。默认值为 false。 true设为 dataUri 而是返回 Base64 编码的字符串。
  • options.maxWidth · number

    表示图像最大宽度的数值。默认值为 1024。

属性

• openPermissionDialog

  会显示一个重新请求相机访问权限的对话框。用户可以在“允许”、“仅允许一次”、“不允许”中选择其一。若选择“允许”或“仅允许一次”， allowed会返回，并在选择“不允许”时 denied则返回。
• getPermission

  返回当前相机访问权限状态。 allowed表示用户已允许相机访问权限的状态。 denied表示用户已拒绝相机访问权限的状态。 notDetermined表示用户从未请求过相机访问权限的状态。

如果在 Toss 应用设置中相机权限被拒绝， osPermissionDenied则返回。

返回值

• Promise<ImageResponse>

返回包含拍摄图像信息的对象。返回对象的结构如下：

• id: 图像的唯一标识符。
• dataUri: 表示图像数据的数据 URI。

相机权限错误

错误类型： OpenCameraPermissionError

这是在相机权限被拒绝时发生的错误。发生错误时 error instanceof OpenCameraPermissionError可以通过它来确认。

签名

class OpenCameraPermissionError extends PermissionError {
  constructor();
}

示例

启动相机后获取拍摄的照片

这是一个用相机拍照并获取结果的示例。这个过程中可以检查当前相机权限状态，如果没有权限就请求权限。若用户拒绝权限或系统限制了权限， OpenCameraPermissionError则返回。

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('拍照成功:', imageUri);
  } catch (error) {
    if (error instanceof OpenCameraPermissionError) {
      console.log('权限错误');
    }
    console.error('获取照片失败：', 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;

// 启动相机并将拍摄的图像显示在屏幕上的组件
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('权限错误');
      }

      console.error('获取照片失败：', error);
    }
  };

  // 要显示以 Base64 格式返回的图像，需要添加数据 URL 方案前缀。
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <div>
      {image ? <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} /> : <span>没有照片</span>}
      <input type="button" value="拍摄照片" onClick={handlePress} />
      <input
        type="button"
        value="检查权限"
        onClick={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <input
        type="button"
        value="请求权限"
        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;

// 启动相机并将拍摄的图像显示在屏幕上的组件
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('权限错误');
      }

      console.error('获取照片失败：', error);
    }
  };

  // 要显示以 Base64 格式返回的图像，需要添加数据 URL 方案前缀。
  const imageUri = base64 ? 'data:image/jpeg;base64,' + image?.dataUri : image?.dataUri;

  return (
    <View>
      {image ? <Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} /> : <Text>没有照片</Text>}
      <Button title="拍摄照片" onPress={handlePress} />
      <Button
        title="检查权限"
        onPress={async () => {
          const permission = await openCamera.getPermission();
          Alert.alert(permission);
        }}
      />

      <Button
        title="请求权限"
        onPress={async () => {
          const currentPermission = await openCamera.openPermissionDialog();
          Alert.alert(currentPermission);
        }}
      />
    </View>
  );
}