1

I am using the html5-qrcode barcode scanner library v2.0.12 based on zxing-js. I am using php, javascript and html to make a PWA that scans barcodes. I am testing on an iphone 8 using iOS 14.7.1.

Here is the documentation link for the library: QR and barcode scanner using HTML and Javascript

My issue is that I cannot find any documentation online that allows any config settings to enable the torch/flashlight option once the scanner window has started. I am wanting to do this for low light settings where it might help to get a better scan.

UPDATE I have found this link to a fork that mentions the flashlight support, but I cannot figure out how to add the appropriate code or where. It does mention the camera must first be activated. Add support for detecting and turning on/off flash light

In the config settings I have tried 'torch: true' but it does not do anything. I have also looked into using getUserMedia. The references I find on this site all seem to not work on iphones.

Is it possible to control the camera light on a phone via a website?

Turn on phone flashlight on web app using JavaScript and HTML

NodeJS - Turn On and Off Tourch/Flashlight in mobile Android/IPhone

Is it possible to use a jquery or javascript code and/or library to add a toggle switch to manually turn it on? At this point the user has already granted permission for the browser to access the phone if that makes a difference.

<script src="https://unpkg.com/html5-qrcode@2.0.9/dist/html5-qrcode.min.js"></script>

<div id="reader" width="350px"></div>

<script>
  const html5QrCode = new Html5Qrcode("reader");
  /** successful scan actions **/
  const qrCodeSuccessCallback = (decodedText, decodedResult) => {
    html5QrCode.stop();
    alert (decodedText);
  };
  /** define scanner default settings **/
  const config = { fps: 60, 
                   qrbox: 275, 
                   torch: true,
                   aspectRatio: 1.0
                 };
  html5QrCode.start({ facingMode: { exact: "environment"} }, config, qrCodeSuccessCallback);
</script>
Omar
  • 32,302
  • 9
  • 69
  • 112
Rodney
  • 514
  • 1
  • 9
  • 27

1 Answers1

1

Once the camera started, you can power on or off the torch calling applyVideoConstraints.

function powerTorch(powerOn) 
{    
  if(html5QrCode.getState() === Html5QrcodeScannerState.SCANNING ||
     html5QrCode.getState() === Html5QrcodeScannerState.PAUSED
    )
  {
    html5QrCode.applyVideoConstraints(
       {
         advanced: [{torch: powerOn}]
       });
  }
}

But I think it still does not work on iPhones (it doesn't work on the ip13 of my friend).

Adriano
  • 1,743
  • 15
  • 28
  • I second that, tested and works fine on Android, not working on latest iOS build – Vinnie Amir Feb 10 '22 at 05:24
  • Unable to get this to work on a Samsung S21. What do you pass through to the function as `powerOn`? – user2924019 Aug 17 '22 at 15:43
  • true or false. You need grant access to the camera to the browser, if you want to use the torch. – Adriano Aug 17 '22 at 15:54
  • How do I invoke this every time HTML5QRCodeScanner is started? – Iridium Aug 19 '22 at 11:38
  • @user2924019 Is it working for you in Samsung S21? I am also facing the same issue. – Darshana Aug 09 '23 at 09:44
  • @Darshana I couldn't get it to work for the S21. Ultimately we used an older basic android phone for scanning. Ideally will switch to a Zebra scanner if the client ever listens to us and buys one. It works as a keyboard input and saves all this faff. – user2924019 Aug 10 '23 at 10:34
  • @user2924019 Samsung is particular, you have to set the right camera (it can't detect it automatically) and you need to close the connection to the camera on every request (as it is not able to close it automatically like other phones). So if you check the parameters for each camera, you can't open it without closing it before. But it works. – Adriano Aug 15 '23 at 07:18