---
title: ドキュメントキャプチャ
canonical: https://developer.unico.io/ja/dual-api/developer/sdks-and-tools/web-sdk/document-capture/
locale: ja
generated_by: markdown-export
---

本人確認書類のキャプチャ。SDK はドキュメントの位置決めを補助するフレームを表示し、位置が合ったらユーザーがボタンをクリックして写真を撮影します。

:::warning[コンテンツ検証なし]
SDK はキャプチャされているものに対して何らかの検証を行いません。
:::

## 利用可能なドキュメントフレーム

| フレーム | 説明 |
|---|---|
| `DocumentCameraTypes.CPF` | CPF をキャプチャ |
| `DocumentCameraTypes.CNH` | 開いた CNH をキャプチャ |
| `DocumentCameraTypes.CNH_FRENTE` | CNH の表面をキャプチャ |
| `DocumentCameraTypes.CNH_VERSO` | CNH の裏面をキャプチャ |
| `DocumentCameraTypes.RG_FRENTE` | RG の表面をキャプチャ |
| `DocumentCameraTypes.RG_VERSO` | RG の裏面をキャプチャ |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | 新 RG の表面をキャプチャ |
| `DocumentCameraTypes.RG_VERSO_NOVO` | 新 RG の裏面をキャプチャ |
| `DocumentCameraTypes.OTHERS("descrição")` | その他のドキュメント用汎用フレーム |

:::tip[汎用フレーム]
特定のフレームが存在しないドキュメント（例：RNE）をキャプチャする必要がある場合は、`DocumentCameraTypes.OTHERS("description")` を使用してください — どのキャプチャにも対応できる汎用の長方形フレームです。
:::

サポートされているドキュメントタイプの一覧については、[API リファレンス > Enum](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums) をご参照ください。

## フレームサイズ

キャプチャエリアを最適化するために、アプリケーション内でフレームのサイズを設定することをお勧めします。

:::info[CSS の干渉]
フレームの機能は、グリッドコンポーネント（Bootstrap、Material-UI など）を持つデザインシステムの影響を受ける場合があります。このリスクを最小限に抑えるために、フレーム（`id="box-camera"`）を不要な CSS ルールを継承しない場所に配置してください。
:::

### デスクトップ

フレームをラッパー要素で囲んでサイズを制限します：

  ```html
  <div class="container">
    <div id="box-camera"></div>
  </div>
  ```

  ```css
  .container {
    width: 800px;
    height: 600px;
    position: relative;
  }
  ```

  ユーザーの顔をフレームに収めやすくするために、適切な縦横比を維持してください。

  :::warning[開発者ツールでのリサイズ]
  ブラウザの開発者モードを通じた画面リサイズのテストは期待通りに動作しません。代わりにブラウザウィンドウを直接リサイズしてください。
  :::

### モバイル

Web モバイルビューでは、コンピュータビジョンアルゴリズムの問題を避けるために、キャプチャフレームをデバイス画面の 100%（`100vw`/`100vh`）に設定する必要があります。水平・垂直スクロールは避けてください — モーダルを使用することでこれを最小限に抑えられます。

  :::warning[実機でテストする]
  ブラウザの開発者モードを使用したテストは機能しません — ブラウザが使用するカメラはデスクトップカメラと同じであり、モバイルデバイスのカメラとは解像度が大きく異なります。デバイス上で直接テストしてください。
  :::

## ドキュメントキャプチャの開始

****ステップ 2** — カメラをビルドしてドキュメントセッションを準備する**

カメラインスタンスをビルドし、`UnicoConfig` と希望する `DocumentCameraTypes` を渡して `prepareDocumentCamera` を呼び出します：

  ```javascript
  const unicoCamera = unicoCameraBuilder.build();

  const config = new UnicoConfig()
    .setHostname("<YOUR_HOSTNAME>")
    .setHostKey("<YOUR_HOST_KEY>");

  unicoCamera.prepareDocumentCamera(
    config,
    DocumentCameraTypes.CNH
  ).then(cameraOpener => {
    cameraOpener.open(callback);
  }).catch(error => {
    console.error(error);
  });
  ```

結果の完全な処理については、[結果の受け取り](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result) をご参照ください。