ZXing QR-code scanner to automatically choose the camera based on distance from objective

Question

HTML:

  <zxing-scanner  
  [device]="selectedDevice" 
  (scanSuccess)="onQrCodeScanComplete($event)"
  style="width: 100%; max-height: 50vh;">
  </zxing-scanner>

I have this zxing scanner in my component for an angular project. I need it to automatically choose the proper camera based on how distant you are from the objective. This is because some people that have, for example, an iPhone 15 Pro have issues with the scanner not choosing the camera which focuses on really close distances. is there a way to constantly automatically choose the right camera (and not just at the beginning, just like the default camera app does, so adjust it while the camera is open) and store it in the selectedDevice variable?

repi · Accepted Answer · 2025-02-06 14:37:54Z

0

You can use built-in (camerasFound) event provided by ZXing to manage camera selection.

The (camerasFound) event emits an array of MediaDeviceInfo objects, which represent the available cameras. You can filter through the available cameras based on preferred labels or other properties of the MediaDeviceInfo objects or create dropdown modal to allow users to select device on their own. Then, bind it to the [device] input of ZXing component, which would trigger onChange.

Also, you can use [enable] property to prevent ZXing scanner from initializing the default camera until a specific device is selected.

I also recommend setting the [autofocusEnabled]="true" property. Enabling autofocus significantly improves the scanning quality.

Alliteratively, you can disable ZXing autostart and manage devices from browser API directly - see MediaDevices: getUserMedia()

<zxing-scanner
    [autofocusEnabled]="true"
    [enable]="selectedDevice != null"
    (camerasFound)="chooseDevice($event)"
    [device]="selectedDevice">
</zxing-scanner>

import {Component} from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})

export class HomeComponent {
  
  selectedDevice: MediaDeviceInfo | undefined;
  preferredLabels = ['myCamera'];

  chooseDevice(deviceInfo: MediaDeviceInfo[]) {
    const device = deviceInfo.find(info => this.preferredLabels.includes(info.label));
    if (device != null) {
      this.selectedDevice = device;
    }
  }
}

answered Feb 6 at 14:37

repi

1652 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Lorenzo Bertolaccini Feb 6 at 16:20

The problem is that it has to switch cameras automatically based on the distance between the phone and the code, just like the default phone's camera app does. A dropdown list is not an option sadly.

repi Feb 7 at 10:56

I see, I think this isn't natively possible. Automatic camera switching is typically a feature of camera applications, since browsers access camera hardware threw hardware APIs, it is not natively supported by web APIs in browsers. I think you could probably try to emulate this functionality by using distance measuring. You could use Sensor APIs (see ProximitySensor) or JS libraries that calculate the distance to the nearest object.

Lorenzo Bertolaccini Feb 7 at 15:37

I've tried using ondeviceproximity and onuserproximity but it doesn't work. And also isn't ProximitySensor tied to Firefox? (since I found it on the Mozilla site)

repi Feb 10 at 11:28

I believe that the feature is either only supported on Firefox or may not work at all. I searched for libraries but couldn't find any that offer proximity detection out of the box. You might want to try using <input type="file" accept="image/*" capture="camera"> This will open the phone's camera app and should automatically switch cameras. However, the downside is that QR/BAR code detection won't happen automatically, user will need to take a photo manually. Once the photo is taken, it will automatically upload to your web app, and you give ZXing that file to find QR/BAR code in it

Collectives™ on Stack Overflow

ZXing QR-code scanner to automatically choose the camera based on distance from objective

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related