鴻蒙分布式相機(jī)“踩坑”分享

接上一篇 OpenHarmony 分布式相機(jī)（上），今天我們來說下如何實現(xiàn)分布式相機(jī)。

實現(xiàn)分布式相機(jī)其實很簡單，正如官方介紹的一樣，當(dāng)被控端相機(jī)被連接成功后，可以像使用本地設(shè)備一樣使用遠(yuǎn)程相機(jī)。

我們先看下效果：

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

前置條件：

兩臺帶攝像頭的設(shè)備

建議使用相同版本的 OH 系統(tǒng)，本案例使用 OpenHarmony 3.2 beta5

連接在同一個網(wǎng)絡(luò)

開發(fā)步驟：

引入設(shè)備管理（@ohos.distributedHardware.deviceManager）

通過 deviceManager 發(fā)現(xiàn)周邊設(shè)備

通過 pin 碼完成設(shè)備認(rèn)證

獲取和展示可信設(shè)備

在可信設(shè)備直接選擇切換不同設(shè)備的攝像頭

在主控端查看被控端的攝像頭圖像

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

代碼

①RemoteDeviceModel.ts

說明：遠(yuǎn)程設(shè)備業(yè)務(wù)處理類，包括獲取可信設(shè)備列表、獲取周邊設(shè)備列表、監(jiān)聽設(shè)備狀態(tài)（上線、下線、狀態(tài)變化）、監(jiān)聽設(shè)備連接失敗、設(shè)備授信認(rèn)證、卸載設(shè)備狀態(tài)監(jiān)聽等。

代碼如下：

importdeviceManagerfrom'@ohos.distributedHardware.deviceManager'
importLoggerfrom'./util/Logger'
constTAG:string='RemoteDeviceModel'
letsubscribeId:number=-1
exportclassRemoteDeviceModel{
privatedeviceList:Array=[]
privatediscoverList:Array=[]
privatecallback:()=>void
privateauthCallback:()=>void
privatedeviceManager:deviceManager.DeviceManager
constructor(){
}
publicregisterDeviceListCallback(bundleName:string,callback){
if(typeof(this.deviceManager)!=='undefined'){
this.registerDeviceListCallbackImplement(callback)
return
}
Logger.info(TAG,`deviceManager.createDeviceManagerbegin`)
try{
deviceManager.createDeviceManager(bundleName,(error,value)=>{
if(error){
Logger.info(TAG,`createDeviceManagerfailed.`)
return
}
this.deviceManager=value
this.registerDeviceListCallbackImplement(callback)
Logger.info(TAG,`createDeviceManagercallbackreturned,error=${error},value=${value}`)
})
}catch(err){
Logger.error(TAG,`createDeviceManagerfailed,codeis${err.code},messageis${err.message}`)
}
Logger.info(TAG,`deviceManager.createDeviceManagerend`)
}
privatedeviceStateChangeActionOffline(device){
if(this.deviceList.length<=?0)?{
????????????this.callback()
????????????return
????????}
????????for?(let?j?=?0;?j?{
if(data===null){
return
}
Logger.info(TAG,`deviceStateChangedata=${JSON.stringify(data)}`)
switch(data.action){
casedeviceManager.DeviceStateChangeAction.READY:
this.discoverList=[]
this.deviceList.push(data.device)
try{
letlist=this.deviceManager.getTrustedDeviceListSync()
if(typeof(list)!=='undefined'&&typeof(list.length)!=='undefined'){
this.deviceList=list
}
this.callback()
}catch(err){
Logger.error(TAG,`getTrustedDeviceListSyncfailed,codeis${err.code},messageis${err.message}`)
}
break
casedeviceManager.DeviceStateChangeAction.OFFLINE:
casedeviceManager.DeviceStateChangeAction.CHANGE:
this.deviceStateChangeActionOffline(data.device)
break
default:
break
}
})
this.deviceManager.on('deviceFound',(data)=>{
if(data===null){
return
}
Logger.info(TAG,`deviceFounddata=${JSON.stringify(data)}`)
this.deviceFound(data)
})
this.deviceManager.on('discoverFail',(data)=>{
Logger.info(TAG,`discoverFaildata=${JSON.stringify(data)}`)
})
this.deviceManager.on('serviceDie',()=>{
Logger.info(TAG,`serviceDie`)
})
this.startDeviceDiscovery()
}
privatedeviceFound(data){
for(vari=0;i=0){
Logger.info(TAG,`startedDeviceDiscovery`)
return
}
subscribeId=Math.floor(65536*Math.random())
letinfo={
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 多次啟動發(fā)現(xiàn)周邊設(shè)備有什么影響嗎？
this.deviceManager.startDeviceDiscovery(info)
}catch(err){
Logger.error(TAG,`startDeviceDiscoveryfailed,codeis${err.code},messageis${err.message}`)
}
}
publicunregisterDeviceListCallback(){
Logger.info(TAG,`stopDeviceDiscovery$subscribeId}`)
this.deviceList=[]
this.discoverList=[]
try{
this.deviceManager.stopDeviceDiscovery(subscribeId)
}catch(err){
Logger.error(TAG,`stopDeviceDiscoveryfailed,codeis${err.code},messageis${err.message}`)
}
this.deviceManager.off('deviceStateChange')
this.deviceManager.off('deviceFound')
this.deviceManager.off('discoverFail')
this.deviceManager.off('serviceDie')
}
publicauthenticateDevice(device,extraInfo,callBack){
Logger.info(TAG,`authenticateDevice${JSON.stringify(device)}`)
for(leti=0;i{
if(err){
Logger.error(TAG,`authenticateDeviceerror:${JSON.stringify(err)}`)
this.authCallback=null
return
}
Logger.info(TAG,`authenticateDevicesucceed:${JSON.stringify(data)}`)
this.authCallback=callBack
})
}catch(err){
Logger.error(TAG,`authenticateDevicefailed,codeis${err.code},messageis${err.message}`)
}
}
}
/**
*已認(rèn)證設(shè)備列表
*/
publicgetDeviceList():Array{
returnthis.deviceList
}
/**
*發(fā)現(xiàn)設(shè)備列表
*/
publicgetDiscoverList():Array{
returnthis.discoverList
}
}

getDeviceList() ：獲取已認(rèn)證的設(shè)備列表；getDiscoverList：發(fā)現(xiàn)周邊設(shè)備的列表。

②DeviceDialog.ets

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

importdeviceManagerfrom'@ohos.distributedHardware.deviceManager';
constTAG='DeviceDialog'
//分布式設(shè)備選擇彈窗
@CustomDialog
exportstructDeviceDialog{
privatecontroller?:CustomDialogController//彈窗控制器
@LinkdeviceList:Array//設(shè)備列表
@LinkselectIndex:number//選中的標(biāo)簽
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}selectdevice${item.deviceId}`)
if(index===this.selectIndex){
console.info(`${TAG}devicenotchange`)
}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 頁面中，點擊“切換設(shè)備”按鈕即可以開啟設(shè)備列表彈窗，通過 @Watch(‘selectedIndexChange’) 監(jiān)聽用戶選擇的設(shè)備標(biāo)簽，在 devices 中獲取到具體的 DeviceInfo 對象。

代碼如下：

@State@Watch('selectedIndexChange')selectIndex:number=0
//設(shè)備列表
@Statedevices:Array=[]
//設(shè)備選擇彈窗
privatedialogController:CustomDialogController=newCustomDialogController({
builder:DeviceDialog({
deviceList:$devices,
selectIndex:$selectIndex,
}),
autoCancel:true,
alignment:DialogAlignment.Center
})


showDialog(){
console.info(`${TAG}RegisterDeviceListCallbackbegin`)
distributed.registerDeviceListCallback(BUNDLE_NAME,()=>{
console.info(`${TAG}RegisterDeviceListCallbackcallbackentered`)
this.devices=[]
//添加本地設(shè)備
this.devices.push({
deviceId:Constant.LOCAL_DEVICE_ID,
deviceName:Constant.LOCAL_DEVICE_NAME,
deviceType:0,
networkId:'',
range:1//發(fā)現(xiàn)設(shè)備的距離
})
letdiscoverList=distributed.getDiscoverList()
letdeviceList=distributed.getDeviceList()
letdiscoveredDeviceSize=discoverList.length
letdeviceSize=deviceList.length
console.info(`${TAG}discoveredDeviceSize:${discoveredDeviceSize}deviceSize:${deviceSize}`)
letdeviceTemp=discoveredDeviceSize>0?discoverList:deviceList
for(letindex=0;index=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?()?=>{
//獲取到相關(guān)的設(shè)備ID，啟動遠(yuǎn)程應(yīng)用
for(varindex=0;index


	

	④重新加載相機(jī)

	說明：根據(jù)用戶選擇的設(shè)備標(biāo)簽獲取到當(dāng)前用戶需要切換的相機(jī)設(shè)備對象，重新加載相機(jī)，重新加載需要釋放原有的相機(jī)資源，然后重新構(gòu)建 createCameraInput、createPreviewOutput、createSession。 可能你注意到這里好像沒有執(zhí)行 createPhotoOutput，這是因為在實踐過程中發(fā)現(xiàn)，添加了一個當(dāng)前設(shè)備所支持的拍照配置到會話管理(CaptureSession.addOutput（）)時，系統(tǒng)會返回當(dāng)前拍照配置流不支持，并關(guān)閉相機(jī)，導(dǎo)致相機(jī)預(yù)覽黑屏，所以這里沒有添加。

	issues：遠(yuǎn)程相機(jī)拍照失敗 not found in supported streams。

	
https://gitee.com/openharmony/distributedhardware_distributed_camera/issues/I6E5ZX

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

	

	代碼如下：

	
/**
*切換攝像頭
*同一臺設(shè)備上切換不同攝像頭
*/
asyncswitchCamera(){
console.info(`${TAG}switchCamera`)
letcameraList=this.mCameraService.getDeviceCameras(this.mCurDeviceID)
if(cameraList&&cameraList.length>1){
letcameraCount:number=cameraList.length
console.info(`${TAG}cameralist${cameraCount}}`)
if(this.mCurCameraIndex


	

	⑤加載過度動畫

	說明：在相機(jī)切換中會需要釋放原相機(jī)的資源，在重啟新相機(jī)，在通過軟總線通道同步遠(yuǎn)程相機(jī)的預(yù)覽數(shù)據(jù)。 這里需要一些時間，根據(jù)目前測試，在網(wǎng)絡(luò)穩(wěn)定狀態(tài)下，切換時間 3~5s，網(wǎng)絡(luò)不穩(wěn)定狀態(tài)下，切換最長需要 13s，當(dāng)然有時候會出現(xiàn)無法切換成功，這種情況可能是遠(yuǎn)程設(shè)備已經(jīng)下線，無法再獲取到數(shù)據(jù)。

	代碼如下：

	
@StateisSwitchDeviceing:boolean=false//是否正在切換相機(jī)

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

 至此，分布式相機(jī)的整體流程就已實現(xiàn)完成。下面我們介紹下分布式相機(jī)開發(fā)中所遇到的問題。 

	

	分布式相機(jī)問題一覽

	  對于開發(fā)過程中所遇到的一些坑，前面多少有簡單的提到一些，這里做一次規(guī)整，也算是一次回顧。

	①首次授權(quán)成功無法顯示相機(jī)預(yù)覽

	解析：我們正常會在 MainAbility.ts 的 onCreate() 函數(shù)加載的時候執(zhí)行申請授權(quán)，在 index.ets 頁面中，當(dāng) XComponent 組件 onLoad() 回調(diào)后執(zhí)行初始化相機(jī)操作，代碼如下：

	MainAbility.ts：

	
constTAG:string='[DistributedCamera]'
letpermissionList:Array=[
"ohos.permission.MEDIA_LOCATION",
"ohos.permission.READ_MEDIA",
"ohos.permission.WRITE_MEDIA",
"ohos.permission.CAMERA",
"ohos.permission.MICROPHONE",
"ohos.permission.DISTRIBUTED_DATASYNC"
]


exportdefaultclassMainAbilityextendsAbility{
asynconCreate(want,launchParam){
console.info(`${TAG}onCreate`)
globalThis.cameraAbilityContext=this.context
awaitglobalThis.cameraAbilityContext.requestPermissionsFromUser(permissionList)
}
}

index.ets：
//...
//截取部分主要代碼

Column(){
XComponent({
id:'componentId',
type:'surface',
controller:this.XComponentController
}).onLoad(async()=>{
console.info(`${TAG}XComponentonLoadiscalled`)
this.XComponentController.setXComponentSurfaceSize({
surfaceWidth:Resolution.DEFAULT_WIDTH,
surfaceHeight:Resolution.DEFAULT_HEIGHT
})
this.surfaceId=this.XComponentController.getXComponentSurfaceId()
console.info(`${TAG}surfaceId:${this.surfaceId}`)
awaitthis.initCamera()
}).height('100%')
.width('100%')
}
.width('100%')
.height('75%')
.margin({
bottom:20
})

//...


	

	應(yīng)用啟動后，調(diào)用了 requestPermissionsFromUser() 請求權(quán)限后，但未手動授權(quán)時，查看相關(guān)日志：

	

	日志告訴我們，page 的生命周期已啟動到 onShow，并且頁面布局也完成了加載，XComponent 組件回調(diào) onLoad()。 但是由于還未授權(quán)，導(dǎo)致無法初始化相機(jī)，此時即便授權(quán)成功，也不會再進(jìn)行初始化，導(dǎo)致相機(jī)無法啟動，無預(yù)覽視圖。 知道原因后，我們可以有多種方式解決，重點就是在授權(quán)完成后，需要再次觸發(fā)初始化相機(jī)，讓相機(jī)啟動才可以正常預(yù)覽。

	我的處理方式：

	在 index.ets 頁面中處理授權(quán)

	定義是否已授權(quán)的標(biāo)識，用于判斷是否可以初始化相機(jī)

	定義是否已經(jīng)初始化相機(jī)標(biāo)識，防止對此初始化

	在 page 頁面初始化函數(shù) aboutToAppear() 中請求權(quán)限，并在權(quán)限申請結(jié)果中添加初始化相機(jī)操作

	XComponent 組件回調(diào) onLoad() 初始化相機(jī)操作不變

	index.ets：

	
privateisInitCamera:boolean=false//是否已初始化相機(jī)
privateisPermissions:boolean=false//是否完成授權(quán)

asyncaboutToAppear(){
console.info(`${TAG}aboutToAppear`)
globalThis.cameraAbilityContext.requestPermissionsFromUser(permissionList).then(async(data)=>{
console.info(`${TAG}datapermissions:${JSON.stringify(data.permissions)}`)
console.info(`${TAG}dataauthResult:${JSON.stringify(data.authResults)}`)
//判斷授權(quán)是否完成
letresultCount:number=0
for(letresultofdata.authResults){
if(result===0){
resultCount+=1
}
}
if(resultCount===permissionList.length){
this.isPermissions=true
}
awaitthis.initCamera()
//獲取縮略圖
this.mCameraService.getThumbnail(this.functionBackImpl)
})
}


	

	②相機(jī)應(yīng)用未關(guān)閉，系統(tǒng)息屏后重新點亮，重新返回相機(jī)應(yīng)用，無預(yù)覽輸出流返回

	解析：從現(xiàn)象看，預(yù)覽畫面卡在息屏前的狀態(tài)，需要退出應(yīng)用后，重啟應(yīng)用才能正常預(yù)覽。從日志上看沒有查看到具體的原因，只是 camera_host 的數(shù)據(jù)量日志消失。

	猜想：相機(jī)在系統(tǒng)息屏后強(qiáng)制關(guān)閉，需要重新加載相機(jī)才能正常預(yù)覽，實現(xiàn)方式如下：

	在 page 的 onPageShow() 回調(diào)函數(shù)中重新初始化相機(jī)。

	在 page 的 onPageHide() 函數(shù)中釋放相機(jī)資源，減少系統(tǒng)資源不必要的消耗。

	index.ets：

	
asynconPageShow(){
console.info(`${TAG}onPageShow`)
awaitthis.initCamera()
}
onPageHide(){
console.info(`${TAG}onPageHide`)
this.isSwitchDeviceing=false
this.isInitCamera=false
this.mCameraService.releaseCamera()
}

結(jié)論：實踐驗證此方法有效解決息屏后點亮返回相機(jī)無法預(yù)覽的問題。

	

	③加載遠(yuǎn)程相機(jī)，在會話管理中添加拍照輸出流，無法拍照，預(yù)覽黑屏

	解析：兩臺設(shè)備 pin 碼認(rèn)證通過，連接成功，在主控端選擇一臺被控端設(shè)備時，加載相機(jī)，流程與加載本地相機(jī)相同。

	流程如下：

	
createCameraInput()
createPreviewOutput()
createPhotoOutput()
createSession()

*createSession.beginConfig()
*createSession.addInput(CameraInput)
*createSession.addOutput(PreviewOutput)
*createSession.addOutput(PhotoOutput)
*createSession.commitConfig()
*createSession.start()



	

	經(jīng)過排查，發(fā)現(xiàn)日志中返回異常 not found in supported streams，詳情可以查看關(guān)聯(lián)issues。

	
https://gitee.com/openharmony/distributedhardware_distributed_camera/issues/I6E5ZX

 原因：在創(chuàng)建 PhotoOutput 時需要傳遞支持的拍照配置信息 Profile，這里的 Profile 可以通過CmeraManager.getSupportedOutputCapability()返回的相機(jī)輸出能力 CameraOutputCapability 對象獲取，但遠(yuǎn)程相機(jī)設(shè)備拍照輸出能力列表返回空。

	

	但通過查看本地相機(jī)拍照輸出能力可知 DAYU200 設(shè)備支持的 Profile 信息：

	
photoProfile{"format":2000,"size":{"width":1280,"height":960}}

 通過此將 photoProfile 作為遠(yuǎn)程相機(jī)設(shè)備構(gòu)建拍照輸出流的入?yún)鼍芭恼蛰敵隽?，并把此添加到拍照會話管理中，但是界面出現(xiàn)不支持此相機(jī)配置，最終關(guān)閉了相機(jī)，導(dǎo)致黑屏。 解決方案：根據(jù)此問題，目前只能根據(jù)場景判斷是否需要添加拍照輸出流到會話管理，對于本地相機(jī)則可以添加拍照輸出流，執(zhí)行拍照業(yè)務(wù)，遠(yuǎn)程相機(jī)則不添加拍照輸出流，這也就不能執(zhí)行拍照業(yè)務(wù)，希望社區(qū)有解決方案。

	

	④切換不同設(shè)備上的相機(jī)，相機(jī)預(yù)覽輸出流出現(xiàn)異常，無法顯示遠(yuǎn)程相機(jī)的畫面

	解析：此問題存在的原因可能有多種，這里我說下我遇到的情況。 （1）分布式連接被斷開，但是因為底層機(jī)制，設(shè)備之間下線需要在一段時間內(nèi)才能上報（預(yù)計 5 分鐘），所以在應(yīng)用層看到可以連接的遠(yuǎn)端設(shè)備，其實已經(jīng)下線了，這時當(dāng)然不能切換到遠(yuǎn)程相機(jī)。 （2）與問題 3 中描述的相同，因為添加了一個無法支持的拍照配置信息導(dǎo)致相機(jī)被關(guān)閉。

	解決方案：

	等待線下通知，再重新連接設(shè)備，或者等待設(shè)備自動完成重連，簡單粗暴就是重啟設(shè)備。

	待社區(qū)反饋。

	⑤相機(jī)業(yè)務(wù)在主線程執(zhí)行，需要將業(yè)務(wù)移動到子線程，防止 UI 線程堵塞

	解析：如題描述，目前可能存在堵塞 UI 線程的可能，需要將一些耗時的操作移動到子線程，比如預(yù)覽、拍照保存圖片等。 目前正在修改優(yōu)化，關(guān)于 ets 的異步線程 worker 可以查看之前寫的一篇關(guān)于：OpenHarmony stage worker 多線程。

	⑥遠(yuǎn)程相機(jī)預(yù)覽數(shù)據(jù)傳輸存在 500ms 的延遲

	解析：在 wifi 環(huán)境下，被控端相機(jī)將預(yù)覽數(shù)據(jù)通過軟總線傳輸?shù)街骺囟孙@示，有 500ms 左右的延遲，此問題待排查，具體是那個環(huán)境出現(xiàn)的延遲。

	⑦no permission for function call

	解析：用戶動態(tài)授予：允許不同設(shè)備間的數(shù)據(jù)（ohos.permission.DISTRIBUTED_DATASYNC） 交換權(quán)限后，DeviceManager.startDeviceDiscovery() 啟動發(fā)現(xiàn)周邊設(shè)備總會出現(xiàn)異常。

	日志中提示：

	
discoverFaildata={"subscribeId":26386,"reason":-20007,"errInfo":"nopermissionforfunctioncall."}



	

	原因：非系統(tǒng)應(yīng)用無法使用 DeviceManager，詳細(xì)可查看：issues。

	
https://gitee.com/openharmony/distributedhardware_device_manager/issues/I6BYK4

 解決方案：系統(tǒng)應(yīng)用和普通應(yīng)用是通過簽名來區(qū)分，那只要通過修改簽名 UnsgnedReleasedProfileTemplate.json 文件中的 app-feature 值為 ohos_system_app，即為系統(tǒng)應(yīng)用。 

	

	審核編輯：湯梓紅