Skip to main content

AR Overlay | iOS Document Scanner

Barcode AR Overlay​

The Barcode AR Overlay can be enabled to display and select recognized barcodes in an augmented-reality fashion. Each recognized barcode will be presented on the barcode overlay by a colored frame and text. Styles of the frames and text can be customized for normal and selected barcodes. There is also a possibility to provide a custom view for each barcode. Barcodes can be selected by tapping on the barcode overlay or automatically by the tracking controller. All selected barcodes can be handled in the delegate methods of the tracking controller.

Example for integrating the Barcode Overlay Classic UI Component​

import UIKit
import ScanbotSDK

// This is a simple, empty view controller which acts as a container and delegate for the SBSDKBarcodeScannerViewController conforming SBSDKBarcodeTrackingOverlayControllerDelegate.
class BarcodesOverlaySwiftViewController: UIViewController {
    
    // The instance of the scanner view controller.
    var scannerViewController: SBSDKBarcodeScannerViewController!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Create the SBSDKBarcodeScannerViewController instance
        self.scannerViewController = SBSDKBarcodeScannerViewController(parentViewController: self,
                                                                       parentView: self.view)
        
        // Set self as a trackingViewController's delegate
        self.scannerViewController.trackingOverlayController.delegate = self
        
        // Enable the barcodes tracking overlay.
        self.scannerViewController.isTrackingOverlayEnabled = true
        
        // Get current tracking configuration object
        let configuration = self.scannerViewController.trackingOverlayController.configuration
        
        // Set the color for the polygons of the tracked barcodes.
        configuration.polygonStyle.polygonColor = UIColor(red: 0, green: 0.81, blue: 0.65, alpha: 0.8)
        
        // Set the color for the polygons of the selected tracked barcodes.
        configuration.polygonStyle.polygonSelectedColor = UIColor(red:0.784, green:0.1, blue:0.235, alpha:0.8)
        
        // Set the text color of the tracked barcodes.
        configuration.textStyle.textColor = UIColor.black
        
        // Set the text background color of the tracked barcodes.
        configuration.textStyle.textBackgroundColor = UIColor(red:0, green:0.81, blue:0.65, alpha:0.8)
        
        // Set the text color of the selected tracked barcodes.
        configuration.textStyle.selectedTextColor = UIColor.white
        
        // Set the text background color of the selected tracked barcodes.
        configuration.textStyle.textBackgroundSelectedColor = UIColor(red:0.784, green:0.1, blue:0.235, alpha:0.8)
        
        // Set the text format of the tracked barcodes.
        configuration.textStyle.trackingOverlayTextFormat = .codeAndType
        
        // Set the tracking configuration to apply it.
        self.scannerViewController.trackingOverlayController.configuration = configuration
    }
}

// The implementation of the SBSDKBarcodeTrackingOverlayControllerDelegate.
extension BarcodesOverlaySwiftViewController: SBSDKBarcodeTrackingOverlayControllerDelegate {
    
    // Implement this method to handle user's selection of a tracked barcode.
    func barcodeTrackingOverlay(_ controller: SBSDKBarcodeTrackingOverlayController,
                                didTapOnBarcode barcode: SBSDKBarcodeScannerResult) {
        // Process the barcode selected by the user.
    }
    
    // Implement this method when you need to customize the polygon style individually for every barcode detected.
    func barcodeTrackingOverlay(_ controller: SBSDKBarcodeTrackingOverlayController,
                                polygonStyleFor barcode: SBSDKBarcodeScannerResult) -> SBSDKBarcodeTrackedViewPolygonStyle? {
        
        let style = SBSDKBarcodeTrackedViewPolygonStyle()
        if barcode.type == SBSDKBarcodeType.qrCode {
            style.polygonColor = UIColor.red
            style.polygonBackgroundColor = UIColor.purple.withAlphaComponent(0.2)
        }
        return style
    }
    
    // Implement this method when you need to customize the text style individually for every barcode detected.
    func barcodeTrackingOverlay(_ controller: SBSDKBarcodeTrackingOverlayController,
                                textStyleFor barcode: SBSDKBarcodeScannerResult) -> SBSDKBarcodeTrackedViewTextStyle? {
        
        let style = SBSDKBarcodeTrackedViewTextStyle()
        if barcode.type == SBSDKBarcodeType.qrCode {
            style.textBackgroundColor = UIColor.purple.withAlphaComponent(0.2)
        }
        return style
    }
}

Scan and Count​

Scan and Count allows you to effortlessly capture 1D and 2D barcodes with a single tap. You can scan multiple codes per scan, and scan as many times as you want. The scanner automatically tracks the number of times each code has been detected over multiple scans. These codes are stored as an array in the countedBarcodes property.

Example for integrating the Scan and Count Classic UI Component​

import Foundation
import ScanbotSDK

// This is a simple, empty view controller which acts as a container and delegate for the SBSDKBarcodeScanAndCountViewController.
class BarcodeScanAndCountSwiftViewController: UIViewController {
    
    // The instance of the scanner view controller.
    var scannerViewController: SBSDKBarcodeScanAndCountViewController!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Create the SBSDKBarcodeScanAndCountViewController instance
        self.scannerViewController = SBSDKBarcodeScanAndCountViewController(parentViewController: self,
                                                                            parentView: self.view)
        
        // Create new instance of the polygon style.
        let polygonStyle = SBSDKScanAndCountPolygonStyle()
        
        // Enable the barcode polygon overlay.
        polygonStyle.polygonDrawingEnabled = true
        
        // Set the color for the results overlays polygons.
        polygonStyle.polygonColor = UIColor(red: 0, green: 0.81, blue: 0.65, alpha: 0.8)
        
        // Set the color for the polygon's fill color.
        polygonStyle.polygonFillColor = UIColor(red: 0, green: 0.81, blue: 0.65, alpha: 0.2)
        
        // Set the line width for the polygon.
        polygonStyle.lineWidth = 2
        
        // Set the corner radius for the polygon.
        polygonStyle.cornerRadius = 8
        
        // Set the polygon style to apply it.
        self.scannerViewController.polygonStyle = polygonStyle
        
        // Set the capture mode of the scanner.
        self.scannerViewController.captureMode = .capturedImage
    }
}

// The implementation of SBSDKBarcodeScanAndCountViewControllerDelegate.
extension BarcodeScannerSwiftViewController: SBSDKBarcodeScanAndCountViewControllerDelegate {
    
    // Implement this function to process detected barcodes.
    func barcodeScanAndCount(_ controller: SBSDKBarcodeScanAndCountViewController,
                             didDetectBarcodes codes: [SBSDKBarcodeScannerResult]) {
        // Process the detected barcodes.
    }
    
    // Implement this optional function when you need a custom overlay to be displayed for the detected barcode.
    func barcodeScanAndCount(_ controller: SBSDKBarcodeScanAndCountViewController,
                             overlayForBarcode code: SBSDKBarcodeScannerResult) -> UIView? {
        // provide a custom overlay view for the barcode
        return UIImageView(image: UIImage(named: "<image_name>"))
    }
}

Want to scan longer than one minute?

Generate a free trial license to test the Scanbot SDK thoroughly.

Get your free Trial License

What do you think of this documentation?

On this page

Scroll to top