Pair with QR Code (For Smart Cameras)

This topic describes how to enable a device with a camera to scan the QR code on the mobile app for pairing.

API example for IPC devices pairing with QR code

For more information, see Device Pairing.

Get a pairing token

// Get a token.
this.activatorToken = await TSmartActivatorRequester.getActivatorToken(this.homeId)

Generate and show a QR code

Get a QR code string

this.qrCodeString = TSmartActivator.getQRCodeString(this.ssid, this.password, this.activatorToken)

Generate the QR code data

let content: string = this.qrCodeString;
let options: generateBarcode.CreateOptions = {
  scanType: scanCore.ScanType.QR_CODE,
  height: 400,
  width: 400,
  margin: 1,
  level: generateBarcode.ErrorCorrectionLevel.LEVEL_M,// The default setting is LEVEL_H, but some IPC devices cannot recognize it and require it to be set to M.
  backgroundColor: 0xFFFFFF,
  pixelMapColor: 0x000000
}
try {
  // Generate a QR code. An image in PixelMap format is returned upon success.
  generateBarcode.createBarcode(content, options).then((pixelMap: image.PixelMap) => {
  this.pixelMap = pixelMap;
}).catch((error: BusinessError) => {
  hilog.error(0x0001, '[generateBarcode]',
  `Failed to get PixelMap by promise with options. Code: ${error.code}, message: ${error.message}`);
  })
} catch (error) {
  hilog.error(0x0001, '[generateBarcode]',
  `Failed to createBarcode by promise with options. Code: ${error.code}, message: ${error.message}`);
}

Show a QR code

The QR code should be displayed using the Image component with a PixelMap format image. Do not use the QRCode component. Some IPC devices cannot recognize QR codes generated by QRCode.

Row() {
  Image(this.pixelMap)
    .width(300)
    .height(300)
    .objectFit(ImageFit.Contain)
}
.margin({ top: 10 })

Use the QR code generated above for pairing. Put the device in pairing mode and point it at the QR code on the app. Upon successful scanning, the device will emit a sound. Then, listen for the pairing result and initiate the process using the interface below.

Pairing

Implement methods in the pairing listener

activatorListener: ITSmartActivatorListener = {
    onActiveSetpAndError: (step: TSmartActivatorStep, error?: Error, device?: TSmartDeviceModel) => {
      // Implement the relevant logic.
    },

    onActiveSuccess: (deviceModel: TSmartDeviceModel) => {
      // Handle the logic for successful pairing, such as updating the UI and navigating to the next page.
    },
};

Create a pairing instance

const activatorBuilder = TSmartActivator.buildQRCodeActivatorBuilder(
            this.homeId,
            this.ssid,
            this.password,
            120 * 1000,
            this.activatorListener,
            this.activatorToken,
          )
this.activator = TSmartActivator.createActivator(activatorBuilder);

Start pairing

this.activator.startActive()

Stop pairing

this.activator.stopActive()