Replies: 19 comments 14 replies
-
|
maybe start with a code condition checking if an extra css file exists and if not use the current webpage css? |
Beta Was this translation helpful? Give feedback.
-
|
Oh cool, yes, improvement is definitely needed here. I discovered this library long ago, when it was still unreliable (reading garbage every other time). Then I noticed it switched to the new JS code backend and now it works much better. Today I went back to this topic and tried to build a simple app prototype around it. And failed so far. The problem is that the camera view is completely uncontrollable. It's impossible to fit it into any given size constraints defined by an app UI. I spent the last couple hours hacking things away and redoing all the layout internally done by the library. But new problems appeared. Nothing lines up, and the layout and appearance is totally unreliable. I was tempted to just throw all of the overlays out of the window and doing it myself. Trouble is, there's no way to tell when a code was discovered, that's the green bars around the scan box. So I still need those. My top priority here is that the scanner view must be usable in a box of a fixed size. It must obey that size and fit itself into that, it must never change the size of that box or draw anything outside of it. Ideally it should cover the box and center itself in there. And when the window resizes, it should update its layout accordingly on its own. It would be helpful if I could specify the QR scan box size (inside the shaded area) as relative to the minimum view length instead of absolute pixels. That lets it adapt to different screen sizes more easily. Again, when the window resizes, that number needs to be updated automatically. (This cannot be done now without stopping and restarting the scan video because that box size is a start parameter.) I don't need any localisation because there's no text in that view anyway. More events might be useful to be able to use custom detection indicators. So I'm suspending my work on this now and see what's happening here. My prototype isn't time critical so I can wait and see what improvements come here. On the API side: I'd like to get more information about the scanned QR code (raw bytes, error correction level, content mode, mask pattern). And I'd like to change the scan box size (within shaded area) on the fly (handy if you notice there are too many codes next to each other). Is it possible to reduce the set of supported codes to reduce the file size? That thing is huge and I just need QR codes, not a hundred others I'll never see (and that are irrelevant in my application). If my app says "scan that QR code" and then it finds a barcode, that's stupid. |
Beta Was this translation helpful? Give feedback.
-
|
The layot issue is a fact, I also came across this problem |
Beta Was this translation helpful? Give feedback.
-
|
yeah I noticed that the mobile orientation ruins the canvas too. |
Beta Was this translation helpful? Give feedback.
-
|
Some of my pure UI thoughts https://www.figma.com/file/SdXeVf1pBoE9lcfjhYtFcd/Html5Qrcode?node-id=0%3A1 |
Beta Was this translation helpful? Give feedback.
-
|
Hello, please could you help, I am using Intascan library, but it is not working on the mobile browser. |
Beta Was this translation helpful? Give feedback.
-
|
https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/ Give this one a try! Hope this helps |
Beta Was this translation helpful? Give feedback.
-
|
@mebjas with the present version, how can we create scanners like in figma design file |
Beta Was this translation helpful? Give feedback.
-
|
It is impossible to download the library from an android phone |
Beta Was this translation helpful? Give feedback.
-
|
what do you mean download the library from an android phone? |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I did not work with the library yet, but I will in the next months, because my rental-system needs a feature to scan items and it needs to be web based. So I will be invested in making the UI work with my design and here are my early ideas:
|
Beta Was this translation helpful? Give feedback.
-
|
Sounds great to me! Happy to discuss offline / online on the goals and review the PRs. |
Beta Was this translation helpful? Give feedback.
-
|
Hi! Just stumbled across this great looking project while scoping for a current project. I'm a full stack developer, but with a heavy leaning into front-end UI/UX. I've been looking for an OSS side-project to contribute to, and think I could have a lot to offer. |
Beta Was this translation helpful? Give feedback.
-
|
Sounds great to me! Happy to discuss offline / online on the goals and review the PRs. |
Beta Was this translation helpful? Give feedback.
-
|
Great. I'm just coming out of a busy patch, so going to take a bit of time to get familiar with the codebase and will then think about the best way to share my thoughts/ideas. |
Beta Was this translation helpful? Give feedback.
-
|
I mean, you need to scan the qrcode through your cell phone webcam.
Connecting the phone with the website. And I tried the library but nothing
works
Le vendredi 17 septembre 2021, minhaz ***@***.***> a écrit :
… what do you mean download the library from an android phone?
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#213 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ARQLTJJA2W373Q7AZWOB7D3UCMT7NANCNFSM45Y7DZRA>
.
|
Beta Was this translation helpful? Give feedback.
-
|
Does the demo page work - qrcode.minhazav.dev |
Beta Was this translation helpful? Give feedback.
-
|
Not sure if I'm posting this in the correct place. I am using the Html5Qrcode source successfully and was wondering how I would insert code to add a toggle to access on/off for the flashlight in my code. I found the support for flashlight option here: https://github.com/lafriks-fork/html5-qrcode/commit/23c8e76975b34947da2c783b366583c42c85edde This is my settings before I call the camera: const config = { fps: 60, html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback); |
Beta Was this translation helpful? Give feedback.
-
|
Planning to add support for this soon - please subscribe to #129 |
Beta Was this translation helpful? Give feedback.
-
|
I am not using the Html5QrcodeScanner Ui I am using the Html5Qrcode Version
because I am coding a web app for my delivery drivers
…On Thu, Sep 30, 2021 at 10:12 AM minhaz ***@***.***> wrote:
Does the demo page work - qrcode.minhazav.dev
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#213 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AVZQNSX734T2XX7H3WD5EILUER46FANCNFSM45Y7DZRA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
Beta Was this translation helpful? Give feedback.
-
|
How do you do it ?
Le jeudi 30 septembre 2021, rodneystover ***@***.***> a
écrit :
… I am not using the Html5QrcodeScanner Ui I am using the Html5Qrcode Version
because I am coding a web app for my delivery drivers
On Thu, Sep 30, 2021 at 10:12 AM minhaz ***@***.***> wrote:
> Does the demo page work - qrcode.minhazav.dev
>
> —
> You are receiving this because you commented.
> Reply to this email directly, view it on GitHub
> <#213#
discussioncomment-1409693>,
> or unsubscribe
> <https://github.com/notifications/unsubscribe-auth/
AVZQNSX734T2XX7H3WD5EILUER46FANCNFSM45Y7DZRA>
> .
> Triage notifications on the go with GitHub Mobile for iOS
> <https://apps.apple.com/app/apple-store/id1477376905?ct=
notification-email&mt=8&pt=524675>
> or Android
> <https://play.google.com/store/apps/details?id=com.
github.android&referrer=utm_campaign%3Dnotification-email%
26utm_medium%3Demail%26utm_source%3Dgithub>.
>
>
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#213 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ARQLTJI3N5W6X4RUGPLCC4DUESL3FANCNFSM45Y7DZRA>
.
|
Beta Was this translation helpful? Give feedback.
-
|
Here is the javascript code I am using to make it work. I have it working
as a progressive web app on iphone 8.
I am able to scan use continuous scanning mode or a single barcode mode and
have a confirmation beep on successful scan. If the barcode has already
been scanned it does a different type of beep. I am just wanting to add a
flashlight toggle switch in case scanning in low light conditions.
<script>
//------------------- barcode scanner ----------------------//
/** define scanning mode **/
// c - continous
// s - single
var scanMode = '<?php echo $scanMode;?>';
/** define target div container **/
const html5QrCode = new Html5Qrcode("reader");
/** create delay to prevent repeat scanning of same barcode **/
var sleep = function (ms) {
let now = Date.now(), end = now + ms;
while (now < end) { now = Date.now(); }
};
/** Create beep sound **/
var audioCtx = new (window.AudioContext || window.webkitAudioContext ||
window.audioContext);
//All arguments are optional:
//duration of the tone in milliseconds. Default is 500
//frequency of the tone in hertz. default is 440
//volume of the tone. Default is 1, off is 0.
//type of tone. Possible values are sine, square, sawtooth, triangle, and
custom. Default is sine.
//callback to use on end of tone
function beep(duration, frequency, volume, type, callback) {
var oscillator = audioCtx.createOscillator();
var gainNode = audioCtx.createGain();
oscillator.connect(gainNode);
gainNode.connect(audioCtx.destination);
if (volume){gainNode.gain.value = volume;}
if (frequency){oscillator.frequency.value = frequency;}
if (type){oscillator.type = type;}
if (callback){oscillator.onended = callback;}
oscillator.start(audioCtx.currentTime);
oscillator.stop(audioCtx.currentTime + ((duration || 500) / 1000));
};
/** successful scan actions **/
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
/** If barcode type is XXXXXXXXX retrieve only tracking number **/
const barcodeDetails = decodedText.split('\\n');
var howMany = barcodeDetails.length;
if (howMany != 1) {
decodedText = barcodeDetails[0];
}
if (scanMode === 's') { // single scan mode
/** Beep **/
beep(50, 2350, 1, 'square');
/** Store scan result **/
$( "#scanResult" ).val(decodedText);
/** Stop scanning. **/
html5QrCode.stop();
/** Clear the rendered surface. **/
html5QrCode.clear();
/** Return result to referring URL **/
$( "#submitscan" ).submit();
}
if (scanMode === 'c') { // continuous scan mode
/** Check for duplicate scan **/
newScan = document.getElementById("scanResult").value;
var arr = newScan.split(",");
if (arr.indexOf(decodedText) !== -1) { // duplicate scan
document.getElementById('scanMessage').innerHTML="Parcel Already Scanned";
beep(10, 150, .09, 'square');
sleep(100); // sound delay
beep(10, 150, .09, 'square');
sleep(2000); // 2 second delay
} else { // not duplicate scan
$( "#scanMessage" ).html('Parcel Scan Successful');
beep(50, 2350, 1, 'square');
/** Store scan result **/
if (!newScan) { // first scan
newScanValue = decodedText;
} else { // > than first scan so add comma delimiter
newScanValue = newScan+','+decodedText;
}
$( "#scanResult" ).val(newScanValue);
sleep(1000); // 1 second delay
}
}
};
/** define scanner default settings **/
const config = { fps: 60, // sets the framerate to 60 frame per second
qrbox: 275, // sets only 275 X 275 region of viewfinder to scannable, rest
shaded.
aspectRatio: 1.0,
experimentalFeatures: {
useBarCodeDetectorIfSupported: true
}
};
/** load scanner using back camera **/
html5QrCode.start({ facingMode: { exact: "environment"} }, config,
qrCodeSuccessCallback);
/** User done scanning -> return results to referrer **/
function endScan() {
$( "#scanMessage" ).html('');
beep(20, 350, .09, 'sine');
/** End scanning. **/
html5QrCode.stop();
/** Clear the rendered surface. **/
html5QrCode.clear();
/** Return results to referring URL **/
$( "#submitscan" ).submit();
}
/** User cancelled scan -> return to referrer **/
function cancelScan() {
$( "#scanMessage" ).html('');
beep(20, 350, .09, 'sine');
/** Stop scanning. */
html5QrCode.stop();
/** Clear the rendered surface. */
html5QrCode.clear();
/** Redirect to referrer **/
location.href="<?php echo $referrer;?>?a=<?php echo $return_action;?>";
}
//------------------- end barcode scanner ----------------------//
</script>
…On Thu, Sep 30, 2021 at 12:45 PM Dvdben ***@***.***> wrote:
How do you do it ?
Le jeudi 30 septembre 2021, rodneystover ***@***.***> a
écrit :
> I am not using the Html5QrcodeScanner Ui I am using the Html5Qrcode
Version
> because I am coding a web app for my delivery drivers
>
>
> On Thu, Sep 30, 2021 at 10:12 AM minhaz ***@***.***> wrote:
>
> > Does the demo page work - qrcode.minhazav.dev
> >
> > —
> > You are receiving this because you commented.
> > Reply to this email directly, view it on GitHub
> > <#213#
> discussioncomment-1409693>,
> > or unsubscribe
> > <https://github.com/notifications/unsubscribe-auth/
> AVZQNSX734T2XX7H3WD5EILUER46FANCNFSM45Y7DZRA>
> > .
> > Triage notifications on the go with GitHub Mobile for iOS
> > <https://apps.apple.com/app/apple-store/id1477376905?ct=
> notification-email&mt=8&pt=524675>
> > or Android
> > <https://play.google.com/store/apps/details?id=com.
> github.android&referrer=utm_campaign%3Dnotification-email%
> 26utm_medium%3Demail%26utm_source%3Dgithub>.
> >
> >
>
> —
> You are receiving this because you commented.
> Reply to this email directly, view it on GitHub
> <
#213 (comment)
>,
> or unsubscribe
> <
https://github.com/notifications/unsubscribe-auth/ARQLTJI3N5W6X4RUGPLCC4DUESL3FANCNFSM45Y7DZRA
>
> .
>
—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
<#213 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AVZQNSUFHQQG6TY73MBOY7DUESO3XANCNFSM45Y7DZRA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
|
Beta Was this translation helpful? Give feedback.
-
|
Everyone interested in this item - I strongly encourage you to subscribe to #207 - I am thinking to take a stab at this for version 2.1.3 starting with svg icons. Also, still looking for some UX help on the potential UX |
Beta Was this translation helpful? Give feedback.
-
|
Thanks you very much.
God bless you.
Le ven. 24 déc. 2021 à 17:22, minhaz ***@***.***> a écrit :
… https://blog.minhazav.dev/QR-and-barcode-scanner-using-html-and-javascript/
Give this one a try! Hope this helps
—
Reply to this email directly, view it on GitHub
<#213 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASWSQ22YKTM42DVA3DJ4O73USSM5VANCNFSM45Y7DZRA>
.
Triage notifications on the go with GitHub Mobile for iOS
<https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675>
or Android
<https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.
You are receiving this because you commented.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
|
I'm not core developer, but I would suggest if you find any way to remove the camera selection in case of multiple cameras. Only front and back would do. Else users might get confused if they have multiple cameras in back and not able to understand which one to select. |
Beta Was this translation helpful? Give feedback.
-
|
Besides internationalization, my main problem at the moment is that every style is inlined, a big step forward in order to allow us to customize the UI with little touches would be to use CSS classes, and even an event fired whenever the scanner changes state, so we could adjust other parts of the UI according to the state of the scanner. In my case I would like to be able to overlay a top bar over the scanner, but at the moment it would also overlap the pre-scanner UI where the user must press the button to request permissions or switch camera. So I can't show properly my bar with the scanned info because it would overlap the pre-scanner text. I'm sure that I haven't explained my self properly, but the idea is: if the scanner used CSS classes and/or fired events, then I could do my job in one minute. I'm going to try to implement this in a local fork, I guess that given that the plan is to rewrite all the UI then such PR would not be accepted for the project, otherwise I wouldn't mind to provide it. |
Beta Was this translation helpful? Give feedback.
-
Thanks for bringing this up, +1, I think it would be helpful for both end users and devs. Is there a general design patter for this kind of requirement? |
Beta Was this translation helpful? Give feedback.
-
Here are a few ideas in general:
|
Beta Was this translation helpful? Give feedback.
-
Yes, These ideas are perfect that I would like to suggest too. For UI customization there should be separate CSS files based on class selectors. |
Beta Was this translation helpful? Give feedback.
-
|
Further suggestions:
|
Beta Was this translation helpful? Give feedback.
-
|
(WIP) Some major UI changes coming soon: https://scanapp.org/beta :) |
Beta Was this translation helpful? Give feedback.
-
|
Interesting. Seems to work okay for a medium size QR code. When pointing at the Data Matrix code right next to it, the live image hangs for a moment, then it can decode Data Matrix codes multiple times. When pointing back to the QR code, nothing happens. As if there was nothing to see. Have to close and reopen the page to have it decode QR again. The first Data Matrix sight still breaks QR detection. (Tested in Brave/Android) |
Beta Was this translation helpful? Give feedback.
-
|
Some of the proposals will be implemented in scanapp-org/imagecodes More info: #747 |
Beta Was this translation helpful? Give feedback.
-
Hi everyone, I'm going to start working on a UI overhaul for this library - particularly the end to end scanner which can be directly integrated to any existing website for easy code scanning.
So far the UI was built based on my intuition, but I am not a qualified UXR/UXD and may have a lot of bias. In the next version I'd really appreciate some UXR/UXD inputs on the design, so we can address discoverability, comprehension, A11y & internationalization issues that exist in the library currently.
I'm super happy to discuss and implement ideas so it's great experience for both developers who use this library and the end users scanning the codes out in the world.
Some of the very early ideas I'd like to fix or improve are tracked in #207
Beta Was this translation helpful? Give feedback.
All reactions