当前位置：GHOST系统之家>系统教程 > OpenHarmony 分布式相机（中）-分布式相机

OpenHarmony 分布式相机（中）-分布式相机

来源：Ghost系统之家浏览：时间：2023-07-10 13:13:33

OpenHarmony 分布式相机（中）

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

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

51CTO开源基础软件社区

https://ost.51cto.com

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

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

我们先看下效果

视频地址

OpenHarmony 分布式相机（中）-开源基础软件社区

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

前置条件

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

开发步骤

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 = -1export class RemoteDeviceModel {private deviceList: Array = []private discoverList: Array = []private callback: () => voidprivate authCallback: () => voidprivate deviceManager: deviceManager.DeviceManagerconstructor() {}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 = valuethis.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] = devicebreak}}Logger.info(TAG, `offline, device list= ${JSON.stringify(this.deviceList)}`)this.callback()}private registerDeviceListCallbackImplement(callback) {Logger.info(TAG, `registerDeviceListCallback`)this.callback = callbackif (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}`)}breakcase deviceManager.DeviceStateChangeAction.OFFLINE:case deviceManager.DeviceStateChangeAction.CHANGE:this.deviceStateChangeActionOffline(data.device)breakdefault: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.deviceLogger.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 = nullreturn}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 {return this.deviceList}/** * 发现设备列表 */public getDiscoverList(): Array {return this.discoverList}}getDeviceList() ：获取已认证的设备列表。getDiscoverList ：发现周边设备的列表。

DeviceDialog.ets

说明：通过RemoteDeviceModel.getDiscoverList()和通过RemoteDeviceModel.getDeviceList()获取到所有周边设备列表，用户通过点击"切换设备"按钮弹窗显示所有设备列表信息。

import deviceManager from '@ohos.distributedHardware.deviceManager';const TAG = 'DeviceDialog'// 分布式设备选择弹窗@CustomDialogexport struct DeviceDialog {private controller?: CustomDialogController // 弹窗控制器@Link deviceList: Array // 设备列表@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 = []// 设备选择弹窗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.lengthlet deviceSize = deviceList.lengthconsole.info(`${TAG} discoveredDeviceSize:${discoveredDeviceSize} deviceSize:${deviceSize}`)let deviceTemp = discoveredDeviceSize > 0 ? discoverList : deviceListfor (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 = distributed.getDiscoverList()if (discoverList.length <= 0) {this.mCurDeviceID = this.devices[this.selectIndex].deviceIdawait this.switchDevice()this.devices = []return}let selectDeviceName = this.devices[this.selectIndex].deviceNamelet 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].deviceNameif (deviceName === selectDeviceName) {this.mCurDeviceID = distributed.getDeviceList()[index].deviceIdawait 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.lengthconsole.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() {// 显示切换loadingthis.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 开源基础软件社区分布式相机鸿蒙