OpenHarmony 分布式相机（中）

作者：徐金生 2023-02-20 15:38:38系统 OpenHarmony 实现分布式相机其实很简单，布式正如官方介绍的相机一样，当被控端相机被连接成功后，布式可以像使用本地设备一样使用远程相机。相机

​​想了解更多关于开源的布式内容，请访问：​​

​​51CTO 开源基础软件社区​​

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

接上一篇​​OpenHarmony 分布式相机（上）​​，相机今天我们来说下如何实现分布式相机。布式

实现分布式相机其实很简单，相机正如官方介绍的布式一样，当被控端相机被连接成功后，相机可以像使用本地设备一样使用远程相机。布式

我们先看下效果

​​视频地址​​

上一篇已经完整的介绍了如何开发一个本地相机，对于分布式相机我们需要完成以下几个步骤：

前置条件

1、布式两台带摄像头的相机设备
2、建议使用相同版本的布式OH系统，本案例使用OpenHarmony 3.2 beta5
3、连接在同一个网络

开发步骤

1、引入设备管理（@ohos.distributedHardware.deviceManager）
2、通过deviceManager发现周边设备
3、通过pin码完成设备认证
4、获取和展示可信设备
5、在可信设备直接选择切换不同设备的摄像头
6、在主控端查看被控端的摄像头图像

以上描述的功能在应用开发时可以使用一张草图来表示，草图中切换设备->弹窗显示设备列表的过程，草图如下：

代码

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(() => { 
})
}

至此，分布式相机的整体流程就已实现完成。

​​想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

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

责任编辑：jianghua 来源： 51CTO 开源基础软件社区 分布式相机鸿蒙

(责任编辑：热点)