---
title: Pengambilan dokumen
canonical: https://developer.unico.io/id/dual-api/developer/sdks-and-tools/web-sdk/document-capture/
locale: id
generated_by: markdown-export
---

Pengambilan dokumen identitas. SDK menampilkan bingkai untuk membantu pengguna memposisikan dokumen; setelah diposisikan, pengguna menekan tombol untuk mengambil foto.

:::warning[Tanpa validasi konten]
SDK tidak melakukan validasi jenis apa pun terhadap objek yang sedang diambil.
:::

## Bingkai dokumen yang tersedia

| Bingkai | Deskripsi |
|---|---|
| `DocumentCameraTypes.CPF` | Ambil CPF |
| `DocumentCameraTypes.CNH` | Ambil CNH terbuka |
| `DocumentCameraTypes.CNH_FRENTE` | Ambil bagian depan CNH |
| `DocumentCameraTypes.CNH_VERSO` | Ambil bagian belakang CNH |
| `DocumentCameraTypes.RG_FRENTE` | Ambil bagian depan RG |
| `DocumentCameraTypes.RG_VERSO` | Ambil bagian belakang RG |
| `DocumentCameraTypes.RG_FRENTE_NOVO` | Ambil bagian depan RG baru |
| `DocumentCameraTypes.RG_VERSO_NOVO` | Ambil bagian belakang RG baru |
| `DocumentCameraTypes.OTHERS("descrição")` | Bingkai generik untuk dokumen lainnya |

:::tip[Bingkai generik]
Jika Anda perlu mengambil dokumen yang tidak memiliki bingkai khusus (misalnya, RNE), gunakan `DocumentCameraTypes.OTHERS("description")` — bingkai persegi panjang generik yang dapat digunakan untuk memandu pengambilan apa pun.
:::

Untuk daftar lengkap jenis dokumen yang didukung, lihat [Referensi API > Enums](/dual-api/developers/sdks-and-tools/web/web-sdk/api-reference/enums).

## Ukuran bingkai

Disarankan untuk mengonfigurasi ukuran bingkai dalam aplikasi Anda guna mengoptimalkan area pengambilan.

:::info[Gangguan CSS]
Fungsionalitas bingkai dapat dipengaruhi oleh design system dengan komponen grid (Bootstrap, Material-UI, dll.). Untuk meminimalkan risiko ini, posisikan bingkai (`id="box-camera"`) di tempat yang tidak mewarisi aturan CSS yang tidak diinginkan.
:::

### Desktop

Bungkus bingkai dalam elemen induk untuk membatasi dimensinya:

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

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

  Pertahankan rasio tinggi-ke-lebar yang tepat agar lebih mudah membingkai wajah pengguna.

  :::warning[Perubahan ukuran dengan dev tools]
  Pengujian yang melibatkan perubahan ukuran layar melalui mode pengembang browser tidak akan berfungsi seperti yang diharapkan. Ubah ukuran jendela browser Anda secara langsung.
  :::

### Mobile

Untuk tampilan Web Mobile, bingkai pengambilan harus menempati 100% layar perangkat (`100vw`/`100vh`) untuk menghindari masalah dengan algoritma computer vision. Hindari pengguliran horizontal atau vertikal — menggunakan modal membantu meminimalkan hal ini.

  :::warning[Uji pada perangkat fisik]
  Pengujian menggunakan mode pengembang browser tidak berfungsi — kamera yang digunakan browser sama dengan kamera desktop, dengan resolusi yang sangat berbeda dari kamera perangkat mobile. Uji langsung pada perangkat.
  :::

## Memulai pengambilan dokumen

****Langkah 2** — Bangun kamera dan siapkan sesi dokumen**

Bangun instance kamera dan panggil `prepareDocumentCamera` dengan meneruskan `UnicoConfig` dan `DocumentCameraTypes` yang diinginkan:

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

Untuk penanganan hasil secara lengkap, lihat [Menerima hasil](/dual-api/developers/sdks-and-tools/web/web-sdk/capture-flow/receiving-the-result).