Out of the box, HTML5QrCode supports an option to control the torch when using the html5QrCodeScanner component, but not when using html5QrCode APIs.
While it would be great to see an 'official' implementation to allow us to toggle that ourselves, I ended up putting together something quick and dirty for my app and wanted to share somewhere in case in helps other people.
this was a very quick hack to get it working this evening (needed it as the location we were at had very low ambient lighting, glad I got there early and found the problem) so could probably be made more elegant
// used to track what we think status of the torch is
var torch = "off";
// I call this from a button on my UI, but you mat want to trigger #yourself
function torchy() {
if (html5QrCode == null) {
alert("No active camera")
torch = "off"
} else {
const track = html5QrCode.renderedCamera.mediaStream.getVideoTracks()[0];
const capabilities = track.getCapabilities();
if (!capabilities.torch) {
alert("Torch not supported on this device");
torch = "off"
}
if (torch == "off") {
// Turn torch ON
track.applyConstraints({
advanced: [{ torch: true }]
});
torch = "on"
} else {
track.applyConstraints({
advanced: [{ torch: false }]
});
torch = "off"
}
}
}
Out of the box, HTML5QrCode supports an option to control the torch when using the html5QrCodeScanner component, but not when using html5QrCode APIs.
While it would be great to see an 'official' implementation to allow us to toggle that ourselves, I ended up putting together something quick and dirty for my app and wanted to share somewhere in case in helps other people.
this was a very quick hack to get it working this evening (needed it as the location we were at had very low ambient lighting, glad I got there early and found the problem) so could probably be made more elegant