@microblink/blinkinput-in-browser-sdk
Version:
A simple barcode scanning library for WebAssembly-enabled browsers.
80 lines (64 loc) • 2.37 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>BlinkInput UI Component</title>
<script type="module" src="../dist/blinkinput-in-browser/blinkinput-in-browser.esm.js"></script>
<script nomodule src="../dist/blinkinput-in-browser.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;
}
blinkinput-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>
<blinkinput-in-browser engine-location="http://localhost:3333/resources" license-key="sRwAAAYJbG9jYWxob3N0r/lOPmg/w35CpCHVK5E/ZoJMKdvW+Wvm+bnl7dcvB66IJIXgFWlhcjEfWxFskaY1LvyxGO3lctX/CbCPvcuou56L1oab6cq0N26gx0l5wCwqDFhjWzko0qbeSFECubjBOaDmkvEjy8YQ38cFE6g6w8j2o5b5LeR4VJPGQlV4n2eVdL9INsBLaKzMk2Vi/p0K9Mot9LH/xQeWy/xBBLrPEy5Cu5rNUP7X4G54e+W31w9Xp6+s" recognizers="BarcodeRecognizer"></blinkinput-in-browser>
<script type="text/javascript">
const blinkInput = document.querySelector('blinkinput-in-browser');
blinkInput.addEventListener('fatalError', (ev) => {
console.log('fatalError', ev.detail);
});
blinkInput.addEventListener('ready', (ev) => {
console.log('ready', ev.detail);
});
blinkInput.addEventListener('scanError', (ev) => {
console.log('scanError', ev.detail);
});
blinkInput.addEventListener('scanSuccess', (ev) => {
console.log('scanSuccess', ev.detail);
});
blinkInput.addEventListener('feedback', (ev) => {
console.log('feedback', ev.detail);
});
</script>
</body>
</html>