-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
165 lines (140 loc) · 6.88 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Example: BlinkID ImageCapture UI</title>
<!-- Import UI component which includes WASM library -->
<script type="module" src="https://unpkg.com/@microblink/[email protected]/ui/dist/blinkid-imagecapture-in-browser/blinkid-imagecapture-in-browser.esm.js"></script>
<!-- Include client library for straightforward communication with backend services -->
<script src="https://unpkg.com/@microblink/[email protected]/client-library/dist/client-library.js"></script>
<!-- [OPTIONAL] Include WASM library if filtering by document type is required -->
<!--<script src="https://unpkg.com/@microblink/[email protected]/dist/blinkid-imagecapture-sdk.js"></script>-->
<style type="text/css">
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
html {
font-family: "Avenir Next", sans-serif;
}
body {
background-color: #fff;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
</style>
</head>
<body>
<!-- It's possible to obtain a free trial license key on microblink.com -->
<blinkid-imagecapture-in-browser
license-key="sRwAAAYJbG9jYWxob3N0r/lOPgo/w35CpGFWKzU9YA52R5wKkqk3QzgC8sVNFr63JqfW1zbtcPPm5UFyHdr1PJpDffHWEhFwg30vKEfjDh6hbIfYtS7XmF1KQOvJhHktAkFqst98Xza16f6WzKUIsx8kqaha3ahB8dtmJV8vLRyLkXFleLaYMOrsOhgF2YHyXlWc5Y8PpADxuwuzy6HJexW3ydqlf9EljYlnJymLIncUiRyo"
recognizers="BlinkIdImageCaptureRecognizer"
></blinkid-imagecapture-in-browser>
<script type="text/javascript">
function run()
{
// Important: if attributes or properties are changed, whole component is rerendered
const el = document.querySelector( "blinkid-imagecapture-in-browser" );
if ( window.location.hostname === "blinkid.github.io" )
{
el.licenseKey = "sRwAAAYRYmxpbmtpZC5naXRodWIuaW+qBF9heYYlTvZbvmaEOIXmr4oS1aUAbMPUohDAa8GLyaU+DaNffm2vA2MytNo+fTEUOhvWu2dQD7Arrn+ASpDU0vByHSkgPenaVjy1GJ3M4wxBr273hW93Y5JiT7I8F/vhlh9q8H2qdOqvJBptMc2t9RrpsTp3urKrnCjo2TfmTkR2x7d5+3j3CmA+LfmJK6niIzZyDoGw3scLBCsioZEMBUBT58g=";
}
el.engineLocation = "https://unpkg.com/@microblink/[email protected]/resources/";
// Create instance of client library - for more information see `client-library/README.md` file
const client = new Client.Client(
Client.ApiType.SelfHosted,
{
apiLocation: "https://demoapi.microblink.com"
}
);
/**
* UI component will extract a document image, which can be recognized on the backend.
*/
el.addEventListener
(
"scanSuccess",
ev =>
{
console.log( "scanSuccess: extracted image from WASM library", ev.detail );
/**
* [OPTIONAL] Filter document based on provided class info.
*
* Keep in mind that enums with codes for country, region and document types are
* included in the WASM library.
*/
/*if ( ev.detail.recognizer.classInfo.country === BlinkIDImageCaptureSDK.Country.CROATIA )
{
console.log( "What should I do with Croatian document?" );
}*/
// Show error or loading screen in UI component based on extracted image
if ( !ev.detail.recognizer.frontSideCameraFrame )
{
el.setUiState( "ERROR" );
return;
}
else
{
el.setUiState( "LOADING" );
}
// Send image to web API for processing
const payload =
{
// Image from WASM library should be converted to Base64 from ImageData format.
"imageSource": client.imageDataToBase64( ev.detail.recognizer.frontSideCameraFrame )
};
client.recognize( "/v1/recognizers/blinkid", payload )
.then( ( results ) =>
{
const recognitionResults = results.response.data.result;
console.log( "API recognition results", recognitionResults );
if ( recognitionResults.recognitionStatus === "EMPTY" )
{
console.warn( "API processing returned empty results." );
el.setUiState( "ERROR" );
return;
}
// Do something with the results and notify the user
el.setUiState( "SUCCESS" );
} )
.catch( ( error ) =>
{
console.error( "API recognition error", error );
el.setUiState( "ERROR" );
} );
}
);
/**
* Other events
*/
el.addEventListener
(
"fatalError",
ev => console.log( "fatalError", ev.detail )
);
el.addEventListener
(
"ready",
ev => console.log( "ready", ev.detail )
);
el.addEventListener
(
"scanError",
ev => console.log( "scanError", ev.detail )
);
el.addEventListener
(
"feedback",
ev => console.log( "feedback", ev.detail )
);
}
window.addEventListener( "DOMContentLoaded", ev => run() );
</script>
</body>
</html>