Use the SDK

This topic describes how to use the SDK in HarmonyOS NEXT.

Add permissions

Add the camera permission in the module.json5 file of the entry module.

"requestPermissions": [
      {
        "name": "ohos.permission.CAMERA",
        "reason": "$string:permission_reason_camera",
        "usedScene": {
          "abilities": [
            "EntryAbility"
          ],
          "when": "always"
        }
      }
]

Use the API

Default UI

Implement the ScanInterface interface

import { ScanInterface } from '@mpaas/scanapp';

const params: Map<string, Object> = new Map()

params.set('showAlbum', true) // Specifies whether to show the album entry.
params.set('open','Tap to light up')  // Text prompt for the environment. Keep the text brief.
params.set('close','Tap to turn off') // Text prompt for the environment. Keep the text brief.
params.set('more','Multi-code scan')  // Text prompt for multi-code scanning.
params.set('targetColor',Color.Red) // The effect color after a QR code is detected.
params.set('fullScreen',true) // Specifies whether to enable full-screen rendering.

class ScanDefault implements ScanInterface {
  getResult(result: string): void { // Get the scan result.
    try {
      promptAction.showDialog({
        message: result,
      })
    } catch (error) {
      console.error('start fail error = ' + JSON.stringify(error))
    }
    // Handle routing logic.
    router.back() || router.pushUrl()
  }

  customParams?: Map<string, Object> | undefined = params

} 

Implement ScanManager

import { ScanManager } from '@mpaas/scanapp';

// Initialize ScanManager before navigation.
ScanManager.defaultManager(new ScanDefault())

Import the Scan component

// Call outside the component.
import ('@mpaas/scanapp/Index') 

Navigate to the scan page

router.pushNamedRoute({name: 'mPaasScanPage'})

Custom UI page

Import the Scan component

import { MyRect, ScanCustomPage, WrapperDecodeResult } from '@mpaas/scanapp'

Usage

  
  export struct PageScan {
    @state jumpToAlbum: boolean = false;
    @State setupCamera : boolean = false;
  
  build() {
    NavDestination() {
      RelativeContainer() {
        ScanCustomPage({
          scanCallback: this.handleResult, // Custom method to get the scan result.
          customUi: true, // Displays a custom result page after detection. If false, the default result page is displayed.
          flashIsOn:this.flashIsOn, // Flashlight monitoring.
          customRect: new MyRect(100,300,200,200), // Custom clipping for the detection area.
          jumpToAlbum: this.jumpToAlbum, // Listener for navigating to the album.
          setupCamera: this.setupCamera, // Listener for continuous scanning.
        })
      }
      Rect({width:200, height: 200})
        .fillOpacity(0)
        .stroke(Color.Red)
        .offset({x:100, y: 300})
        .hitTestBehavior(HitTestMode.None)

      Button('Flashlight')
        .onClick(()=>{
          this.flashIsOn = !this.flashIsOn
        })
        .offset({top:50})

      Button('Album')
        .onClick(()=>{
          this.jumpToAlbum = !this.jumpToAlbum
        })
        .offset({top:50, left : 100})
    }
    .width('100%')
    .height('100%')
  }

    


  handleResult = (results: Array<WrapperDecodeResult>) => { // The detection result is an array for multi-code scanning.
    try {
      promptAction.showDialog({
        message: results[0].codeContent,
      })
    } catch (error) {
      console.error('start fail error = ' + JSON.stringify(error))
    }
    this.setupCamera = !this.setupCamera // Enable continuous scanning. Do not pass the setupCamera parameter if this feature is not needed.
  }
}

customRect: new MyRect(100,300,200,200), // Custom clipping for the detection area.
// Based on the phone screen, MyRect(x, y, width, height). 
// x and y are the screen coordinates of the top-left corner of the clipping box.