---
title: वेब कैप्चर
description: Human Plugin के create से मिले मानों का उपयोग करके, hosted link या Journeys SDK के साथ, वेब एप्लिकेशन में Journey flow का कैप्चर चलाएँ।
canonical: https://developer.unico.io/hi/human-plugin/integrations/web
locale: hi
generated_by: markdown-export
---

# वेब कैप्चर

Human Plugin से लौटे token और link का उपयोग करके व्यक्ति को ब्राउज़र में कैप्चर से गुज़ारें।

आपका back-end Human Plugin में Journey flow के साथ process बनाता है। `201` response में तीन मान हैं जो front-end को चाहिए:

| फ़ील्ड | उपयोग |
|---|---|
| `id` | Human Plugin process id। SDK इसे `transactionId` के रूप में लेता है, और आपका back-end इसी से परिणाम पढ़ता है |
| `token` | Journeys SDK में कैप्चर शुरू करता है |
| `link` | Hosted कैप्चर पेज |

`token` और `link` **केवल** create से लौटते हैं। इन्हें उसी अनुरोध में front-end को पास करें, या खुद संग्रहीत करें। [Human Token Journey](/hi/human-plugin/integrations/human-token-journey) देखें।

## आवश्यकताएँ

कैप्चर ब्राउज़र में चलता है और उसे कैमरा एक्सेस चाहिए।

| OS | Chrome | Firefox | Safari | Samsung Internet | Opera | Edge |
|---|---|---|---|---|---|---|
| Windows | ✅ | ✅ | N/A | N/A | ❌ | ❌ |
| macOS | ✅ | ✅ | ✅ | N/A | ❌ | ❌ |
| Android | ✅ | ❌ | N/A | ✅ | ❌ | ❌ |
| iOS | ✅ | ✅ | ✅ | N/A | ❌ | ❌ |

- पेज **HTTPS** पर सर्व होने चाहिए। कैमरा केवल [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) में काम करता है।
- In-app ब्राउज़िंग के लिए Android 8 (API 26) या iOS 13 या उससे नया चाहिए।
- सोशल-नेटवर्क ऐप्स के अंदर के ब्राउज़र समर्थित नहीं हैं।

## मॉडल चुनें

| मॉडल | किसके लिए सर्वोत्तम |
|---|---|
| **Hosted link** | सबसे सरल सेटअप। किसी लाइब्रेरी की ज़रूरत नहीं: व्यक्ति `link` पर जाता है और आपके `callbackUri` पर लौट आता है |
| **Journeys SDK** | कैप्चर आपके पेज के अंदर खुलता है, इसलिए व्यक्ति उसे छोड़कर कभी नहीं जाता |

### Hosted link

Create अनुरोध में `callbackUri` भेजें। यह वह पेज है जहाँ कैप्चर समाप्त होने पर व्यक्ति लौटता है।

```json
{
  "flow": "humantoken",
  "clientId": "client-a",
  "correlationId": "order-1001",
  "credential": { "type": "DUI_TYPE_NG_BVN", "value": "<document number>" },
  "callbackUri": "https://app.example.com/capture/done"
}
```

फिर व्यक्ति को `link` पर भेजें, दो तरीकों में से किसी एक से:

- **Redirect।** `link` पर navigate करें। अंत में, व्यक्ति `callbackUri` पर वापस भेज दिया जाता है।
- **नया टैब।** [`window.open()`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open) से `link` खोलें, टैब के `callbackUri` पर पहुँचने पर नज़र रखें, और उसे बंद करें।

व्यक्ति के लौटने पर, अपने back-end को बताएँ, जो `GET /v1/processes/{id}` कॉल करता है।

```mermaid
sequenceDiagram
  participant F as Your front-end
  participant B as Your back-end
  participant H as Human Plugin
  participant P as Hosted page
  F->>B: start the capture
  B->>H: POST /v1/processes (Journey flow, callbackUri)
  H-->>B: 201, id + token + link
  B-->>F: id + link
  F->>P: open link
  Note over P: capture
  P-->>F: back to callbackUri
  F->>B: capture ended
  B->>H: GET /v1/processes/{id}
  H-->>B: 200, final state
```

### Journeys SDK

SDK आपके पेज पर एक iFrame में कैप्चर खोलता है। यह किसी भी framework (React, Angular, Vue) या सादे JavaScript के साथ काम करता है।

शुरू करने से पहले, Unico सपोर्ट से अपने domains रजिस्टर करने को कहें। वे HTTPS का उपयोग करने वाले होने चाहिए।

#### 1. इंस्टॉल करें

```bash
npm install unico-journey-sdk
```

SDK semantic versioning का पालन करता है, इसलिए minor और patch अपडेट लेना सुरक्षित है। इसे अप टू डेट रखें: सुरक्षा और bug fixes नए versions में आते हैं।

#### 2. अपने headers में SDK को अनुमति दें

यदि आपका पेज कोई `Content-Security-Policy` या `Permissions-Policy` header नहीं भेजता, तो यह चरण छोड़ दें। अन्यथा, जोड़ें:

**Content-Security-Policy:**

```
frame-src https://*.unico.io https://*.unico.app;
script-src https://idpay.unico.io;
style-src https://idpay.unico.io;
connect-src https://api.cadastro.unico.app;
```

**Permissions-Policy:**

```
camera=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io"),
geolocation=(self "https://human-token.unico.io" "https://cadastro.unico.app" "https://id.unico.io" "https://retry.unico.io" "https://ultimatum.unico.io")
```

#### 3. Initialize करें

जैसे ही आपको पता चले कि कैप्चर की ज़रूरत है, `init` कॉल करें। यह कैप्चर को पहले से लोड कर देता है।

```javascript
import { ByUnicoSDK } from 'unico-journey-sdk';

ByUnicoSDK.init({ token });
```

#### 4. कैप्चर खोलें

| पैरामीटर | आवश्यक | मान |
|---|---|---|
| `transactionId` | हाँ | Human Plugin का `id` |
| `token` | हाँ | create से मिला `token` |
| `onFinish` | हाँ | कैप्चर समाप्त होने या व्यक्ति के उसे बंद करने पर कॉल होता है |
| `onWidgetVisibilityChange` | नहीं | कैप्चर के दिखाए या छिपाए जाने पर कॉल होता है |

```javascript
ByUnicoSDK.open({
  transactionId: id, // the Human Plugin id
  token,
  onFinish: ({ type }) => {
    if (type === 'FINISH') {
      // The capture ended. Ask your back-end to read the outcome.
    }
    // type === 'CLOSE': the person closed it before the end.
  },
  // Optional: hide your own overlays while the capture is visible.
  onWidgetVisibilityChange: (visible) => {},
});

// To close it yourself:
ByUnicoSDK.close();
```

`onFinish` को मिलता है:

| फ़ील्ड | विवरण |
|---|---|
| `type` | कैप्चर समाप्त होने पर `'FINISH'`, व्यक्ति के पहले बंद कर देने पर `'CLOSE'` |
| `transaction.redirectUrl` | व्यक्ति को आगे कहाँ भेजना है। केवल `'FINISH'` के लिए मौजूद |

> **चेतावनी:** `onFinish` बताता है कि कैप्चर समाप्त हुआ, यह नहीं कि कैसे। परिणाम केवल आपके back-end पर `GET /v1/processes/{id}` से मिलता है।

`onFinish` का उपयोग व्यक्ति को अगली स्क्रीन पर ले जाने के लिए भी करें, और यदि वह दोबारा शुरू करे तो तुरंत नया process बनाने से बचने के लिए भी।

```mermaid
sequenceDiagram
  participant F as Your front-end
  participant S as Journeys SDK
  participant B as Your back-end
  participant H as Human Plugin
  F->>B: start the capture
  B->>H: POST /v1/processes (Journey flow)
  H-->>B: 201, id + token + link
  B-->>F: id + token
  F->>S: init({ token })
  F->>S: open({ transactionId: id, token, onFinish })
  Note over S: capture
  S-->>F: onFinish
  F->>B: capture ended
  B->>H: GET /v1/processes/{id}
  H-->>B: 200, final state
```

#### समस्या निवारण

- **Flow टूट जाता है या अजीब व्यवहार करता है।** सुनिश्चित करें कि आपकी कोई script DOM में SDK के iFrame को नहीं बदलती।
- **कैप्चर अलग दिखता है।** Tag selectors जैसे व्यापक CSS नियम iFrame तक पहुँच सकते हैं। SDK के अपने ids और classes `unico` से शुरू होते हैं।
- **अपडेट के बाद अप्रत्याशित errors।** SDK को केवल npm या yarn से इंस्टॉल करें, और उसकी फ़ाइलें कभी संपादित न करें।

> **जानकारी: टेस्टिंग**
>
> कैप्चर को end to end टेस्ट करने से पहले ब्राउज़र DevTools बंद कर दें। खुला DevTools submission को ब्लॉक कर देता है।

> **चेतावनी: असमर्थित सेटअप**
>
> - **मोबाइल WebView के अंदर SDK।** किसी ऐप में, इसके बजाय `link` खोलें। [Android](/hi/human-plugin/integrations/android), [iOS](/hi/human-plugin/integrations/ios), [Ionic](/hi/human-plugin/integrations/ionic), [React Native](/hi/human-plugin/integrations/react-native) और [Flutter](/hi/human-plugin/integrations/flutter) गाइड देखें।
> - **कैप्चर की ओर इशारा करता आपका अपना `<iframe>`।** SDK का उपयोग करें, जो iFrame को प्रबंधित करता है।