Skip to content

Enable Torch when using html5QrCode APIs #1050

Description

@Offbeatmammal

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"
        }
    }
}

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions