실험단계 픽셀 스트리밍 기능

아래의 여러 기능은 픽셀 스트리밍에 구현된 흥미로운 새 툴입니다. 새로운 가능성을 제시해 주지만, 불안정할 수 있으니 주의해서 사용하시기 바랍니다. 후속 언리얼 엔진 출시 버전에서 변경되거나 제거될 수 있는 기능이므로, 제품의 필수 컴포넌트는 이 기능으로 빌드하지 않는 것을 권장합니다.

픽셀 스트리밍 플레이어

픽셀 스트리밍 플레이어를 사용하면 언리얼 엔진 프로젝트에서 활성화된 픽셀 스트리밍을 3D 공간 내에 표시할 수 있습니다. 이를 통해 클라우드로 호스팅되는 콘텐츠를 로컬 애플리케이션 내 미디어 소스로 표시할 수 있습니다.

버전 5.2 기준으로 픽셀 스트리밍 플레이어는 현재 작동하지 않습니다. 새로운 AVCodecs 비디오 코딩 모듈을 사용하도록 업데이트하는 중이지만, 이러한 변경은 버전 5.3에서야 준비될 예정입니다.

픽셀 스트리밍 플레이어 구성하기

1. 픽셀 스트리밍 및 픽셀 스트리밍 플레이어 플러그인을 활성화합니다.

2. 새 블루프린트(Blueprint) 클래스(액터)를 생성합니다. 저장하고 원하는 이름으로 명명합니다.

3. 새 블루프린트 클래스를 열고 PixelStreamingSignalling 및 PixelStreamingPeer 라는 2개의 컴포넌트를 추가합니다.

   

4. PixelStreamingSignalling 컴포넌트를 이벤트 그래프로 드래그합니다. 이 노드에서 드래그하여 Connect 노드를 생성합니다. BeginPlay 를 새 노드의 입력에 연결하고 URL 값으로 'ws://localhost' 를 입력합니다.

   

5. PixelStreamingSignalling 컴포넌트를 선택하고 디테일(Details) 창에서 On Config, On Offer, On Ice Candidate 이벤트를 추가합니다. PixelStreamingPeer 노드에서 On Ice Candidate 이벤트도 추가합니다.

1. On Config (PixelStreamingSignalling) 노드에서 드래그하여 Set Config (Pixel Streaming Peer) 노드를 생성합니다. Set Config와 On Config의 Config 값을 연결합니다.

   

2. On Offer (PixelStreamingSignalling) 노드에서 드래그하여 Create Answer 노드를 생성합니다. On Offer 노드의 Offer 출력을 Create Answer 노드의 Offer 입력에 연결합니다. Create Answer 노드의 Return Value 출력에서 드래그하여 Send Answer 노드를 생성합니다. Return Value 출력을 Send Answer 노드의 Answer 입력에 연결합니다.

   

3. On Ice Candidate (PixelStreamingSignalling) 노드의 Candidate 출력에서 드래그하여 Receive Ice Candidate 노드를 생성합니다. Candidate 출력을 Receive Ice Candidate 노드의 Candidate 입력에 연결합니다.

   

4. On Ice Candidate (PixelStreamingPeer) 노드의 Candidate 출력에서 드래그하여 Send Ice Candidate (PixelStreamingSignalling) 노드를 생성합니다. Send Ice Candidate (PixelStreamingSignalling) 노드의 Candidate 입력에 연결해야 합니다.

   

5. 위의 과정을 정확히 마친다면 최종 블루프린트는 다음과 같은 모습입니다.

   

6. 블루프린트에서 PixelStreamingPeer 컴포넌트를 선택합니다. 디테일 창의 프로퍼티 아래에 픽셀 스트리밍 비디오 싱크(Pixel Streaming Video Sink) 가 있습니다. 드롭다운을 클릭하고 미디어 텍스처(Media Texture) 를 선택합니다. 적절한 이름을 짓고 저장합니다.

   

7. 메시지가 나타나면 비디오 출력 미디어 에셋(Video Output Media Asset) 을 선택하고 저장합니다.

   

8. 블루프린트 액터(Blueprint Actor) 를 씬으로 드래그합니다. 간단한 평면 오브젝트를 생성하고 크기와 모양이 적절히 표시되도록 조절합니다.

   

9. 저장된 NewMediaPlayer_Video 를 콘텐츠 브라우저에서 씬의 평면으로 직접 드래그합니다. 이렇게 하면 자동으로 머티리얼이 생성되어 오브젝트에 적용됩니다.

   

10. 이 프로젝트의 외부에서 기본 로컬 픽셀 스트리밍을 시작합니다. 시그널링 서버를 시작하고 관련 픽셀 스트리밍 실행인자로 애플리케이션을 실행합니다.

11. 씬을 재생합니다. 이제 외부 픽셀 스트리밍이 씬의 평면에 표시됩니다!

    

VCam

VCam은 VCam 컴포넌트를 씬 내 액터에 어태치하고 레벨 뷰포트의 비디오 콘텐츠를 출력 제공자로 스트리밍할 수 있는 새로운 기능입니다.

현재 단계에서 VCam의 용도는 주로 버추얼 프로덕션에 활용하는 것으로, 라이브 링크 VCam iOS 애플리케이션에 페어링하거나 ARKit 트래킹에 사용할 수 있습니다. 픽셀 스트리밍이 터치 이벤트를 처리하고 레벨 뷰포트를 iOS 디바이스에 리얼타임 비디오 피드로 스트리밍하므로 언리얼 엔진에서 버추얼 카메라를 파일럿하는 데 유용합니다. 라이브 링크 VCam에 대한 자세한 정보는 iOS 라이브 링크 VCam 사이트를 참고하세요.

VCam 사용 방법

1. 버추얼 카메라 플러그인을 활성화합니다.

   

2. 씬 액터 내 어디든 VCam 컴포넌트를 추가합니다. 아래 예시에서는 위 가이드에서 생성한 픽셀 스트리밍 플레이어 블루프린트에 어태치했습니다.

   

3. VCam 컴포넌트에서 출력 제공자(Output Providers) 로 이동하여 드롭다운에서 픽셀 스트리밍 제공자(Pixel Streaming Provider) 를 추가합니다. 새 출력(Output) 섹션을 펼칩니다.

   

4. 스트리밍을 시작하거나 멈추려면 출력 아래의 활성 여부(Is Active) 체크 박스를 토글합니다.

   

5. 스트리밍이 시작되면 로컬 브라우저를 열고 127.0.0.1으로 이동하여 스트리밍되는 디스플레이를 보거나, 라이브 링크 iOS 애플리케이션을 열고 127.0.0.1으로 이동하여 연결을 누릅니다.

   

브라우저를 통해 스트림과 상호작용하고 싶다면 브라우저에서 컨트롤 패널을 열고 컨트롤 체계(Control Scheme) 를 호버링(Hovering) 으로 변경합니다.

마이크 사용

이제 픽셀 스트리밍을 통해 웹 브라우저에서 WebRTC 오디오로 엔진 내에서 특정 피어/플레이어 마이크를 재생할 수 있습니다.

프로젝트 내 마이크 사용 구성하기

프로젝트가 마이크와 호환되도록 하는 방법은 놀라울 정도로 간단합니다. 프로젝트에 딱 하나의 요소만 추가하면 됩니다.

1. 픽셀 스트리밍 플러그인을 활성화합니다.

2. 씬의 아무 액터에 PixelStreamingAudio 컴포넌트를 추가합니다. 기본 세팅을 그대로 사용하면 됩니다.

   

각 오디오 컴포넌트는 픽셀 스트리밍 플레이어 ID를 사용하여 특정 픽셀 스트리밍 플레이어/피어와 연결됩니다.

스트림에서 마이크 사용하기

1. 프로젝트에 PixelStreamingAudio 컴포넌트가 구성되면 평소처럼 픽셀 스트리밍을 위해 픽셀 스트리밍 실행 실행인자로 패키징된 또는 독립형 애플리케이션을 실행하고 시그널링 서버를 실행합니다.

2. 웹 브라우저를 통해 시그널링 서버에 접속합니다.

3. 프론트엔드 세팅 패널을 열고 Use Mic 를 true 로 설정합니다. 하단의 재시작(Restart) 을 클릭하여 다시 연결합니다.

   

4. 브라우저가 마이크 사용 권한을 요청할 수 있으며, 이때 액세스를 허용합니다.

   

5. 마이크에 대고 말하면 스트림에서 본인의 목소리가 재생되는 것을 들을 수 있습니다!

가상현실의 픽셀 스트리밍

가상현실(VR) 픽셀 스트리밍은 사용자에게 픽셀 스트리밍을 통해 VR 호환 애플리케이션에 접속할 수단을 제공하는 새로운 기능입니다. 이를 통해 사용자는 로컬 애플리케이션을 실행하지 않아도 자신의 헤드셋으로 VR 경험을 즐길 수 있습니다.

프로젝트 구성하기

이 예시에서는 가상현실 템플릿 프로젝트를 사용합니다.

1. 가상현실 템플릿을 사용하여 새 프로젝트를 생성합니다.

   

2. 픽셀 스트리밍 플러그인을 활성화하고 OpenXR 플러그인을 비활성화합니다. 에디터를 다시 시작합니다.

   
   

3. 콘텐츠 브라우저에서 'Asset_Guideline'을 검색하여 'B_AssetGuideline_VRTemplate'을 삭제합니다. 메시지가 나타나면 강제 삭제(Force Delete) 를 클릭합니다.

   

4. 이제 콘텐츠 브라우저에서 'VRPawn'을 검색합니다. VRPawn을 더블클릭하여 연 후 블루프린트를 컴파일합니다. 제대로 작동하는 경우 컴파일이 성공적으로 이루어질 것입니다. 이 블루프린트를 저장한 후 닫습니다.

   

5. 에디터 개인설정(Editor Preferences) > 레벨 에디터(Level Editor) > 재생(Play) 을 열고 -PixelStreamingURL=ws://127.0.0.1:8888 -PixelStreamingEnableHMD 를 추가합니다.

   

필수 인증서 생성하기

VR과 픽셀 스트리밍을 함께 사용하려면 HTTPS 인증서가 필요합니다. WebXR 표준의 경우 API를 안전한 연결(HTTPS)을 통해 로드된 사이트에서만 사용할 수 있어야 하기 때문입니다. 프로덕션 용도로는 WebXR을 지원하는 안전한 출처를 사용해야 합니다. 이러한 요구사항에 대한 추가 정보는 https://developer.oculus.com/documentation/web/port-vr-xr/#https-is-required에서 찾을 수 있습니다.

이 예시에서는 Gitbash를 사용하여 기본 인증서를 구성하겠습니다. 이전에 Gitbash를 설치하지 않은 경우, https://www.atlassian.com/git/tutorials/git-bash 페이지에서 단계별 Gitbash 설치 방법을 확인하실 수 있습니다.

1. 아래와 같이 SignallingWebServer 디렉터리 내에 certificates 폴더를 생성합니다.

   

2. certificates 디렉터리 내에서 우클릭하여 Gitbash를 엽니다. openssl req -x509 -newkey rsa:4096 -keyout client-key.pem -out client-cert.pem -sha256 -nodes 를 입력합니다.

   

3. 명령이 완료될 때까지 Enter를 여러 번 누릅니다. 인증서 폴더에 .pem 파일 2개가 생성되면 명령이 완료되었다는 의미입니다.

   

4. SignallingWebServer 폴더에서 config.json 파일을 열고 UseHTTPS 값을 true 로 설정합니다.

   

이제 VR 애플리케이션을 실행하고 테스트할 준비가 완료되었습니다!

위 과정에서 생성된 인증서는 테스트 전용입니다. 완전한 클라우드 디플로이를 위해서는 그에 맞는 인증서를 구성해야 합니다.

VR 스트림 참가하기

이 예시에서는 Meta Quest 2를 사용합니다.

1. \SignallingWebServer\platform_scripts\cmd 의 Start_Signalling.ps1 스크립트를 시작합니다.

2. 에디터로 돌아가 애플리케이션을 독립형으로 실행합니다. 이전 단계에서 실행 실행인자를 추가했기 때문에, 애플리케이션이 완전히 시작되면 시그널링 서버에 접속할 것입니다.

3. 이제 VR 헤드셋을 사용하여 웹 브라우저를 열고 컴퓨터 IP 주소를 입력합니다. '연결이 안전하지 않습니다(Connection not secure)' 페이지가 나타나면 '고급(Advanced)' 탭을 열고 'IP(으)로 이동(Proceed to IP)'을 클릭합니다.

   

4. 애플리케이션이 브라우저 창의 2개 뷰에서 스트리밍되는 것을 볼 수 있습니다. 왼쪽의 XR 버튼을 클릭하여 VR로 전환합니다.

   

5. 이것으로 끝입니다! 이제 픽셀 스트리밍되는 VR 프로젝트가 열렸을 것입니다.