1.0.1 • Published 3 years ago
qr-scanner-maa v1.0.1
Based on code-kotis/qr-code-scanner
QR scanner frame to embed to your project as an iframe. You can communicate with it using postMessage
. You can switch cameras. Fallback to single image if streaming is not supported.
Features
Switch camera
Fallback to single image scan
Encapsulated logic in iframe and communicate with it through postMessage
Listen for scan results and other events through
window.addEventListener
Installation
Clone this repo
git clone https://github.com/maa105/qr-code-scanner
Installation
npm install
Run (Dev)
npm run start
Build
npm run build
Move dist folder to your app and use the
index.html
in your app as src ofiframe
communicate with iframe through:
6.1. listen to events:
window.addEventListener('message', (message) => {
if(message.data.event === 'scan-result') {
console.log('Scan Result: ', message.data.result);
}
else if(message.data.event === 'init-status') {
if(message.data.streaming) {
console.log('Cameras available:', message.data.devices);
console.log('Selected camera:', message.data.devices[message.data.selected]);
}
else {
console.log('Fallback use postMessage { command: "scan" }');
}
}
else if(message.data.event === 'next-device-result') {
if(message.data.success) {
console.log('Cameras available:', message.data.devices);
console.log('Selected camera:', message.data.devices[message.data.selected]);
}
else {
console.log('OOPS');
}
}
});
6.2. send commands through postMessage
document.getElementById('qr-scanner-frame').contentWindow.postMessage({
command: 'next-device'
});
// only use incase streaming is false
document.getElementById('qr-scanner-frame').contentWindow.postMessage({
command: 'scan'
});