[Feature request] Add support for flash Light #129

stefanodias · 2020-10-19T17:19:00Z

Hello, in many cases we need Flash Light to reading QrCode, it's possible?

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

sondreb · 2022-07-04T22:19:30Z

Anything happening with the "flashlight" branch/feature? Would love to have that feature available, and I see there is a branch that was worked on for it in 2021.

ROBERT-MCDOWELL · 2022-07-04T22:46:40Z

you could try to work on it and create a PR?

ROBERT-MCDOWELL · 2022-07-04T22:51:36Z

it seems to be ready for version 3
lafriks-fork@23c8e76
a PR must be created by the forker or contact them to speed up things.

sondreb · 2022-07-05T16:03:15Z

@lafriks @mebjas ... any chance getting this merged?

nexorianus · 2022-10-24T09:28:10Z

giving this a push!
would also love to see this in the repo

mebjas · 2022-10-29T15:15:25Z

This is already possible with Html5Qrcode using applyVideoConstraints(..) API. I suppose I need to expose the current settings of the video track to make it full fledged.

Working on this right now for version 2.2.5. Here's what I plan to do:

Add support for torch button in Html5QrcodeScanner with a configuration (default false) as UI is not that good.
Expose getRunningTrackSettings(..) in both Html5Qrcode and Html5QrcodeScanner.
Make getRunningTrackCapabilities(..), applyVideoConstraints(..) along with the new getRunningTrackSettings(..) non beta and add documentation for all these APIs.
After publishing add blog posts explaining how to enable torch as is with Html5Qrcode.

@returns

### Version 2.2.5 #### Added support for turning `torch` On and Off in `Html5QrcodeScanner`. On supported devices + browsers. This new feature will implement the feature request - [Issue#129](#129) and add support for torch (also called flash) on supported devices and browsers. So far I have confirmed functionality on Samsung Flip 4 Chrome and Internet (Samsung's default browser). This is only supported on `Html5QrcodeScanner` and can be enabled using the config like this. ```ts let html5QrcodeScanner = new Html5QrcodeScanner( "reader", { fps: 10, qrbox: qrboxFunction, // Important notice: this is experimental feature, use it at your // own risk. See documentation in // mebjas@/html5-qrcode/src/experimental-features.ts experimentalFeatures: { useBarCodeDetectorIfSupported: true }, rememberLastUsedCamera: true, aspectRatio: 1.7777778, showTorchButtonIfSupported: true }); ``` The `showTorchButtonIfSupported: true` part is the crucial one. It's off by default for now as I don't like the UI very much. #### Added support for `getRunningTrackSettings()`. Added a new API to get settings (type: [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings)) for running video streams while QR code is being scanned. ```ts /** * Returns the supported settings of the running video track. * * @returns the supported settings of the running video track. * @throws error if the scanning is not in running state. */ public getRunningTrackSettings(): MediaTrackSettings {} ``` This API can be used to check the currently applied settings on the running video stream like weather torch is on or not. #### `getRunningTrackCapabilities(..)` and `applyVideoConstraints(..)` out of beta. Both `Html5Qrcode` and `Html5QrcodeScanner` classes had support for following APIs. ```ts /** * Returns the capabilities of the running video track. * * Note: Should only be called if {@code Html5QrcodeScanner#getState()} * returns {@code Html5QrcodeScannerState#SCANNING} or * {@code Html5QrcodeScannerState#PAUSED}. * * @returns the capabilities of a running video track. * @throws error if the scanning is not in running state. */ public getRunningTrackCapabilities(): MediaTrackCapabilities {} /** * Apply a video constraints on running video track from camera. * * Note: Should only be called if {@code Html5QrcodeScanner#getState()} * returns {@code Html5QrcodeScannerState#SCANNING} or * {@code Html5QrcodeScannerState#PAUSED}. * * @param {MediaTrackConstraints} specifies a variety of video or camera * controls as defined in * https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints * @returns a Promise which succeeds if the passed constraints are applied, * fails otherwise. * @throws error if the scanning is not in running state. */ public applyVideoConstraints(videoConstaints: MediaTrackConstraints) : Promise<any> {} ``` These have now been taken out of beta and publicly documented. More blog articles to be published for these.

mebjas · 2022-10-29T15:44:24Z

The support is now in PR: #570

Also, latest implementation has been deployed to https://scanapp.org (in case any one want to test and share more insights).

So far I have tested and verified it to work on:

Pixel 6 Pro: Chrome
Samsung Flip 4: Chrome and Internet (default samsung browser).

Pixel 6 Pro seems to have another layout issue that I need to fix urgently, so will do that first.

Next steps:

Fix issues in PR and submit.
Make a new release on Github and NPM
Add blog posts with documentation.

@returns

* Add support for torch and make beta APIs non beta. ### Version 2.2.5 #### Added support for turning `torch` On and Off in `Html5QrcodeScanner`. On supported devices + browsers. This new feature will implement the feature request - [Issue#129](#129) and add support for torch (also called flash) on supported devices and browsers. So far I have confirmed functionality on Samsung Flip 4 Chrome and Internet (Samsung's default browser). This is only supported on `Html5QrcodeScanner` and can be enabled using the config like this. ```ts let html5QrcodeScanner = new Html5QrcodeScanner( "reader", { fps: 10, qrbox: qrboxFunction, // Important notice: this is experimental feature, use it at your // own risk. See documentation in // mebjas@/html5-qrcode/src/experimental-features.ts experimentalFeatures: { useBarCodeDetectorIfSupported: true }, rememberLastUsedCamera: true, aspectRatio: 1.7777778, showTorchButtonIfSupported: true }); ``` The `showTorchButtonIfSupported: true` part is the crucial one. It's off by default for now as I don't like the UI very much. #### Added support for `getRunningTrackSettings()`. Added a new API to get settings (type: [MediaTrackSettings](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings)) for running video streams while QR code is being scanned. ```ts /** * Returns the supported settings of the running video track. * * @returns the supported settings of the running video track. * @throws error if the scanning is not in running state. */ public getRunningTrackSettings(): MediaTrackSettings {} ``` This API can be used to check the currently applied settings on the running video stream like weather torch is on or not. #### `getRunningTrackCapabilities(..)` and `applyVideoConstraints(..)` out of beta. Both `Html5Qrcode` and `Html5QrcodeScanner` classes had support for following APIs. ```ts /** * Returns the capabilities of the running video track. * * Note: Should only be called if {@code Html5QrcodeScanner#getState()} * returns {@code Html5QrcodeScannerState#SCANNING} or * {@code Html5QrcodeScannerState#PAUSED}. * * @returns the capabilities of a running video track. * @throws error if the scanning is not in running state. */ public getRunningTrackCapabilities(): MediaTrackCapabilities {} /** * Apply a video constraints on running video track from camera. * * Note: Should only be called if {@code Html5QrcodeScanner#getState()} * returns {@code Html5QrcodeScannerState#SCANNING} or * {@code Html5QrcodeScannerState#PAUSED}. * * @param {MediaTrackConstraints} specifies a variety of video or camera * controls as defined in * https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints * @returns a Promise which succeeds if the passed constraints are applied, * fails otherwise. * @throws error if the scanning is not in running state. */ public applyVideoConstraints(videoConstaints: MediaTrackConstraints) : Promise<any> {} ``` These have now been taken out of beta and publicly documented. More blog articles to be published for these. * Fix stateful error in torch UI If we start() --> enable torch --> stop() And then start() again, the UI was showing `Set torch off` and clicking wouldn't do anything. This is now fixed. * Code review fixed + codacy related fixes. * Update torch-button.ts replace console.error with error callback. * Update torch-button.ts

mebjas · 2022-10-30T05:13:40Z

Feature now submitted and published with version 2.2.6

You can checkout the demo on Android devices (Chrome) on https://scanapp.org or https://qrcode.minhazav.dev.

This is only supported for Html5QrcodeScanner, here's how to use it

let html5QrcodeScanner = new Html5QrcodeScanner(
    "reader",
    {
        fps: 10,
        qrbox: qrboxFunction,
        // Important notice: this is experimental feature, use it at your
        // own risk. See documentation in
        // mebjas@/html5-qrcode/src/experimental-features.ts
        experimentalFeatures: {
            useBarCodeDetectorIfSupported: true
        },
        rememberLastUsedCamera: true,
        aspectRatio: 1.7777778,
        showTorchButtonIfSupported: true
    });

The showTorchButtonIfSupported: true part is the crucial one. It's off by default for now as I don't like the UI very much.

I'll write a blog post on how to use it for Html5Qrcode soon.

mebjas · 2022-10-30T15:35:32Z

The article

diegomariani · 2022-10-31T15:19:45Z

How can I change the language of the buttons and others library information?

nexorianus · 2022-11-02T10:08:25Z

@mebjas when can we expect NPM release of 2.2.6?

mebjas · 2022-11-02T11:04:44Z

It's released. Please check the change logs.

…

On Wed, Nov 2, 2022, 6:08 PM nexorianus ***@***.***> wrote: @mebjas <https:/mebjas> when can we expect NPM release? — Reply to this email directly, view it on GitHub <#129 (comment)>, or unsubscribe <https:/notifications/unsubscribe-auth/AAW6HBNUIRFQSMWFB5Y2EMLWGI4SHANCNFSM4SWN2UNA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

nexorianus · 2022-11-02T11:57:37Z

It's released. Please check the change logs.

here on Github, yes.
but NPM still has v2.2.5 as its latest version.

✗ yarn add [email protected]
yarn add v1.22.19
[1/5] 🔍  Validating package.json...
[2/5] 🔍  Resolving packages...
Couldn't find any versions for "html5-qrcode" that matches "2.2.6"
? Please choose a version of "html5-qrcode" from this list: (Use arrow keys)
❯ 2.2.5 
  2.2.4 
  2.2.3
  ...

mebjas · 2022-11-02T13:18:30Z

Interesting, thanks for reporting this. Will publish asap.

…

On Wed, Nov 2, 2022, 7:57 PM nexorianus ***@***.***> wrote: It's released. Please check the change logs. here on Github, yes. but NPM still has v2.2.5 as its latest version. ✗ yarn add ***@***.*** yarn add v1.22.19 [1/5] 🔍 Validating package.json... [2/5] 🔍 Resolving packages... Couldn't find any versions for "html5-qrcode" that matches "2.2.6" ? Please choose a version of "html5-qrcode" from this list: (Use arrow keys) ❯ 2.2.5 2.2.4 2.2.3 ... — Reply to this email directly, view it on GitHub <#129 (comment)>, or unsubscribe <https:/notifications/unsubscribe-auth/AAW6HBMOJTVDDWSRZC7ZADTWGJJLZANCNFSM4SWN2UNA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

mebjas · 2022-11-02T14:34:44Z

Published: https://www.npmjs.com/package/html5-qrcode/v/2.2.6

stefanodias added enhancement ferature-request labels Oct 19, 2020

lafriks mentioned this issue Jun 21, 2021

Add support for detecting and turning on/off flash light #241

Closed

mebjas added the version 3.0.0 label Dec 20, 2021

mebjas changed the title ~~Flash Light~~ [Feature request] Add support for flash Light Dec 20, 2021

mebjas mentioned this issue Dec 20, 2021

Toggle torchlight during scan with camera #369

Closed

mebjas self-assigned this Oct 29, 2022

mebjas mentioned this issue Oct 29, 2022

Add support for torch and make beta APIs non beta. #570

Merged

mebjas closed this as completed Oct 30, 2022

dvdl16 mentioned this issue May 14, 2023

Implement html5-qrcode Torch/Flashlight feature in frappe.ui.Scanner frappe/frappe#20984

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feature request] Add support for flash Light #129

[Feature request] Add support for flash Light #129

stefanodias commented Oct 19, 2020

sondreb commented Jul 4, 2022

ROBERT-MCDOWELL commented Jul 4, 2022

ROBERT-MCDOWELL commented Jul 4, 2022 •

edited

Loading

sondreb commented Jul 5, 2022

nexorianus commented Oct 24, 2022

mebjas commented Oct 29, 2022

mebjas commented Oct 29, 2022 •

edited

Loading

mebjas commented Oct 30, 2022 •

edited

Loading

mebjas commented Oct 30, 2022

diegomariani commented Oct 31, 2022

nexorianus commented Nov 2, 2022 •

edited

Loading

mebjas commented Nov 2, 2022 via email

nexorianus commented Nov 2, 2022

mebjas commented Nov 2, 2022 via email

mebjas commented Nov 2, 2022

[Feature request] Add support for flash Light #129

[Feature request] Add support for flash Light #129

Comments

stefanodias commented Oct 19, 2020

sondreb commented Jul 4, 2022

ROBERT-MCDOWELL commented Jul 4, 2022

ROBERT-MCDOWELL commented Jul 4, 2022 • edited Loading

sondreb commented Jul 5, 2022

nexorianus commented Oct 24, 2022

mebjas commented Oct 29, 2022

mebjas commented Oct 29, 2022 • edited Loading

mebjas commented Oct 30, 2022 • edited Loading

mebjas commented Oct 30, 2022

diegomariani commented Oct 31, 2022

nexorianus commented Nov 2, 2022 • edited Loading

mebjas commented Nov 2, 2022 via email

nexorianus commented Nov 2, 2022

mebjas commented Nov 2, 2022 via email

mebjas commented Nov 2, 2022

ROBERT-MCDOWELL commented Jul 4, 2022 •

edited

Loading

mebjas commented Oct 29, 2022 •

edited

Loading

mebjas commented Oct 30, 2022 •

edited

Loading

nexorianus commented Nov 2, 2022 •

edited

Loading