증강현실(AR)은 최근 많은 인기를 얻고 있으며, 헤드셋 제조사들이 하드웨어 수요에 대응하기 위해 노력하는 동시에 개발자들은 사용자의 흥미로운 콘텐츠에 대한 요구를 충족시키기 위해 노력하고 있습니다.
그러나 AR은 인기를 얻은 유일한 기술은 아닙니다. 오늘날의 전문 분야에서는 모두가 라이브 비디오 스트리밍을 통해 연결되고 협업하고 있습니다. 이는 개발자들이 증강현실과 비디오 스트리밍을 결합해 거리 장벽을 제거하는 풍부하고 몰입감 있는 경험을 제공하는 애플리케이션을 개발할 수 있는 흥미로운 기회를 제공합니다.
AR 개발자들은 두 가지 독특한 문제를 직면하고 있습니다:
- AR을 더 포용적으로 만들고 AR 헤드셋을 사용하지 않는 사람들과 사용자의 시점을 공유할 수 있도록 어떻게 할 수 있을까요?
- AR을 사용하지 않는 사용자를 AR 환경으로 어떻게 초대할 수 있을까요?
Magic Leap은 최근 아고라와의 호환성과 기기 내 카메라 및 마이크를 활용해 사용자의 음성과 시각적 관점을 캡처하고 원격 사용자에게 방송하는 기능을 갖춘 Magic Leap 2 (ML2)를 출시했습니다. 이는 협업, 원격 지원, 교육, 소셜 등 다양한 용도에 유용할 수 있습니다.
이 가이드에서는 Unity를 사용해 사용자가 ML2 기기에서 AR 시점을 실시간 스트리밍할 수 있는 증강현실(AR) 애플리케이션을 구축하는 방법을 단계별로 설명합니다. 또한 웹 브라우저를 통해 AR을 사용하지 않는 사용자가 가상 환경에 자신을 실시간 스트리밍할 수 있는 기능도 추가할 것입니다.
이 프로젝트는 코드를 한 줄도 작성하지 않고 구축할 것입니다.
이 가이드는 Agora 비디오 프리팹을 구현하여 Agora 엔진을 초기화하고 토큰 인증을 설정하며, ML2 헤드 마운티드 디스플레이(HMD)에서 비디오 및 마이크 입력을 연결하는 데 초점을 맞춥니다.
필수 조건
- 물리적 ML2 HMD를 보유하고 있어야 합니다
- Magic Leap 개발자로 등록되어 있어야 합니다
- MagicLeap 공식 문서에 따라 ML2 Unity 개발 환경을 설정해야 합니다
- Agora 개발자로 등록되어 있어야 합니다
파트 1: Unity XR 앱 구축
MagicLeap 2용 Unity 개발 환경을 설정하면 MagicLeap 폴더의 tools 디렉토리에서 ML2 Unity 예제 프로젝트를 찾을 수 있습니다:
Launch the project from Unity 2022.2. Follow the Getting Started instructions to build, deploy, and test the UnityExamples App.
ML2의 증강현실에서 큐브를 성공적으로 조작하셨다면 축하합니다! 이 데모에서 진행한 단계를 계속하여 Agora 라이브 스트리밍 플러그인을 추가할 것입니다.
파트 2: Agora 플러그인 가져오기
Agora의 GitHub 릴리스 섹션으로 이동하여 최신 플러그인 패키지를 다운로드하세요.
유니티 에디터 메뉴에서 Assets > Import Package > Custom Package…를 선택한 후 방금 다운로드한 Agora Unity 패키지를 선택합니다. 압축 해제 시간이 몇 초 정도 소요된 후 유니티 대화상자가 표시되며 패키지의 내용이 표시됩니다. Import를 클릭하여 프로젝트에 내용을 가져옵니다.
Assets 루트 폴더에 AgoraEngine이라는 새로운 폴더가 생성됩니다.
파트 3: 새로운 장면 설정
단계 1 – 장면
Agora 플러그인을 HelloCube 장면에 사용할 것입니다. 원본 예제를 유지하기 위해 먼저 HelloCube 장면을 복제합니다(Mac: Cmd+D, PC: Ctrl+D), 그런 다음 장면 이름을 TestAgora로 변경합니다. TestAgora 장면을 다른 작업 폴더로 이동할 수 있습니다. 이 연습에서는 AgoraTest라는 작업 폴더를 생성하고 TestAgora 장면을 해당 폴더로 이동합니다. Hierarchy에서 Cube 오브젝트를 삭제합니다.
단계 2 – 사용자 인터페이스
SpawnPoint
[UI] > UserInterface 계층 구조 아래에 게임 오브젝트를 생성합니다. (-314,475,0) 위치에 배치하고 너비 100, 높이 200을 할당합니다.
버튼
[UI]> UserInterface 계층 구조 아래에 세 개의 레거시 버튼을 생성하고 각각 MuteLocalButton과 MuteRemoteButton으로 라벨을 지정합니다. Unity Inspector에서 각 버튼에 Toggle State Button이라는 새로운 컴포넌트를 추가합니다. 버튼 속성은 다음 표에 따라 설정해야 합니다:
참고: 이러한 값을 강제 적용할 필요는 없습니다. 필요에 따라 자유롭게 변경할 수 있습니다.
로그 텍스트
Legacy Text UI를 생성한 후 이름을 Log Text로 지정하고 (-200, -60, 0) 위치에 배치합니다. 너비는 295, 높이는 280으로 설정합니다.
UI 디자인은 이제 다음과 같이 표시되어야 합니다:
단계 3 – AgoraController
Assets > Agora_MagicLeap2_Plugin > AgoraEngine > Prefabs로 이동한 후 AgoraController 프리팹을 Hierarchy로 드래그합니다.
이전 단계에서 생성한 UI 객체를 AgoraController의 해당 필드에 연결합니다. 회전 값을 설정할 때 Workspace를 참조로 사용하고, 이를 ReferenceTransform 필드에 설정합니다.
이 그림을 참조하세요:
단계 4 – 앱 매개변수
아고라 SDK 매개변수
App_Id 필드에는 Agora 프로젝트의 ID가 필요합니다. 아직 프로젝트를 생성하지 않았다면, Agora 개발자 계정에 로그인한 후 프로젝트 관리 페이지로 이동하여 새 프로젝트를 생성하고 현재는 테스트 모드 앱 ID를 선택하세요. 토큰 부분은 후속 단계에서 설명하겠습니다.
방금 생성한 App ID를 복사하여 Unity Inspector의 App_ID 필드에 붙여넣습니다. Use Token 옵션을 선택 해제합니다. 테스트용 채널 이름을 입력합니다. 예를 들어, ML2Test.
MagicLeap 2 매개변수
ML2 매개변수에는 다양한 카메라 매개변수가 포함됩니다. Editor Hierarchy에서 AgoraController 객체를 확장하고 VideoCapture 객체를 선택합니다. 여기서 프레임 속도, 품질(해상도), 혼합 현실 모드를 선택할 수 있습니다. 이 예제에서는 프레임 속도에 30FPS, 해상도에 1944×2160, 카메라 스트림에 혼합 현실(MR)을 선택했습니다. 비트레이트는 프레임 속도와 해상도에 맞게 조정해야 합니다. Agora는 추천 값을 포함한 표를 제공합니다.
단계 4 – 앱 매개변수
Agora SDK 매개변수
App_Id 필드에는 Agora 프로젝트의 ID가 필요합니다. 아직 프로젝트를 생성하지 않았다면 Agora 개발자 계정에 로그인한 후 프로젝트 관리 페이지로 이동하여 새 프로젝트를 생성하고 현재는 테스트 모드 앱 ID를 선택합니다. 토큰 부분은 후속 단계에서 설명하겠습니다.
유니티 에디터에서 확인해야 할 마지막 설정 하나만 더 있습니다 – 프로젝트 설정에서 ML 오디오 사용 옵션이 선택되어 있는지 확인하세요.
이 단계가 완료되면 기본적으로 장면이 설정되었습니다. 이제 테스트를 실행할 준비가 되었습니다!
파트 4 – 라이브 스트리밍 테스트
빌드 및 배포
예제 프로젝트는 이미 가져올 때 설정되어 있으므로 추가 구성은 필요 없습니다. 빌드 설정의 빌드 대상 장면 목록에 새로운 장면을 추가하고 기존 장면을 모두 제거합니다. ML2 헤드셋을 연결하고 빌드 및 실행을 클릭합니다. 몇 분간의 빌드 및 배포 시간이 지나면 헤드셋에서 테스트 앱이 실행되는 것을 확인할 수 있습니다!
중요 참고 사항: ML2에서 비디오 카메라 스트리밍은 상호 배타적인 기능이므로, Agora 플러그인을 사용하여 비디오를 방송하거나 ML Hub의 Device Stream 기능을 한 번에 하나씩 사용할 수 있습니다.
원격 테스트 사용자
여기서는 실시간 통신(RTC) 애플리케이션을 테스트 중이므로 ML2 뷰에서 원격 사용자와 연결하고 양방향 스트리밍을 테스트해야 합니다. Agora는 크로스 플랫폼 통신을 지원합니다. 경험이 있는 Agora 개발자는 동일한 App ID를 사용하는 다른 플랫폼에서 RTC 앱을 이미 구축했을 수 있습니다. 빠른 테스트를 위해 Agora의 Basic Video Call 웹 데모를 사용하면 로컬 데스크톱 사용자 및 ML2 사용자의 스트리밍을 모두 확인할 수 있습니다. 참고로 이 웹 데모는 스트림의 실제 종횡비로 동영상을 렌더링하지 않습니다. 따라서 종횡비를 세로로 설정해도 여기에서는 잘린 동영상 프레임만 표시됩니다. 그럼에도 불구하고 스트림에 포함된 내용을 확인하는 데는 충분합니다. 보시다시피, 제 로컬 카메라 뷰는 상단에 표시되고 원격 ML2 뷰는 하단에 표시됩니다. 사용자는 ML2 혼합 현실 환경에서 사용자가 무엇을 하는지 쉽게 관찰할 수 있습니다!
와아! 정말 쉽죠?
파트 5: 토큰 보안
토큰 인증은 선택 사항이지만 생산 환경에서는 필수적입니다. Agora는 이 개념에 대한 자세한 정보와 다양한 서버 프레임워크/언어를 위한 샘플 스크립트를 제공합니다. GitHub에서 한 번의 클릭으로 배포 가능한 서버 프로젝트가 제공됩니다. 따라서 서버 측 세부 사항은 생략하고 클라이언트 측에 집중하겠습니다. ML2 Agora Unity 플러그인에는 서버와의 모든 논리를 처리하는 TokenClient 프리팹이 포함되어 있습니다. 이를 사용하려면 AgoraController 프리팹으로 이동하여 Use Token을 체크하고, TokenClient 객체에 토큰 서버 정보를 입력하세요:
이 구성 단계를 완료한 후 테스트를 다시 실행하고 토큰 클라이언트/서버 환경이 사용자의 양쪽에서 애플리케이션과 정상적으로 작동하는지 확인하세요. 그게 전부입니다!
결론
이 노코드 프로젝트는 AR 및 비AR 사용자를 위해 POV 프로젝트를 쉽게 구현할 수 있음을 보여줍니다. 질문이나 문제가 있을 경우 이슈 페이지 또는 Magic Leap의 토론 포럼에 문의해 주세요. 즐거운 코딩 되세요!
