혼합 현실 사진 찍기 및 업로드

아티클
10/12/2023

이 문서에서는 혼합 현실 세션의 사진을 찍어 OneDrive 폴더에 업로드할 수 있는 앱을 만들 것입니다. 이 예시에서는 MR에서 보기 컨트롤을 사용할 것이나 MR에서 모양 보기 및 측정 카메라 컨트롤도 작동합니다.

다음 작업을 다룹니다.

샘플 3D 개체를 보고 조작하기 위한 3D 개체 컨트롤 추가하기
3D 개체 컨트롤 MR에서 보기 컨트롤 컨트롤에 연결하여 실제 세계에서 3D 개체 보기
MR에서 보기 컨트롤로 찍은 사진을 볼 수 있는 갤러리 컨트롤 추가하기
Microsoft Power Automate 흐름으로 사진을 OneDrive에 업로드하기
혼합 현실에서 캡처한 사진을 Dataverse에 업로드

전제 조건

빈 캔버스 앱을 만듭니다.
OneDrive에서 MRPhotos라는 폴더를 만듭니다. 이 폴더를 사용하여 업로드한 사진을 저장합니다.

팁

Mixed Reality(MR) 컨트롤은 표면이 평평한 조명이 밝은 환경에서 가장 잘 작동합니다. 추적은 LIDAR 지원 장치에서 더 좋습니다.

혼합 현실에서 3D 개체의 사진을 찍는 버튼 추가

이 예제에는 세 부분이 있습니다. 먼저 사용자가 혼합 현실 환경에서 3D 개체의 사진을 찍을 수 있는 버튼을 추가합니다.

3D 개체 컨트롤 삽입

Power Apps Studio에서 편집을 위해 앱을 연 상태에서:

삽입 탭을 열고 미디어를 확장합니다.
3D 개체를 선택하여 앱 화면에 3D 개체를 배치합니다. 컨트롤을 화면으로 끌어 더 정확하게 배치합니다.

컨트롤은 투명한 큐브 모양으로 제공됩니다. 원하는 경우 컨트롤의 Source 속성을 변경하여여 다른 3D 모델을 로드합니다. 이 예에서는 URL https://raw.githubusercontent.com/microsoft/experimental-pcf-control-assets/master/robot_arm.glb 를 사용합니다.

MR에서 보기 컨트롤 삽입 및 연결

삽입 탭을 열고 Mixed Reality를 확장합니다.
MR에서 보기를 선택하여 컨트롤을 앱 화면에 배치하거나 컨트롤을 화면으로 드래그하여 더 정확하게 배치합니다.
컨트롤의 Source 속성을 3DObject1.Source로 변경합니다. (3DObject1은 앞에서 추가한 3D 개체 컨트롤의 이름입니다.) 이 표현식은 MR에서 보기 컨트롤을 제어하여 디바이스 카메라 피드에 3D 모델을 오버레이합니다.
앱을 저장 및 게시하고 모바일 디바이스에서 실행합니다.
View in MR을 선택하여 혼합 현실에서 3D 개체를 봅니다. 카메라 아이콘을 선택하여 MR 뷰를 촬영하세요.

갤러리 컨트롤을 삽입하여 앱에서 찍은 사진 보기

다음으로 사용자가 찍은 사진을 볼 수 있도록 갤러리를 추가합니다.

앱을 다시 수정하세요. 삽입 탭을 열고 화면에 Vertical 갤러리 컨트롤을 배치합니다.
컨트롤의 Items 속성을 ViewInMR1.Photos로 변경합니다. (ViewInMR1은 앞에서 추가한 MR에서 보기 컨트롤의 이름입니다.)
선택적으로 갤러리의 Layout 속성을 Image and title로 변경할 수 있습니다.
앱을 미리 보고 View in MR을 선택하여 샘플 사진을 생성합니다. 갤러리가 샘플 사진으로 채워집니다.

참고

사용자가 갤러리를 보기 위해 MR 보기를 종료한 다음 다시 MR 보기로 들어가서 더 많은 사진을 찍는 경우 새 사진이 이전에 찍은 사진을 대체합니다.

갤러리의 썸네일 이미지에 더 큰 오버레이 추가

갤러리의 사진을 더 쉽게 볼 수 있도록 사용자가 썸네일 이미지를 선택할 때 표시되는 전체 크기 오버레이를 추가할 수 있습니다.

앱을 다시 수정하세요. 삽입 탭을 열고 미디어를 확장합니다.
이미지를 선택하여 화면에 이미지 컨트롤을 배치합니다. 썸네일 이미지를 선택할 때 더 큰 사진을 표시할 방법에 따라 이동하고 크기를 조정합니다.
이미지 컨트롤의 속성을 다음과 같이 변경합니다. | 속성 | 값 | | - | - | | OnSelect | UpdateContext({vVisibleImageZoom:false}) | | Image | Gallery1.Selected.Image2 (갤러리 컨트롤이 Gallery1이고 첫 번째 썸네일 이미지가 Image2라고 간주함) | Visible | vVisibleImageZoom
갤러리 컨트롤에서 첫 번째 썸네일 이미지를 선택합니다. OnSelect 속성을 UpdateContext({vVisibleImageZoom:true}) 로 변경합니다.
앱을 저장 및 게시하고 모바일 디바이스에서 실행합니다.
View in MR을 선택한 다음 카메라 아이콘을 선택하여 사진을 촬영합니다. MR 보기를 종료하려면 화면 상단의 뒤로 화살표를 선택합니다.
갤러리에서 썸네일을 선택하면 사진의 더 큰 버전이 표시됩니다. 숨기려면 이미지를 선택합니다.

Power Automate 흐름으로 사진을 OneDrive에 업로드합니다

마지막으로 Power Automate 창을 사용하여 워크플로를 만듭니다. 워크플로는 앱의 사진을 OneDrive의 MRPhotos라는 폴더로 업로드합니다.

Power Automate에서 흐름 만들기

앱을 수정하세요. 앱 저작 메뉴에서 Power Automate > 새 흐름 만들기를 선택합니다.
Power Apps 버튼 템플릿을 검색하여 선택합니다.
흐름 만들기 창에서 고급 모드에서 편집을 선택합니다.
창 상단에서 Power Apps 버튼을 클릭하고 흐름의 새 이름을 입력합니다. 이 예에서는 흐름의 이름을 MR 사진 업로드으로 짓습니다.
창 상단에서 Power Apps 버튼을 클릭하고 흐름의 새 이름을 입력합니다. 이 예에서는 흐름의 이름을 MR 사진 업로드으로 짓습니다.
PowerApps (V2) 를 검색하고 PowerApps (V2) 트리거를 선택합니다.
입력 추가를 선택한 다음 파일을 선택합니다.
파일 내용 레이블을 이미지로 변경합니다.
새 단계를 선택합니다. OneDrive 파일 만들기를 검색하고 파일 만들기 작업을 선택합니다.
폴더 경로에서 폴더 아이콘을 선택하고 앞에서 만든 MRPhotos 폴더로 이동합니다.
파일 이름에 @{triggerBody()?['file']?['name']} 을 입력합니다(텍스트가 "file.name."으로 바뀜)
파일 내용에 @{triggerBody()['file']['contentBytes']} 를 입력합니다(텍스트가 "Image."로 바뀜)
흐름을 저장합니다.

완전한 흐름은 다음과 같이 표시됩니다.

완전한 워크플로가 표시된 Power Automate 편집 창의 스크린샷입니다.

앱의 버튼에 워크플로 연결

Power Apps Studio의 앱으로 돌아갑니다. 이제 흐름이 사용 가능한 흐름 아래에 나열됩니다.
삽입 탭을 열고 버튼을 선택합니다. 버튼 컨트롤을 화면에 놓고 필요에 따라 크기를 조정합니다.
버튼 컨트롤의 Text 속성을 Upload photos로 변경합니다.
Power Apps 창 상단의 수식 입력줄에서 OnSelect 속성을 선택합니다. 작업 > Power Automate > MR 사진 업로드를 선택합니다.

버튼 컨트롤의 OnSelect 속성을 UploadMRPhoto.Run( 으로 변경합니다.
마지막으로 찍은 사진을 업로드하려면 여는 괄호 뒤에 {file:{name:GUID() & ".png", contentBytes:Last(ViewInMR1.Photos).ImageURI}}) 코드를 붙여넣습니다

갤러리 내부에 버튼 컨트롤을 배치한 경우 {file: {name:GUID() & ".png", contentBytes:ThisItem.ImageURI}}) 코드를 대신 붙여넣습니다

촬영한 모든 사진을 버튼으로 업로드하려면 UploadMRPhoto.Run( 을 삭제하고 ForAll(ViewInMR1.Photos, UploadMRPhoto.Run({file:{name:GUID() & ".png", contentBytes:ImageURI}})) 코드를 붙여넣습니다
앱을 미리 보고 View in MR을 선택한 다음 사진 업로드를 선택합니다. OneDrive의 MRPhotos 폴더를 확인하고 샘플 사진이 업로드되었는지 확인합니다.

앱에 오프라인 기능 추가

SaveData 및 LoadData 함수를 사용하여 네트워크 연결이 제한적이거나 없는 경우에도 앱을 사용할 수 있습니다.

혼합 현실에서 캡처한 사진을 Dataverse에 업로드

이미지 데이터 유형 열을 통해 Dataverse 테이블에 사진을 추가할 수 있습니다. Dataverse의 이미지 열에는 MR 컨트롤의 ImageURI 출력으로 설정할 수 있는 전체 및 값의 두 가지 필수 필드가 있습니다.

예를 들어 Markup in MR 컨트롤로 캡처한 첫 번째 사진을 이미지라는 Dataverse 열에 업로드하려는 경우:

    Image: {Full: First(MarkupInMR.Photos).ImageURI, Value: First(MarkupInMR.Photos).ImageURI}

참조 항목

참고

귀사의 설명서 언어 기본 설정에 대해 말씀해 주시겠습니까? 간단한 설문 조사에 응해주세요. (이 설문 조사는 영어로 되어 있습니다.)

이 설문 조사는 약 7분 정도 걸립니다. 개인 데이터는 수집되지 않습니다(개인정보처리방침).

Share via