Development Guide for Device Interconnectivity

Device Interconnectivity enables cross-device invoking of camera, scanning, and gallery (images and videos) functions. For example, a tablet or PC/2-in-1 device can invoke the camera, scanning, and gallery functions of a phone. Since API version 6.1.0(23), TVs, phones, tablets, and PCs/2-in-1 devices can invoke remote phones and tablets that support photographing, scanning, and gallery (images and videos), as well as PCs/2-in-1 devices that support gallery (images and videos).

Use Cases

You can leverage this capability to implement device interconnectivity and enable the use of camera, scanning, and gallery functions of other devices.

Constraints

This capability can be used only when the following conditions are met:

Device constraints
- Local device: a tablet or PC/2-in-1 device running HarmonyOS 5 or later. Since API version 6.1.0(23), TVs, phones, tablets, and PCs/2-in-1 devices running HarmonyOS 5 or later are all supported.
- Remote device: a phone or tablet running HarmonyOS 5 or later and supporting the camera function. Since API version 6.1.0(23), phones, tablets, and PCs/2-in-1 devices running HarmonyOS 5 or later are all supported.
Usage constraints
- The same HUAWEI ID is signed in on both devices.
- Device Interconnectivity APIs can be called to invoke devices based on specific invoking policies: A PC/2-in-1 device can invoke a tablet or phone; a tablet can invoke a phone; and since API version 6.1.0(23), a TV, phone, tablet, or PC/2-in-1 device can invoke a phone or tablet that supports photographing, scanning, and image and video selection from the gallery, as well as a PC/2-in-1 device that supports image and video selection from the gallery.
- Wi-Fi and Bluetooth must be enabled on both the local and remote devices. To improve camera wake-up speed, it is recommended that the local and remote devices be connected to the same LAN whenever possible.
- If a resource loading exception occurs when the video selector is invoked across devices, you are advised to check whether the local device's requested capabilities match the remote device's supported capabilities and whether the system status is normal before invoking the video selector, and try again in a stable environment.

API Description

Please read the API reference before developing a specific function.

API	Description
createCollaborationServiceMenuItems	Device-specific capability selector. Obtains a list of devices with capabilities required by Device Interconnectivity on the network.
CollaborationServiceStateDialog	Displays a dialog box to show the status of the requested service on the remote device.

Development Procedure

Import required modules.
```
import {
  createCollaborationServiceMenuItems,
  CollaborationServiceStateDialog,
  CollaborationServiceFilter
} from '@kit.ServiceCollaborationKit';
```
createCollaborationServiceMenuItems is the device-specific capability menu module, which accepts the enumerated values of CollaborationServiceFilter. CollaborationServiceStateDialog is the status dialog box module.
Call createCollaborationServiceMenuItems in Menu to add a device-specific capability selector. A device-specific capability list is displayed in the menu.
Before calling createCollaborationServiceMenuItems, you need to know that:
- This method must be called in the Menu component.
- This method is a custom build function. You need to know the knowledge of @Builder before using it.
Pass the enumerated values (of the array type) of CollaborationServiceFilter to use the corresponding capabilities. Currently, the following values are supported: ALL, TAKE_PHOTO, SCAN_DOCUMENT, IMAGE_PICKER, VIDEO_PICKER, and IMAGE_VIDEO_PICKER.

ALL is a reserved value, which matches cross-device photographing, document scanning, and image selector. The supported capabilities will be expanded in the future. TAKE_PHOTO matches the cross-device photographing capability, SCAN_DOCUMENT matches the cross-device scanning capability, IMAGE_PICKER matches the cross-device image selection capability, VIDEO_PICKER matches the video selector, and IMAGE_VIDEO_PICKER matches the image and video selector.
```
@Builder
myTestMenu() {
  Menu() {
    createCollaborationServiceMenuItems([CollaborationServiceFilter.ALL]);
  }
}
```
Add the dialog box component CollaborationServiceStateDialog in the build method to notify users of the shooting status of the remote device and return data. The onState method needs to be implemented. CollaborationServiceStateDialog displays a global dialog box and does not affect the original layout.
Bind and implement the onState method for the dialog box component to receive and process photo data.

The input parameter stateCode of the callback function indicates the completion status, and buffer indicates the returned data content. The onState method can be implemented based on the status, data content, and the service logic.
```
CollaborationServiceStateDialog({
  onState: (stateCode: number, bufferType: string, buffer: ArrayBuffer): void => this.doInsertPicture(stateCode,
    bufferType, buffer)
})
```

Complete Sample Code for Device Interconnectivity

Refer to the sample code below to invoke the remote camera to take a photo.

import {
  createCollaborationServiceMenuItems,
  CollaborationServiceStateDialog,
  CollaborationServiceFilter
} from '@kit.ServiceCollaborationKit';
import { image } from '@kit.ImageKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

@Entry
@Component
struct DeviceInterconnectivityComponent {
  @State picture: PixelMap | undefined = undefined;

  @Builder
  myTestMenu() {
    Menu() {
      createCollaborationServiceMenuItems([CollaborationServiceFilter.ALL]);
    }
  }

  build() {
    Column({ space: 20 }) {
      CollaborationServiceStateDialog({
        onState: (stateCode: number, bufferType: string, buffer: ArrayBuffer): void => this.doInsertPicture(stateCode,
          bufferType, buffer)
      })
      Button ('Use remote device to take photos')
        .type(ButtonType.Normal)
        .borderRadius(10)
        .bindMenu(this.myTestMenu)

      if (this.picture) {
        Image(this.picture)
          .borderStyle(BorderStyle.Dotted)
          .borderWidth(1)
          .objectFit(ImageFit.Contain)
          .height('80%')
          .onComplete((event) => {
            if (event != undefined) {
              hilog.info(0, 'MEMOMOCK', 'onComplete ' + event.loadingStatus);
            }
          })
      }
    }
    .padding(20)
    .width('100%')
    .alignItems(HorizontalAlign.Center)
  }

  doInsertPicture(stateCode: number, bufferType: string, buffer: ArrayBuffer): void {
    if (stateCode != 0) {
      return;
    }
    if (bufferType == 'general.image') {
      let imageSource = image.createImageSource(buffer);
      imageSource.createPixelMap().then((pixelMap) => {
        this.picture = pixelMap;
      }).catch((error: Error) => {
        hilog.error(0, 'MEMOMOCK', 'Create pixel map failed: ' + error);
      }).finally(() => {
        imageSource.release();
      });
    }
  }
}

Sample Code

Device Interconnectivity