Torch Switch turns ON, but failed to OFF

[ROBERT-MCDOWELL]

Describe the bug
when switch torch button is possible, when pressed the torch is ON, but cannot switch off, error msg is "Failed to turn the torch off"

To Reproduce
Steps to reproduce the behavior:
press ON torch button, then press to OFF

Expected behavior
switch OFF must work without error

Desktop (please complete the following information):
N/A

Smartphone (please complete the following information):

• Device: all
• OS: Android 6+
• Browser: all
• Version: last

[mebjas]

There seems to be some stateful error, thanks for reporting. I am able to reproduce this in version 2.3.3 will try to fix in version 2.3.4.

[mebjas]

Fix to be published in version 2.3.4

(I'll close this bug once the new version is published).

[ROBERT-MCDOWELL]

ok,

[mebjas]

Fixed & released

• Github release: https://github.com/mebjas/html5-qrcode/releases/tag/v2.3.4
• NPM: https://www.npmjs.com/package/html5-qrcode/v/2.3.4

[ROBERT-MCDOWELL]

@mebjas I'm afraid the issue is still occuring :(. turn off torch says "cannot turn off torch"
I cleaned my cache but it's the same....

[mebjas]

Is this happening on https://scanapp.org as well for you on all devices?

(It's working for me)

[ROBERT-MCDOWELL]

not working either at scanapp.org on my side... slider zoom works well though....
the smartphone I use has android 6.0, and chrome version 96 not updgradable anymore, maybe is it the reason?
but if I can switch off so there is no reason I cannot switch off because of some JS API bug....

[mebjas]

That is possible, I am not able to repro this on several devices but all of them are latest OS, browser variants.

[ROBERT-MCDOWELL]

So how can I debug it on Android Chrome 96 and see what's happening?
btw I use sometimes https://live.browserstack.com/ to debug but test torch on line is not really worth :)

[cyril23]

I've encountered a smilar problem with an old "Zebra TC 25" phone with Android 7.1.2:

• I am NOT using Html5QrcodeScanner and its showTorchButtonIfSupported feature, but instead:
• I am using your Html5Qrcode APIs and followed your blog post on https://medium.com/qr-code/using-flash-or-torch-with-html5-qr-code-library-ba931965fe78, a little tweaked:

function isTorchSupported(html5Scanner) {
	const capabilities = html5Scanner.getRunningTrackCapabilities(); // Capabilities, not Settings!
	return capabilities.torch;
}

function mksize(w, h) {
	return { width: Math.max(50, w * 0.8), height: Math.max(50, h * 0.8) }; // must be at least 50 px!
}
const scanner = new window.Html5Qrcode("qr-reader", {});
scanner.start({ facingMode: { exact: "environment" }, },
	  { fps: 10, qrbox: mksize, aspectRatio: 3 / 4, },
	  console.log ) // here actually goes a callback to process the input
.then(() => {
	document.querySelector('#qr-reader video').addEventListener('playing', () => {
		// ... here: some code to resize the scanner dialog, and show a button to enable/disable torch etc.
		// a full example code would be too long; but you can imitate a button by calling "myButtonCallback" yourself in JS console
	});
});

// called if my "torch" button is clicked; toggles the phone's torch on/off
async function myButtonCallback() {
	const showError = (reason) => { alert(`problem with torch: ${reason}`); };
	if (isTorchSupported(scanner)) {
		const newSetting = !scanner.getRunningTrackSettings().torch; // i.e. toggling
		const constraints = {
			"torch": newSetting,
			"advanced": [{ "torch": newSetting }]
		};
		try { // not sure if I need to try-catch here?
			await scanner.applyVideoConstraints(constraints);
		} catch (e) {
			showError("applyVideoConstraints returned error: " + e); // actually I've never caught any error here with any phone
			return;
		}

		const newSettingSetCorrectly = scanner.getRunningTrackSettings().torch === newSetting;
		console.log(`html5 torch ${newSettingSetCorrectly ? "toggling successfully" : "could NOT be toggled; no error thrown"}`);
		if (!newSettingSetCorrectly) {
			showError("new settings were not applied");
		}
	} else {
		showError("feature is not supported");
	}
}

Here are my test results:

• getRunningTrackCapabilities().torch returns true, and everything works flawlessly:
  • Android 8.0.0, Samsung Galaxy S7
  • Android 9, Samsung Galaxy J5
  • Android 11, Newland NFT 10
  • Android 13, Samsung Galaxy XCover 5
  • Android 13, Google Pixel 6a
  • Android 14, Google Pixel 6a
• getRunningTrackCapabilities().torch returns false, i.e. no torch capability available at this moment:
  • iOS 17.1.2, iPhone 15 Pro
  • Android 7.0, Medion LifeTab X10302
• now about this issue: getRunningTrackCapabilities().torch returns true, but await scanner.applyVideoConstraints(constraints) is unable to change the torch setting to false, after it has been turned to true like that once (i.e. you can only turn the torch on, and not turn it off again):
  • Android 7.1.2, Zebra TC 25
    This is the only phone where newSettingSetCorrectly is false - and it only does so after 1 successful run of toggling the torch on at first.

Further remarks:

• on the "Android 7.1.2, Zebra TC 25" phone, I can turn video off using scanner.stop() in order to force the torch off
• so a possible workaround to turn off the torch on that old phone might be to stop the stream and start it again. (in our case, we won't implement that because it only seems to affect a few outdated phones)
• but I can't turn the torch off without stopping the scanner stream on that buggy phone.
• I won't investigate it further because the phone is pretty old and not in use by our customers anymore. According to https://www.zebra.com/de/de/support-downloads/mobile-computers/handheld/tc25.html#pageandfilelist_7e0e one could probably try to upgrade it from Android 7 to Android 8 and who knows, this might fix the torch bug here, too.