픽셀 스트리밍 샘플 프로젝트

픽셀 스트리밍 데모는 언리얼 엔진 5(UE5) 콘텐츠를 데스크톱이나 모바일 디바이스에서 웹 브라우저를 사용하여 라이브 스트림으로 볼 수 있도록 구성하는 방법을 보여줍니다. 다음과 같은 내용을 포함합니다.

• UE 애플리케이션에서 생성한 미디어 스트림을 재생하고, 원격으로 엔진을 제어하기 위한 커스텀 UI 엘리먼트를 제공하는 HTML 플레이어 페이지

• 픽셀 스트리밍 플러그인을 사용하는 미디어 스트림을 생성하고, HTML 플레이어 페이지에서 발생한 커스텀 명령에 응답하도록 이미 구성된 UE5 프로젝트

이 샘플을 UE5 콘텐츠와 상호작용하는 고유한 커스텀 HTML5 플레이어를 빌드하기 위한 모델로 사용할 수 있습니다.

전제조건:

• 픽셀 스트리밍 시스템의 기초를 이해해야 합니다.

• 시작하기 가이드의 모든 지침을 최소 한 번 수행하여 필요한 모든 요소를 설치하고 디폴트 플레이어 페이지에서 작동하는지 확인해야 합니다.

시작하기

1. 에픽게임즈 런처의 학습(Learn) 탭에서 픽셀 스트리밍(Pixel Streaming) 쇼케이스를 찾고, 이를 사용하여 새 언리얼 엔진 프로젝트를 시작합니다.

2. 픽셀 스트리밍 인프라의 관련 분기를 보유하고 있어야 합니다.

   언리얼 엔진 버전과 매칭되는 버전의 인프라를 보유하는 것이 매우 중요합니다. 예를 들어 언리얼 엔진 버전이 5.2이면 인프라 버전도 5.2여야 합니다. 인프라에 대한 자세한 내용은 이 페이지를 참조하세요.

3. 언리얼 에디터에서 PixelStreamingDemo.uproject 파일을 엽니다.

4. 픽셀 스트리밍 시작하기 페이지에 나와 있는 프로세스를 따라 다음 작업을 수행합니다.

   • 프로젝트를 패키지로 만들거나 언리얼 에디터에서 독립형 게임으로 시작합니다.

   • 시그널링 및 웹 서버를 시작합니다(위의 보유 인프라 사용).
   • 대안: 픽셀 스트리밍 툴바를 사용하여 시그널링 서버를 시작합니다.
5. 웹 브라우저를 열고, 시그널링 및 웹 서버에서 호스팅하는 showcase.html 플레이어 페이지로 이동합니다. 예시는 다음과 같습니다. http://<your-server-ip-address>/showcase.html

쇼케이스 HTML과의 상호작용

쇼케이스의 커스텀 프론트엔드를 통해 씬의 다양한 엘리먼트를 제어할 수 있습니다. 왼쪽 패널의 예시 드롭다운에는 다양한 컨트롤이 포함되어 있으며, 각 컨트롤은 씬 및 픽셀 스트리밍 자체의 다양한 엘리먼트를 선보입니다.

• UE로 데이터 전송(Send Data to UE): 이 섹션을 통해 실행 중인 애플리케이션에서 캐릭터 및 캐릭터 스킨을 변경할 수 있습니다.

  

• UE로 명령 전송(Send Commands to UE): 이 섹션에 포함된 명령을 UE5로 전송하여 애플리케이션이 실행되는 해상도를 변경할 수 있을 뿐만 아니라, 화면에 표시되는 추가 통계 정보도 토글할 수 있습니다.

  

'명령 전송' 및 '데이터 전송' 카테고리와 관련된 각각의 정보는 화면 하단의 디테일 패널을 참조하세요.

플레이어 페이지 제어하기

픽셀 스트리밍 시스템을 올바르게 구성하고, 지원되는 웹 브라우저를 사용하여 커스텀 showcase.html 플레이어 페이지에 액세스하면, 다음 섹션에 나와 있는 컨트롤을 사용하여 실행 중인 언리얼 엔진 애플리케이션과 상호작용할 수 있습니다.

1. 페이지 좌측의 드롭다운 메뉴를 사용하여 UE로 명령 전송과 UE로 데이터 전송 등 다양한 예시 간에 전환할 수 있습니다.

2. 이 디테일 패널은 현재 선택된 예시에 대한 정보를 제공합니다.

3. 뷰어 위젯은 다음과 같이 언리얼 엔진 애플리케이션에 대한 직접적인 마우스 및 터치 컨트롤과 현재 픽셀 스트리밍 기능에 대한 정보를 제공합니다.

   컨트롤	효과
   클릭하여 드래그, 또는 터치하여 드래그	현재 캐릭터 주변에서 카메라를 회전합니다.
   마우스 휠	카메라를 줌 인 및 줌 아웃합니다.

4. 다음 버튼을 클릭하여 전체화면으로 전환하고 스트림 세팅 및 스트림 정보를 엽니다. 이는 디폴트 인터페이스에 있는 버튼과 동일합니다.

   컨트롤	효과
   	뷰어를 전체화면 모드로 전환합니다. Esc 키를 누르면 종료됩니다.
   	스트림 세팅 패널을 엽니다. 이 패널은 픽셀 스트리밍 인프라에서 기본적으로 제공되며, 실행 중인 스트림의 광범위한 환경설정이 가능합니다.
   	스트림 정보 패널을 엽니다. 이 패널에는 비트레이트, 패킷 손실, 프레임 레이트 등 스트림의 리얼타임 WebRTC 세션 통계가 포함되어 있습니다.

커스텀 UI 이벤트 이해하기

showcase.html 커스텀 HTML 플레이어 페이지는 PixelStreamingInfrastructure/Frontend/implementations/EpicGames/src/ 디렉터리의 showcase.ts 파일을 사용하여 다양한 명령을 제어합니다.

언리얼 엔진 애플리케이션으로 릴레이되는 마우스, 키보드, 터치 이벤트 캡처의 경우 아래와 같이 PixelStreamingInfrastructure/Frontend/library/src/Inputs/ 디렉터리로 이동합니다.

플레이어 페이지에 있는 대부분의 UI 엘리먼트는 emitUIInteraction() 함수를 호출하여 서로 다른 정보를 언리얼 엔진 애플리케이션으로 다시 전달함으로써 구현됩니다. 각 UI 항목의 작동 방식은 다음과 같은 방법으로 파악할 수 있습니다.

1. 먼저 showcase.ts 파일에서 파악하고자 하는 UI 항목을 찾고, 해당 버튼을 누를 때 JavaScript 함수가 무엇을 트리거하도록 설정되어 있는지 확인합니다. 예를 들어, 이 코드 블록에서는 버튼으로 첫 번째 캐릭터 스킨을 변경하도록 구성했습니다.

       const skin1Btn = document.createElement("button");
       skin1Btn.onclick = () => { this._onSkinClicked(0); }
   
   Copy full snippet

   const skin1Btn = document.createElement("button"); skin1Btn.onclick = () => { this._onSkinClicked(0); }

2. showcase.ts 파일에서 바운드 함수의 구현을 찾습니다. 예를 들어, _onSkinClicked(); 함수는 사용하고자 하는 캐릭터 스킨을 설정하는 파라미터를 받습니다. 그런 다음 emitUIInteraction() 함수에 아래의 JSON 개체를 전달합니다.

       private _onSkinClicked(skinIndex : number) {
       this._pixelStreaming.emitUIInteraction({ Skin: skinIndex });
   
   Copy full snippet

   private _onSkinClicked(skinIndex : number) { this._pixelStreaming.emitUIInteraction({ Skin: skinIndex });

3. 언리얼 엔진 프로젝트에서 이러한 이벤트는 Blueprints/Pawn/Orbit_Controller 클래스에 의해 응답됩니다.

   

   이 클래스를 더블클릭하여 이벤트 그래프를 엽니다.

4. JSON 이벤트 바인딩(Bind JSON Events) 영역에서 emitUIInteraction() 이 연결된 브라우저에서 호출될 때마다 Bind Event to OnPixelStreamingInputEvent 노드가 OnJSONEvent 이벤트를 핸들러로 등록하는 데 사용됩니다.

   

5. OnJSONEvent 이벤트가 트리거될 때마다 블루프린트는 Get Json String Value 를 호출하여 플레이어 페이지에 의해 emitUIInteraction() 함수로 전달되었던 JavaScript 개체에 저장된 키와 값을 확인합니다. 이 값을 사용하여 트리거해야 하는 다른 이벤트를 결정합니다. 예를 들어 이벤트에서 Skin 필드가 포함된 입력을 수신하는 경우 Change Skin 이벤트를 호출합니다.

   

픽셀 스트리밍 위젯

게임 창 왼쪽 상단의 픽셀 스트리밍 기능 위젯은 몇 가지의 유용한 픽셀 스트리밍 엘리먼트를 보여주기 위해 설계되었습니다. 이러한 기능은 각자의 목적에 따라 손쉽게 조정할 수 있으며, 최소한의 노력으로 픽셀 스트리밍에 포함시킬 수 있습니다.

플레이 중에 'F'를 누르면 위젯에서 각 옵션이 번갈아 선택되며, 각 기능을 테스트하는 방법을 설명합니다. 기능은 다음과 같습니다.

• 프레임 프리즈(Freeze Frame): 단일 프레임에서 활성 픽셀 스트림을 프리즈하거나 프리즈 해제합니다. 애플리케이션이 계속 백그라운드에서 실행되고 있다는 점에 유의하세요.

  

• 오디오 컴포넌트(Audio Component): 스트림의 마이크 오디오 입력을 WebRTC를 통해 스트리밍하고 UE5를 통해 재생합니다.

  

• 픽셀 스트리밍 통계(Pixel Streaming Stats): 콘솔을 통해 stat PixelStreaming 및 stat PixelStreamingGraphs 정보 디스플레이를 토글합니다.