Define the scanning area

By default the Scandit Barcode Scanner searches the entire camera feed for barcodes. Under certain conditions it is helpful to restrict the area in which barcodes are recognized, for example if:

  • you only show a part of the barcode picker, codes that are not visible should generally not be recognized.
  • there are multiple barcodes close together and the user has to be able to select a specific one.

Restrict the scanning area

Restricting the scanning area is done through restrictActiveScanningArea (to activate the restriction), setScanningHotSpot (to choose the center of the scanning area), and setScanningHotSpotHeight (to choose the height of the scanning area) on the picker object.


The following sets the scanning area to 100% of the camera preview width and 10% of the preview height (centered).

var picker = scanditsdk.createView({
picker.setScanningHotSpot(0.5, 0.5);

Adjust the viewfinder to match the scanning area

The viewFinder is the white rectangle that helps the user to aim for the barcode. If you restricted the scanning area, you most likely want to adjust the viewFinder's size accordingly. You can do this by setting the viewfinder dimension on the setViewfinderSize. The coordinate system here is relative to the picker's size.

To adjust the viewFinder's size to the previous example (95% width, 10% height):

picker.setViewfinderSize(0.95, 0.1, 0.95, 0.1);