Overview

Once the BarcodeCaptureListener has been set up, the Scandit DataCapture SDK provides two events to extract images from a FrameData object:

didScan?(barcodeCapture:session:getFrameData:): invoked upon detecting a barcode.
didUpdateSession?(barcodeCapture:session:getFrameData:): invoked upon every processed camera frame, regardless of detecting a barcode.

Then, ImageBuffer within the FrameData object can be decoded from a base64-encoded string to an image format supported by the platform or framework.

Note: The FrameData feature is not supported across all platforms, frameworks, or SDK versions. Please refer to the "Camera Frame Access" section in the table below to check availability for your specific platform and SDK version.
https://docs.scandit.com/features-by-framework/#camera

iOS

The following code snippet shows how to convert FrameData to a UIImage using Swift with UIKit on iOS.

extension ViewController: BarcodeCaptureListener {
  func barcodeCapture(
    _ barcodeCapture: BarcodeCapture,
    didScanIn session: BarcodeCaptureSession,
    frameData: FrameData
  ) {
    guard let image = frameData.imageBuffers[0].image else { return }
    
    DispatchQueue.main.async {
      self.imageView.image = image
    }
  }
}

API Reference

Android

The following code snippet shows how to convert FrameData to a BitmapImage using Java on Android.

@Override
public void onBarcodeScanned(
  @NonNull BarcodeCapture barcodeCapture,
  @NonNull BarcodeCaptureSession session,
  @NonNull FrameData frameData
) {
  if (session.getNewlyRecognizedBarcodes().isEmpty()) return;
  
  final Bitmap bitmap = frameData.toBitmap(); 
  runOnUiThread(() -> bitmapViewer.setImageBitmap(bitmap)); 
}

API Reference

Web

The following code snippet shows how to convert FrameData to an Image using TypeScript on Web.

import { 
  FrameData,
  BarcodeCaptureListener, 
  BarcodeCapture,
  BarcodeCaptureSession 
} from '@scandit/web-datacapture-barcode';

const barcodeCaptureListener: BarcodeCaptureListener = {
  didScan: async (
    _barcodeCapture: BarcodeCapture, 
    _session: BarcodeCaptureSession, 
    frameData: FrameData
  ) => {
    try {
      const blob = await frameData.toBlobAsync();
      const imageUrl = URL.createObjectURL(blob);
 
      const imgElement = document.querySelector<HTMLImageElement>('#preview');
      if (imgElement) {
        imgElement.src = imageUrl;
      }

      // Make sure to call `URL.revokeObjectURL(imageUrl);` to release the imageUrl dynamically
      // https://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#using_object_urls
    
    } catch (error) {
      console.error('Error converting frame to image:', error);
    }
  }
};
barcodeCaptureMode.addListener(barcodeCaptureListener);

<img id="preview" />

API Reference

React Native

The following code snippet shows how to convert FrameData to an Image using TypeScript on React Native.

import { 
  FrameData,
  BarcodeCaptureListener,
  BarcodeCapture,
  BarcodeCaptureSession 
} from 'scandit-react-native-datacapture-barcode';

const [imageUri, setImageUri] = useState<string | null>(null);

const barcodeCaptureListener: BarcodeCaptureListener = {
  didScan: async (
    _barcodeCapture: BarcodeCapture, 
    _session: BarcodeCaptureSession,
    getFrameData: () => Promise<FrameData>
  ) => {
    const frameData = await getFrameData();
    const imageBuffer = frameData.imageBuffers[0];
    const imageUri = `data:image/png;base64,${imageBuffer.data}`;
    setImageUri(imageUri);
  };
};
barcodeCaptureMode.addListener(barcodeCaptureListener);

<Image 
  source={{ uri: image }} 
  style={{ width: width * 0.3, height: height * 0.3 }}
/>

API Reference

Capacitor

The following code snippet shows how to convert FrameData to an Image using TypeScript on Capacitor.

import { 
BarcodeCapture, 
BarcodeCaptureListener, 
BarcodeCaptureSession, 
Camera, 
DataCaptureContext, 
FrameData 
} from 'scandit-capacitor-datacapture-core';

const barcodeCaptureListener: BarcodeCaptureListener = {
  didScan: async (
    _barcodeCapture: BarcodeCapture, 
    _session: BarcodeCaptureSession, 
    frameData: FrameData
  ) => {
    try {
      const frameData = await getFrameData();
      const imageBuffer = frameData.imageBuffers[0];
      const base64Image = `data:image/png;base64,${imageBuffer.data}`;

      const imgElement = document.querySelector<HTMLImageElement>('#preview');
      if (imgElement) {
        imgElement.src = base64Image;
      }

    } catch (error) {
      console.error('Error converting frame to image:', error);
    }
  }
};
barcodeCaptureMode.addListener(barcodeCaptureListener);

<img id="preview" />

API Reference

Flutter

import 'package:scandit_flutter_datacapture_core/scandit_flutter_datacapture_core.dart';
import 'package:scandit_flutter_datacapture_barcode/scandit_flutter_datacapture_barcode.dart';

String? imageUri;

@override
Future<void> didScan(
  BarcodeCapture barcodeCapture,
  BarcodeCaptureSession session,
  Future<FrameData> getFrameData,
) async {
  try {
    final frameData = await getFrameData;
    final buffer = frameData.imageBuffers[0];

    setState(() {
      imageSource = base64Decode(buffer.data);
    });
  } catch (error) {
    print('Error converting frame to image: $error');
  }
}

if (imageData != null)
  Image.memory(
    imageData!,
    fit: BoxFit.contain
  )

API Reference

Xamarin/MAUI

public void OnBarcodeScanned(
  BarcodeCapture barcodeCapture,
  BarcodeCaptureSession session,
  IFrameData frameData
) {
  try {
    image = frameData.ImageBuffers[0].ToImage();

    #if __IOS__
    MainThread.BeginInvokeOnMainThread(() => {
      imageView.Image = image; // iOS UIImageView.Image
    });

    #elif __ANDROID__
    MainThread.BeginInvokeOnMainThread(() => {
      imageView.SetImageBitmap(bitmap); // Android ImageView.SetImageBitmap
    });

    #endif

  }
  catch (Exception ex) 
  {
    Console.WriteLine($"Error converting frame to image: {ex.Message}");
  }
  finally 
  {
    frameData.Dispose();
  }
}

Xamarin.iOS API Reference

Xamarin.Android API Reference

Xamarin.Forms API Reference