---
title: 文件采集
canonical: https://developer.unico.io/zh-CN/dual-api/developer/sdks-and-tools/web-sdk/document-capture/
locale: zh-CN
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 参考 > 枚举](/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** — 构建摄像头并准备文件会话**

构建摄像头实例并调用 `prepareDocumentCamera`，传入 `UnicoConfig` 和所需的 `DocumentCameraTypes`：

  ```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)。