OpenHarmony 分布式相機（中）

作者：徐金生 2023-02-20 15:38:38

系統 OpenHarmony

實現分布式相機其實很簡單，正如官方介紹的一樣，當被控端相機被連接成功后，可以像使用本地設備一樣使用遠程相機。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

接上一篇??OpenHarmony 分布式相機（上）??，今天我們來說下如何實現分布式相機。

實現分布式相機其實很簡單，正如官方介紹的一樣，當被控端相機被連接成功后，可以像使用本地設備一樣使用遠程相機。

我們先看下效果

??視頻地址??

OpenHarmony 分布式相機（中）-開源基礎軟件社區

上一篇已經完整的介紹了如何開發一個本地相機，對于分布式相機我們需要完成以下幾個步驟：

前置條件

1、兩臺帶攝像頭的設備
2、建議使用相同版本的OH系統，本案例使用OpenHarmony 3.2 beta5
3、連接在同一個網絡

開發步驟

1、引入設備管理（@ohos.distributedHardware.deviceManager）
2、通過deviceManager發現周邊設備
3、通過pin碼完成設備認證
4、獲取和展示可信設備
5、在可信設備直接選擇切換不同設備的攝像頭
6、在主控端查看被控端的攝像頭圖像

以上描述的功能在應用開發時可以使用一張草圖來表示，草圖中切換設備->彈窗顯示設備列表的過程，草圖如下：

OpenHarmony 分布式相機（中）-開源基礎軟件社區

代碼

RemoteDeviceModel.ts

說明： 遠程設備業務處理類，包括獲取可信設備列表、獲取周邊設備列表、監聽設備狀態（上線、下線、狀態變化）、監聽設備連接失敗、設備授信認證、卸載設備狀態監聽等

代碼如下：

import deviceManager from '@ohos.distributedHardware.deviceManager'
import Logger from './util/Logger'
const TAG: string = 'RemoteDeviceModel'
let subscribeId: number = -1
export class RemoteDeviceModel {
    private deviceList: Array<deviceManager.DeviceInfo> = []
    private discoverList: Array<deviceManager.DeviceInfo> = []
    private callback: () => void
    private authCallback: () => void
    private deviceManager: deviceManager.DeviceManager
    constructor() {
    }
    public registerDeviceListCallback(bundleName : string, callback) {
        if (typeof (this.deviceManager) !== 'undefined') {
            this.registerDeviceListCallbackImplement(callback)
            return
        }
        Logger.info(TAG, `deviceManager.createDeviceManager begin`)
        try {
            deviceManager.createDeviceManager(bundleName, (error, value) => {
                if (error) {
                    Logger.info(TAG, `createDeviceManager failed.`)
                    return
                }
                this.deviceManager = value
                this.registerDeviceListCallbackImplement(callback)
                Logger.info(TAG, `createDeviceManager callback returned, error= ${error},value= ${value}`)
            })
        } catch (err) {
            Logger.error(TAG, `createDeviceManager failed, code is ${err.code}, message is ${err.message}`)
        }
        Logger.info(TAG, `deviceManager.createDeviceManager end`)
    }
    private deviceStateChangeActionOffline(device) {
        if (this.deviceList.length <= 0) {
            this.callback()
            return
        }
        for (let j = 0; j < this.deviceList.length; j++) {
            if (this.deviceList[j ].deviceId === device.deviceId) {
                this.deviceList[j] = device
                break
            }
        }
        Logger.info(TAG, `offline, device list= ${JSON.stringify(this.deviceList)}`)
        this.callback()
    }
    private registerDeviceListCallbackImplement(callback) {
        Logger.info(TAG, `registerDeviceListCallback`)
        this.callback = callback
        if (this.deviceManager === undefined) {
            Logger.info(TAG, `deviceManager has not initialized`)
            this.callback()
            return
        }
        Logger.info(TAG, `getTrustedDeviceListSync begin`)
        try {
            let list = this.deviceManager.getTrustedDeviceListSync()
            Logger.info(TAG, `getTrustedDeviceListSync end, deviceList= ${JSON.stringify(list)}`)
            if (typeof (list) !== 'undefined' && typeof (list.length) !== 'undefined') {
                this.deviceList = list
            }
        } catch (err) {
            Logger.error(`getTrustedDeviceListSync failed, code is ${err.code}, message is ${err.message}`)
        }
        this.callback()
        Logger.info(TAG, `callback finished`)
        this.deviceManager.on('deviceStateChange', (data) => {
            if (data === null) {
                return
            }
            Logger.info(TAG, `deviceStateChange data= ${JSON.stringify(data)}`)
            switch (data.action) {
                case deviceManager.DeviceStateChangeAction.READY:
                    this.discoverList = []
                    this.deviceList.push(data.device)
                    try {
                        let list = this.deviceManager.getTrustedDeviceListSync()
                        if (typeof (list) !== 'undefined' && typeof (list.length) !== 'undefined') {
                            this.deviceList = list
                        }
                        this.callback()
                    } catch (err) {
                        Logger.error(TAG, `getTrustedDeviceListSync failed, code is ${err.code}, message is ${err.message}`)
                    }
                    break
                case deviceManager.DeviceStateChangeAction.OFFLINE:
                case deviceManager.DeviceStateChangeAction.CHANGE:
                    this.deviceStateChangeActionOffline(data.device)
                    break
                default:
                    break
            }
        })
        this.deviceManager.on('deviceFound', (data) => {
            if (data === null) {
                return
            }
            Logger.info(TAG, `deviceFound data= ${JSON.stringify(data)}`)
            this.deviceFound(data)
        })
        this.deviceManager.on('discoverFail', (data) => {
            Logger.info(TAG, `discoverFail data= ${JSON.stringify(data)}`)
        })
        this.deviceManager.on('serviceDie', () => {
            Logger.info(TAG, `serviceDie`)
        })
        this.startDeviceDiscovery()
    }
    private deviceFound(data) {
        for (var i = 0;i < this.discoverList.length; i++) {
            if (this.discoverList[i].deviceId === data.device.deviceId) {
                Logger.info(TAG, `device founded ignored`)
                return
            }
        }
        this.discoverList[this.discoverList.length] = data.device
        Logger.info(TAG, `deviceFound self.discoverList= ${this.discoverList}`)
        this.callback()
    }
    private startDeviceDiscovery() {
        if (subscribeId >= 0) {
            Logger.info(TAG, `started DeviceDiscovery`)
            return
        }
        subscribeId = Math.floor(65536 * Math.random())
        let info = {
            subscribeId: subscribeId,
            mode: deviceManager.DiscoverMode.DISCOVER_MODE_ACTIVE,
            medium: deviceManager.ExchangeMedium.COAP,
            freq: deviceManager.ExchangeFreq.HIGH,
            isSameAccount: false,
            isWakeRemote: true,
            capability: deviceManager.SubscribeCap.SUBSCRIBE_CAPABILITY_DDMP
        }
        Logger.info(TAG, `startDeviceDiscovery ${subscribeId}`)
        try {
            // todo 多次啟動發現周邊設備有什么影響嗎？
            this.deviceManager.startDeviceDiscovery(info)
        } catch (err) {
            Logger.error(TAG, `startDeviceDiscovery failed, code is ${err.code}, message is ${err.message}`)
        }
    }
    public unregisterDeviceListCallback() {
        Logger.info(TAG, `stopDeviceDiscovery $subscribeId}`)
        this.deviceList = []
        this.discoverList = []
        try {
            this.deviceManager.stopDeviceDiscovery(subscribeId)
        } catch (err) {
            Logger.error(TAG, `stopDeviceDiscovery failed, code is ${err.code}, message is ${err.message}`)
        }
        this.deviceManager.off('deviceStateChange')
        this.deviceManager.off('deviceFound')
        this.deviceManager.off('discoverFail')
        this.deviceManager.off('serviceDie')
    }
    public authenticateDevice(device, extraInfo, callBack) {
        Logger.info(TAG, `authenticateDevice ${JSON.stringify(device)}`)
        for (let i = 0; i < this.discoverList.length; i++) {
            if (this.discoverList[i].deviceId !== device.deviceId) {
                continue
            }
            let authParam = {
                'authType': 1,
                'appIcon': '',
                'appThumbnail': '',
                'extraInfo': extraInfo
            }
            try {
                this.deviceManager.authenticateDevice(device, authParam, (err, data) => {
                    if (err) {
                        Logger.error(TAG, `authenticateDevice error: ${JSON.stringify(err)}`)
                        this.authCallback = null
                        return
                    }
                    Logger.info(TAG, `authenticateDevice succeed: ${JSON.stringify(data)}`)
                    this.authCallback = callBack
                })
            } catch (err) {
                Logger.error(TAG, `authenticateDevice failed, code is ${err.code}, message is ${err.message}`)
            }
        }
    }
    /**
     * 已認證設備列表
     */
    public getDeviceList(): Array<deviceManager.DeviceInfo> {
        return this.deviceList
    }
    /**
     * 發現設備列表
     */
    public getDiscoverList(): Array<deviceManager.DeviceInfo> {
        return this.discoverList
    }
}

getDeviceList() ：獲取已認證的設備列表。
getDiscoverList ：發現周邊設備的列表。

DeviceDialog.ets

說明： 通過RemoteDeviceModel.getDiscoverList()和通過RemoteDeviceModel.getDeviceList()獲取到所有周邊設備列表，用戶通過點擊"切換設備"按鈕彈窗顯示所有設備列表信息。

import deviceManager from '@ohos.distributedHardware.deviceManager';
const TAG = 'DeviceDialog'
// 分布式設備選擇彈窗
@CustomDialog
export struct DeviceDialog {
  private controller?: CustomDialogController // 彈窗控制器
  @Link deviceList: Array<deviceManager.DeviceInfo> // 設備列表
  @Link selectIndex: number // 選中的標簽
  build() {
    Column() {
      List() {
        ForEach(this.deviceList, (item: deviceManager.DeviceInfo, index) => {
          ListItem() {
            Row() {
              Text(item.deviceName)
                .fontSize(22)
                .width(350)
                .fontColor(Color.Black)
              Image(index === this.selectIndex ? $r('app.media.checked') : $r('app.media.uncheck'))
                .width(35)
                .objectFit(ImageFit.Contain)
            }
            .height(55)
            .onClick(() => {
              console.info(`${TAG} select device ${item.deviceId}`)
              if (index === this.selectIndex) {
                console.info(`${TAG} device not change`)
              } else {
                this.selectIndex = index
              }
              this.controller.close()
            })
          }
        }, item => item.deviceName)
      }
      .width('100%')
      .height(150)
      Button() {
        Text($r('app.string.cancel'))
          .width('100%')
          .height(45)
          .fontSize(18)
          .fontColor(Color.White)
          .textAlign(TextAlign.Center)
      }.onClick(() => {
        this.controller.close()
      })
      .backgroundColor('#ed3c13')
    }
    .width('100%')
    .padding(20)
    .backgroundColor(Color.White)
    .border({
      color: Color.White,
      radius: 20
    })
  }
}

打開設備列表彈窗

說明： 在index.ets頁面中，點擊“切換設備”按鈕即可以開啟設備列表彈窗，通過@Watch(‘selectedIndexChange’)監聽用戶選擇的設備標簽，在devices中獲取到具體的DeviceInfo對象。
代碼如下：

@State @Watch('selectedIndexChange') selectIndex: number = 0
  // 設備列表
  @State devices: Array<deviceManager.DeviceInfo> = []
  // 設備選擇彈窗
  private dialogController: CustomDialogController = new CustomDialogController({
    builder: DeviceDialog({
      deviceList: $devices,
      selectIndex: $selectIndex,
    }),
    autoCancel: true,
    alignment: DialogAlignment.Center
  })
 showDialog() {
    console.info(`${TAG} RegisterDeviceListCallback begin`)
    distributed.registerDeviceListCallback(BUNDLE_NAME, () => {
      console.info(`${TAG} RegisterDeviceListCallback callback entered`)
      this.devices = []
      // 添加本地設備
      this.devices.push({
        deviceId: Constant.LOCAL_DEVICE_ID,
        deviceName: Constant.LOCAL_DEVICE_NAME,
        deviceType: 0,
        networkId: '',
        range: 1 // 發現設備的距離
      })
      let discoverList = distributed.getDiscoverList()
      let deviceList = distributed.getDeviceList()
      let discoveredDeviceSize = discoverList.length
      let deviceSize = deviceList.length
      console.info(`${TAG} discoveredDeviceSize:${discoveredDeviceSize} deviceSize:${deviceSize}`)
      let deviceTemp = discoveredDeviceSize > 0 ? discoverList : deviceList
      for (let index = 0; index < deviceTemp.length; index++) {
        this.devices.push(deviceTemp[index])
      }
    })
    this.dialogController.open()
    console.info(`${TAG} RegisterDeviceListCallback end`)
  }
async selectedIndexChange() {
    console.info(`${TAG} select device index ${this.selectIndex}`)
    let discoverList: Array<deviceManager.DeviceInfo> = distributed.getDiscoverList()
    if (discoverList.length <= 0) {
      this.mCurDeviceID = this.devices[this.selectIndex].deviceId
      await this.switchDevice()
      this.devices = []
      return
    }
    let selectDeviceName = this.devices[this.selectIndex].deviceName
    let extraInfo = {
      'targetPkgName': BUNDLE_NAME,
      'appName': APP_NAME,
      'appDescription': APP_NAME,
      'business': '0'
    }
    distributed.authenticateDevice(this.devices[this.selectIndex], extraInfo, async () => {
      // 獲取到相關的設備ID，啟動遠程應用
      for (var index = 0; index < distributed.getDeviceList().length; index++) {
        let deviceName = distributed.getDeviceList()[index].deviceName
        if (deviceName === selectDeviceName) {
          this.mCurDeviceID = distributed.getDeviceList()[index].deviceId
          await this.switchDevice()
        }
      }
    })
    this.devices = []
  }

重新加載相機

說明： 根據用戶選擇的設備標簽獲取到當前用戶需要切換的相機設備對象，重新加載相機，重新加載需要釋放原有的相機資源，然后重新構建createCameraInput、createPreviewOutput、createSession。可能你注意到這里好像沒有執行createPhotoOutput，這是因為在實踐過程中發現，添加了一個當前設備所支持的拍照配置到會話管理(CaptureSession.addOutput（）)時,系統會返回當前拍照配置流不支持，并關閉相機，導致相機預覽黑屏，所以這里沒有添加。issues：??遠程相機拍照失敗 not found in supported streams??

mCameraService: 這個是相機管理類，代碼可以查看上一篇：??OpenHarmony 分布式相機（上）??中查看。

代碼如下：

/**
   * 切換攝像頭
   * 同一臺設備上切換不同攝像頭
   */
  async switchCamera() {
    console.info(`${TAG} switchCamera`)
    let cameraList = this.mCameraService.getDeviceCameras(this.mCurDeviceID)
    if (cameraList && cameraList.length > 1) {
      let cameraCount: number = cameraList.length
      console.info(`${TAG} camera list ${cameraCount}}`)
      if (this.mCurCameraIndex < cameraCount - 1) {
        this.mCurCameraIndex += 1
      } else {
        this.mCurCameraIndex = 0
      }
      await this.reloadCamera()
    } else {
      this.showToast($r('app.string.only_one_camera_hint'))
    }
  }

  /**
   * 重新加載攝像頭
   */
  async reloadCamera() {
    // 顯示切換loading
    this.isSwitchDeviceing = true
    // 先關閉當前攝像機，再切換新的攝像機
    await this.mCameraService.releaseCamera()
    await this.startPreview()
  } 
private async startPreview() {
    console.info(`${TAG} startPreview`)
    await this.mCameraService.createCameraInput(this.mCurCameraIndex, this.mCurDeviceID)
    await this.mCameraService.createPreviewOutput(this.surfaceId, this.previewImpl)
    if (this.mCurDeviceID === Constant.LOCAL_DEVICE_ID) {
      // fixme xjs 如果是遠程相機，則不支持拍照，添加拍照輸出流會導致相機黑屏
      await this.mCameraService.createPhotoOutput(this.functionBackImpl)
    }
    await this.mCameraService.createSession(this.surfaceId)
  }

加載過度動畫

說明： 在相機切換中會需要釋放原相機的資源，在重啟新相機，在通過軟總線通道同步遠程相機的預覽數據，這里需要一些時間，根據目前測試，在網絡穩定狀態下，切換時間3~5s，網絡不穩定狀態下，切換最長需要13s，當然有時候會出現無法切換成功，這種情況可能是遠程設備已經下線，無法再獲取到數據。
代碼如下：

@State isSwitchDeviceing: boolean = false // 是否正在切換相機

 if (this.isSwitchDeviceing) {
        Column() {
          Image($r('app.media.load_switch_camera'))
            .width(400)
            .height(306)
            .objectFit(ImageFit.Fill)
          Text($r('app.string.switch_camera'))
            .width('100%')
            .height(50)
            .fontSize(16)
            .fontColor(Color.White)
            .align(Alignment.Center)
        }
        .width('100%')
        .height('100%')
        .backgroundColor(Color.Black)
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
        .onClick(() => {
        })
      }