Skip to content

Commit

Permalink
Fixed CDN problems in UI demo
Browse files Browse the repository at this point in the history
  • Loading branch information
vjekoart committed Apr 20, 2021
1 parent 6ff6c60 commit d7e732a
Showing 1 changed file with 86 additions and 45 deletions.
131 changes: 86 additions & 45 deletions ui/demo.html
Original file line number Diff line number Diff line change
@@ -135,7 +135,7 @@
</style>
<script type="module" src="https://unpkg.com/@microblink/[email protected]/ui/dist/blinkid-imagecapture-in-browser/blinkid-imagecapture-in-browser.esm.js"></script>
<script nomodule src="https://unpkg.com/@microblink/[email protected]/ui/dist/blinkid-imagecapture-in-browser.js"></script>
<script src="../client-dist/client-library.js"></script>
<script src="https://unpkg.com/@microblink/[email protected]/client-library/dist/client-library.js"></script>
<script type="text/javascript">
window.getSafePathname = p => p[ p.length - 1 ] === '/' ? p : p.split( '/' ).slice( 0, -1 ).join( '/' ) + '/';
window.licenseKey = 'sRwAAAYJbG9jYWxob3N0r/lOPgo/w35CpGFWKzU9YA52R5wKkqk3QzgC8sVNFr63JqfW1zbtcPPm5UFyHdr1PJpDffHWEhFwg30vKEfjDh6hbIfYtS7XmF1KQOvJhHktAkFqst98Xza16f6WzKUIsx8kqaha3ahB8dtmJV8vLRyLkXFleLaYMOrsOhgF2YHyXlWc5Y8PpADxuwuzy6HJexW3ydqlf9EljYlnJymLIncUiRyo';
@@ -171,22 +171,30 @@ <h2>Minimal example</h2>
(function (){
const el = document.querySelector('#example-minimal blinkid-imagecapture-in-browser');

/* [TEMPORARY FIX]
* Use basic WebAssembly builds since most performant option requires server setup and unpkg.com, which is used
* for examples, doesn't support COOP and COEP headers.
*
* For more information see "Integration" section in the official documentation.
*/
el.wasmType = "BASIC";

el.engineLocation = window.engineLocation;
el.licenseKey = window.licenseKey;
el.recognizers = ['BlinkIdImageCaptureRecognizer'];

const configuration = {
apiLocation: "https://demoapi.microblink.com",
healthcheckEndpoint: "/v1/hc"
};
apiLocation: "https://demoapi.microblink.com",
healthcheckEndpoint: "/v1/hc"
};

const client = new Client.Client(Client.ApiType.SelfHosted, configuration);
const client = new Client.Client(Client.ApiType.SelfHosted, configuration);

client.getHealthcheck()
.then(() => { /* Do nothing */ })
.catch((response) => {
el.setUiMessage('ERROR_FEEDBACK', 'Cannot access API!');
});
client.getHealthcheck()
.then(() => { /* Do nothing */ })
.catch((response) => {
el.setUiMessage('ERROR_FEEDBACK', 'Cannot access API!');
});


el.addEventListener('scanError', ev => {
@@ -197,40 +205,41 @@ <h2>Minimal example</h2>

el.addEventListener('scanSuccess', ev => {
console.log('scanSuccess', ev.detail);
if (!ev.detail.recognizer.frontSideCameraFrame) {
console.log("Could not extract front image of a document.");
el.setUiState('ERROR');
return;
}

// Show loading screen in UI component
el.setUiState('LOADING');
if (!ev.detail.recognizer.frontSideCameraFrame) {
console.log("Could not extract front image of a document.");
el.setUiState('ERROR');
return;
}

const imageData = ev.detail.recognizer.frontSideCameraFrame;
const image64 = client.imageDataToBase64(imageData);
// Show loading screen in UI component
el.setUiState('LOADING');

const payload = {
'imageSource': image64
};
const imageData = ev.detail.recognizer.frontSideCameraFrame;
const image64 = client.imageDataToBase64(imageData);

client.recognize('/v1/recognizers/blinkid', payload)
.then((results) => {
const recognitionResults = results.response.data.result;
console.log('API recognition results', recognitionResults);

/* Handle case when results are empty */
if (recognitionResults.recognitionStatus === 'EMPTY') {
console.warn('API processing returned empty results!');
el.setUiState('ERROR');
return;
}
const payload = {
'imageSource': image64
};

el.setUiState('SUCCESS');
})
.catch((error) => {
console.error('API recognition error', error);
el.setUiState('ERROR', error.error.message);
});
client.recognize('/v1/recognizers/blinkid', payload)
.then((results) => {
const recognitionResults = results.response.data.result;
console.log('API recognition results', recognitionResults);

/* Handle case when results are empty */
if (recognitionResults.recognitionStatus === 'EMPTY') {
console.warn('API processing returned empty results!');
el.setUiState('ERROR');
return;
}

el.setUiState('SUCCESS');
})
.catch((error) => {
console.error('API recognition error', error);
el.setUiState('ERROR', error.error.message);
});
});
})();
</script>
@@ -254,6 +263,14 @@ <h2>Scan both sides</h2>
(function (){
const el = document.querySelector('#example-combined blinkid-imagecapture-in-browser');

/* [TEMPORARY FIX]
* Use basic WebAssembly builds since most performant option requires server setup and unpkg.com, which is used
* for examples, doesn't support COOP and COEP headers.
*
* For more information see "Integration" section in the official documentation.
*/
el.wasmType = "BASIC";

el.engineLocation = window.engineLocation;
el.licenseKey = window.licenseKey;

@@ -275,7 +292,7 @@ <h2>Scan both sides</h2>
.catch((response) => {
el.setUiMessage('ERROR_FEEDBACK', 'Cannot access API!');
});

el.addEventListener('scanError', ev => {
console.log('scanError', ev.detail);

@@ -302,7 +319,7 @@ <h2>Scan both sides</h2>
el.setUiState('ERROR');
return;
}

if (ev.detail.recognizer.processingStatus === 0 && ev.detail.recognizer.state === 2) {
// Show loading screen in UI component
el.setUiState('LOADING');
@@ -369,11 +386,19 @@ <h2>Custom messages</h2>
(function (){
const el = document.querySelector('#example-localization blinkid-imagecapture-in-browser');

/* [TEMPORARY FIX]
* Use basic WebAssembly builds since most performant option requires server setup and unpkg.com, which is used
* for examples, doesn't support COOP and COEP headers.
*
* For more information see "Integration" section in the official documentation.
*/
el.wasmType = "BASIC";

el.engineLocation = window.engineLocation;
el.licenseKey = window.licenseKey;
el.recognizers = ['BlinkIdImageCaptureRecognizer'];
window.setTimeout(() => {
el.translations = {
el.translations = {
'action-message': 'Alternative CTA'
};
}, 3000);
@@ -464,12 +489,20 @@ <h2>RTL support</h2>
(function (){
const el = document.querySelector('#example-localization-rtl blinkid-imagecapture-in-browser');

/* [TEMPORARY FIX]
* Use basic WebAssembly builds since most performant option requires server setup and unpkg.com, which is used
* for examples, doesn't support COOP and COEP headers.
*
* For more information see "Integration" section in the official documentation.
*/
el.wasmType = "BASIC";

el.engineLocation = window.engineLocation;
el.licenseKey = window.licenseKey;
el.recognizers = ['BlinkIdImageCaptureRecognizer'];

window.setTimeout(() => {
el.translations = {
el.translations = {
'action-message': 'Alternative CTA'
};
}, 3000);
@@ -606,6 +639,14 @@ <h3>CSS variables</h3>
(function (){
const el = document.querySelector('#example-customization blinkid-imagecapture-in-browser');

/* [TEMPORARY FIX]
* Use basic WebAssembly builds since most performant option requires server setup and unpkg.com, which is used
* for examples, doesn't support COOP and COEP headers.
*
* For more information see "Integration" section in the official documentation.
*/
el.wasmType = "BASIC";

el.engineLocation = window.engineLocation;
el.licenseKey = window.licenseKey;
el.recognizers = ['BlinkIdImageCaptureRecognizer'];
@@ -732,7 +773,7 @@ <h3>CSS variables</h3>

customizatorForm.addEventListener('submit', ev => {
ev.preventDefault();

document.querySelector(
'#example-customization .box'
).style.background = document.getElementById('customization-background').value;
@@ -751,4 +792,4 @@ <h3>CSS variables</h3>
</script>

</body>
</html>
</html>

0 comments on commit d7e732a

Please sign in to comment.