Add support for detecting and turning on/off flash light

README.md

@@ -90,6 +90,7 @@ This is a cross-platform Javascript library to integrate QR code, bar codes & a
 
 Supports:
 - Querying camera on the device (with user permissions)
+- Turning on/off flash light if device supports that
 - Rendering live camera feed, with easy to use user interface for scanning
 - Supports scanning a different kind of QR codes, bar codes and other formats
 - Supports selecting image files from the device for scanning codes
@@ -144,7 +145,7 @@ html5QrcodeScanner.render(onScanSuccess, onScanFailure);
 ### Pro Mode - if you want to implement your own user interface
 You can use `Html5Qrcode` class to set up your QR code scanner (with your own user interface) and allow users to scan QR codes using the camera or by choosing an image file in the file system or native cameras in smartphones.
 
-You can use the following APIs to `fetch camera`, `start` scanning and `stop` scanning.
+You can use the following APIs to `fetch camera`, `start` scanning, `stop` scanning and `set flash` state.
 
 #### For using inline QR Code scanning with Webcam or Smartphone camera
 
@@ -238,6 +239,20 @@ html5QrCode.stop().then((ignore) => {
 
 > Note that the class is stateful and `stop()` should be called to properly tear down the video and camera objects safely after calling `start()` when the scan is over or the user intend to move on. `stop()` will stop the video feed on the viewfinder.
 
+### Flash light support
+
+To detect if camera supports flash light, call call `Html5Qrcode#hasFlash()` which returns a `Promise` with detected result.
+```js
+html5QrCode.hasFlash().then((hasFlash) => {
+ if (hasFlash) {
+ // Flash light is supported, turn it on
+ html5QrCode.setFlash(true);
+ }
+});
+```
+
+> Not that camera must be already selected and started to be able to detect and turn on flash light.
+
 #### For QR Code scanning using local files or inbuild camera on Smartphones
 | Selector in Android | Selector in IOS|
 |------|-------|

package.json

@@ -31,6 +31,7 @@
  "@babel/core": "^7.11.4",
  "@babel/plugin-proposal-class-properties": "^7.10.4",
  "@babel/preset-env": "^7.11.0",
+ "@types/w3c-image-capture": "^1.0.3",
  "babel-minify": "^0.5.1",
  "chai": "^4.2.0",
  "expose-loader": "^2.0.0",

src/html5-qrcode-scanner.ts

@@ -441,6 +441,13 @@ export class Html5QrcodeScanner {
  cameraActionStopButton.disabled = true;
  cameraActionContainer.appendChild(cameraActionStopButton);
 
+ const flashActionToggleButton = document.createElement("button");
+ flashActionToggleButton.innerText
+ = Html5QrcodeScannerStrings.toggleFlashOnText();
+ flashActionToggleButton.style.display = "none";
+ flashActionToggleButton.disabled = true;
+ cameraActionContainer.appendChild(flashActionToggleButton);
+
  scpCameraScanRegion.appendChild(cameraActionContainer);
 
  cameraActionStartButton.addEventListener("click", (_) => {
@@ -458,6 +465,12 @@ export class Html5QrcodeScanner {
  cameraActionStopButton.style.display = "inline-block";
  cameraActionStartButton.style.display = "none";
  $this.setStatus(Html5QrcodeScannerStrings.scanningStatus());
+ $this.html5Qrcode!.hasFlash().then((hasFlash) => {
+ if (hasFlash) {
+ flashActionToggleButton.style.display = "inline-block";
+ flashActionToggleButton.disabled = false;
+ }
+ });
  })
  .catch((error) => {
  $this.showHideScanTypeSwapLink(true);
@@ -481,6 +494,7 @@ export class Html5QrcodeScanner {
  cameraActionStartButton.disabled = false;
  cameraActionStopButton.style.display = "none";
  cameraActionStartButton.style.display = "inline-block";
+ flashActionToggleButton.style.display = "none";
  $this.setStatus(Html5QrcodeScannerStrings.idleStatus());
  $this.insertCameraScanImageToScanRegion();
  }).catch((error) => {
@@ -492,6 +506,23 @@ export class Html5QrcodeScanner {
  error, Html5QrcodeScannerStatus.STATUS_WARNING);
  });
  });
+
+ flashActionToggleButton.addEventListener("click", (_) => {
+ if (!$this.html5Qrcode) {
+ throw "html5Qrcode not defined";
+ }
+ flashActionToggleButton.disabled = true;
+ $this.html5Qrcode.setFlash(!$this.html5Qrcode.isFlashOn()).then((_) => {
+ flashActionToggleButton.disabled = false;
+ if ($this.html5Qrcode && $this.html5Qrcode.isFlashOn()) {
+ flashActionToggleButton.innerText
+ = Html5QrcodeScannerStrings.toggleFlashOffText();
+ } else {
+ flashActionToggleButton.innerText
+ = Html5QrcodeScannerStrings.toggleFlashOnText();
+ }
+ });
+ });
  }
 
  private createSectionSwap() {

src/html5-qrcode.ts

@@ -237,6 +237,7 @@ export class Html5Qrcode {
  private qrRegion: QrcodeRegionBounds | null = null;
  private context: CanvasRenderingContext2D | null = null;
  private lastScanImageFile: string | null = null;
+ private flashOn: boolean;
  //#endregion
 
  public isScanning: boolean;
@@ -285,7 +286,7 @@ export class Html5Qrcode {
  this.localMediaStream;
  this.shouldScan = true;
  this.isScanning = false;
-
+ this.flashOn = false;
  }
 
  //#region start()
@@ -393,7 +394,14 @@ export class Html5Qrcode {
  qrCodeErrorCallback!)
  .then((_) => {
  $this.isScanning = true;
- resolve(/* Void */ null);
+ if (!$this.flashOn) {
+ resolve(/* Void */ null);
+ return;
+ }
+ // Turn on flash light if it was turned on before
+ $this.setFlash(true).then(() => {
+ resolve(/* Void */ null);
+ });
  })
  .catch(reject);
  })
@@ -492,6 +500,7 @@ export class Html5Qrcode {
 
  this.localMediaStream!.getVideoTracks().forEach((videoTrack) => {
  this.localMediaStream!.removeTrack(videoTrack);
+ // This will also stop flash light
  videoTrack.stop();
  ++tracksClosed;
 
@@ -502,6 +511,63 @@ export class Html5Qrcode {
  });
  }
 
+ /**
+ * Checks if current video track has flash light capability.
+ * 
+ * This feature requires that camera is started.
+ *
+ * @returns Promise with detected flash capability result.
+ */
+ public hasFlash(): Promise<boolean> {
+ if (!("ImageCapture" in window)) {
+ return Promise.resolve(false);
+ }
+
+ const track = this.videoElement?.srcObject ? (<MediaStream>this.videoElement.srcObject).getVideoTracks()[0] : null;
+ if (!track) {
+ throw "Scan should be started to detect flash capability";
+ }
+
+ return new ImageCapture(track).getPhotoCapabilities()
+ .then((result) => {
+ return result.fillLightMode.includes("flash");
+ })
+ .catch((err) => {
+ this.logger.warn(err);
+ return false;
+ });
+ }
+
+ /**
+ * Checks if flash is turned on.
+ *
+ * @returns Current flash state.
+ */
+ public isFlashOn(): boolean {
+ return this.flashOn;
+ }
+
+ /**
+ * Change flash state.
+ * 
+ * @param on if true flash will be turned on otherwise turned off.
+ * @returns Promise that flash state has changed.
+ */
+ public setFlash(on: boolean): Promise<void> {
+ return this.hasFlash().then((hasFlash) => {
+ if (!hasFlash) {
+ return Promise.reject("No flash available");
+ }
+
+ // At this point we already know that video element is not null and has track
+ return (<MediaStream>this.videoElement!.srcObject).getVideoTracks()[0].applyConstraints({
+ advanced: [{ torch: on }]
+ });
+ }).then(() => {
+ this.flashOn = on;
+ });
+ }
+
  /**
  * Scans an Image File for QR Code.
  *
@@ -767,6 +833,7 @@ export class Html5Qrcode {
  const tracks = stream.getVideoTracks();
  for (const track of tracks) {
  track.enabled = false;
+ // This will also stop flash light
  track.stop();
  stream.removeTrack(track);
  }

src/strings.ts

@@ -94,6 +94,14 @@ export class Html5QrcodeScannerStrings {
  return "Start Scanning";
  }
 
+ public static toggleFlashOnText(): string {
+ return "Turn flash on";
+ }
+
+ public static toggleFlashOffText(): string {
+ return "Turn flash off";
+ }
+
  /**
  * Text to show when camera scan is selected.
  * 

tsconfig.json

@@ -5,7 +5,7 @@
  "sourceMap": true,
  "moduleResolution": "classic",
  "lib": [
- "es7",
+ "es2018",
  "dom"
  ],