@microblink/blinkid-imagecapture-in-browser-sdk
Version:
A smart image capturing library for WebAssembly-enabled browsers.
87 lines (70 loc) • 2.59 kB
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>BlinkID ImageCapture UI Component</title>
<script type="module" src="../dist/blinkid-imagecapture-in-browser/blinkid-imagecapture-in-browser.esm.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;
}
blinkid-imagecapture-in-browser {
max-width: 400px;
/* Customization of UI - see variables in src/components/shared/styles/_globals.scss */
/*
--mb-component-background: red;
--mb-component-action-label: none;
--mb-component-border-width: 0;
--mb-component-action-buttons-width: 100%;
--mb-component-action-buttons-justify-content: space-evenly;
--mb-component-button-size: 48px;
--mb-component-button-border-radius: 24px;
*/
}
</style>
</head>
<body>
<blinkid-imagecapture-in-browser engine-location="http://localhost:3333/resources" license-key="sRwAAAYJbG9jYWxob3N0r/lOPgo/w35CpGHWKsMXyV8pLjKmj0+9eFjvfX0TgjpvuedjxBx/LIsuo5sKOHD+5Uwjw1z4y10qbq/lEwUJiXzdSnihwZqLno0gfabRPsF/o2SyH7C5al21APZBfvwXx6PMvxe6Ze7SIGu0wach/76eKVlLKbVp2vxI7tVa42cnIQcM0YyD1UqcCI/9fomjgILTvNJHoMjAvy+ptZRw" recognizers="BlinkIdImageCaptureRecognizer"></blinkid-imagecapture-in-browser>
<script type="text/javascript">
const el = document.querySelector('blinkid-imagecapture-in-browser');
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('scanSuccess', (ev) => {
console.log('scanSuccess', ev.detail);
/**
* Since this SDK is intended to be used in combination with backend services
* for data extraction, it's required to manually set the success state.
*
* See 'ui/examples' folder to see how to communicate with Microblink backend.
*/
el.setUiState('SUCCESS');
});
el.addEventListener('feedback', (ev) => {
console.log('feedback', ev.detail);
});
</script>
</body>
</html>