Overview

This implemantation demonstrates QR code scanning using camera capture and media library integration. It supports real-time decoding from the camera feed and parsing QR codes from images selected from the device’s photo gallery.

Key Features

• Real-time QR code detection via camera stream
• Manual image selection from the media library
• Image processing pipeline for decoding
• File system handling for temporary storage

Project Structure

Feature/src/main/ets/
|---qrcodescan
|   |---components
|   |   |---QRCodeScanComponent       // UI component for scanning interface
|   |---CameraService.ets             // Camera management logic
|   |---QRCodeParse.ets               // QR decoding service
|   |---QRCodeScanConst.ets           // Constants for scanning configuration
|---utils
|   |---DateTimeUtil.ets              // Utility for timestamp generation
|   |---Logger.ts                     // Logging framework

Camera Integration

The CameraService class handles all camera operations:

1. Initialize Camera Manager

   const cameraManager = getCameraManager();
   const availableCameras = await cameraManager.getSupportedCameras();
   

2. Open Camera Device

   const cameraInput = cameraManager.createCameraInput(availableCameras[0].id);
   await cameraInput.open();
   

3. Configure Output Streams

   • Query supported output formats using getSupportedOutputCapability
   • Create preview output with createPreviewOutput
   • Initialize photo output using createPhotoOutput from @ohos.multimedia.image

4. Start Capture Session

   const session = cameraManager.createCaptureSession();
   session.beginConfig();
   session.addInput(cameraInput);
   session.addOutput(previewOutput);
   session.addOutput(photoOutput);
   await session.commitConfig();
   session.start();
   

Image Processing & QR Decoding

The QRCodeParse module manages image analysis:

1. Capture Image from Camera

   • Register callback on cameraService.imageReceiver.on
   • Retrieve image buffer via readNextImage
   • Extract pixel data using getComponent based on image format
   • Save to temporary file and generate URI
   • Convert URI to ImageBitmap using ImageBitmap.fromURI

2. Select Image from Media Library

   • Launch media picker with startAbilityForResult
   • Receive selected image URI
   • Convert to ImageBitmap for processing

3. Decode QR Code

   • Use CanvasRenderingContext2D.getImageData() to extract raw pixel data as ImageData
   • Convert to 8-bit grayscale array
   • Pass to jsQR library for decoding
   • Return decoded payload or error message

Required Permissions

• ohos.permission.READ_MEDIA
• ohos.permission.CAMERA
• ohos.permission.MEDIA_LOCATION

Dependencies

None — relies solely on built-in HarmonyOS APIs.

Constraints

1. Runs only on standard system images (e.g., RK3568 platform).
2. Built using Stage model with API Level 10 SDK (API Version 10 Release).
3. Requires Full SDK (4.0 Release) for compilation.
4. Compatible with DevEco Studio 4.0 Release and above.
5. Uses system_core-level permissions — requires manual signing with appropriate certificate.
6. Must be declared as a system application (app-feature: "hos_system_app") in profile configuration.

Download Instructions

To clone this sample project:

git init
git config core.sparsecheckout true
echo code/BasicFeature/Media/QRCodeScan/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

For comprehensive learning resources on HarmonyOS development, including ArkTS, TypeScript, and ArkUI tutorials, visit: HarmonyOS Learning Hub