언리얼 엔진에서 픽셀 스트리밍 시작하기

아래 단계를 따라 언리얼 엔진 프로젝트에서 렌더링된 출력을 로컬 네트워크상의 다른 브라우저와 모바일 디바이스로 스트리밍합니다.

전제 조건

• OS 및 하드웨어 확인: 픽셀 스트리밍 플러그인(Pixel Streaming Plugin)은 특정 타입의 GPU 하드웨어가 탑재된 Windows, Linux 및 Mac 운영체제 컴퓨터에서만 비디오를 인코딩할 수 있습니다. 자세한 내용은 픽셀 스트리밍 레퍼런스를 참고하세요.

• 네트워크 포트 열기: 로컬 네트워크에서 통신을 위해 80, 8888 네트워크 포트를 열어야 합니다. 이러한 디폴트값을 변경해야 하는 경우 픽셀 스트리밍 레퍼런스 문서를 참고하세요.

• 다른 웹 서버 중지: 컴퓨터에서 실행 중인 다른 웹 서버가 있다면 지금 중지합니다.

• IP 주소: 인터넷에서 픽셀 스트리밍을 테스트하려면 컴퓨터의 IP 주소를 알아야 합니다. 먼저 LAN 또는 VPN 내 픽셀 스트리밍으로 시작하는 것이 좋습니다. 이 경우 픽셀 스트리밍 IP 주소로 localhost 또는 127.0.0.1 을 사용할 수 있습니다. 다른 네트워크상의 머신에서 연결하려는 경우 시그널링 서버가 STUN/TURN 서버를 사용하도록 환경설정해야 할 수 있습니다. STUN/TURN 서버를 지정하는 peerConnectionOptions 옵션으로 시그널링 서버를 환경설정하는 방법에 대한 자세한 내용은 픽셀 스트리밍 레퍼런스를 참고하세요.

1 - 언리얼 엔진 애플리케이션 준비하기

이 단계에서는 프로젝트의 독립형 실행파일을 생성합니다.

1. 언리얼 에디터에서 내 프로젝트를 엽니다.

2. 언리얼 에디터의 메인 메뉴에서 편집(Edit) > 플러그인(Plugins) 을 선택합니다.

3. 그래픽(Graphics) 카테고리에서 픽셀 스트리밍(Pixel Streaming) 또는 픽셀 스트리밍 2(Pixel Streaming 2) 플러그인을 찾아 활성화(Enabled) 박스를 선택합니다.

   

4. 지금 재시작(Restart Now)을 클릭하여 프로젝트를 재시작하고 변경사항을 적용합니다.

   

5. 언리얼 에디터로 돌아와 메인 메뉴에서 편집 > 프로젝트 세팅(Project Settings) 을 선택합니다.

6. 프로젝트에 캐릭터가 있으며 휴대폰, 태블릿 등 터치 디바이스의 입력을 활성화하여 캐릭터가 레벨에서 이동할 수 있도록 하려면, 화면에 터치 컨트롤러를 표시하는 것이 좋습니다.
   엔진(Engine) > 입력(Input) 카테고리 에서 항상 터치 인터페이스 표시(Always Show Touch Interface) 세팅을 찾아 활성화합니다.

   

   이는 선택사항으로, 모든 프로젝트에 필요하지는 않습니다. 하지만 삼인칭 템플릿과 같은 프로젝트의 경우 프로젝트의 플레이어 컨트롤러가 터치 입력을 지원하는 한, 사용자는 스트리밍되는 애플리케이션을 터치 디바이스로 제어할 수 있습니다.

7. 메인 메뉴에서 편집 > 에디터 개인설정...(Editor Preferences...) 을 선택합니다.

8. 레벨 에디터(Level Editor) > 플레이(Play) 카테고리에서 추가 실행 파라미터(Additional Launch Parameters) 세팅을 찾아 값을 -PixelStreamingURL=ws://127.0.0.1:8888 로 설정합니다.

   

9. 프로젝트를 Windows용으로 패키징합니다. 언리얼 에디터의 메인 메뉴에서 파일(Files) > 프로젝트 패키지(Package Project) > Windows(64비트)(Windows (64-bit)) 를 선택합니다.

   

10. 언리얼 에디터를 통해 패키지로 만든 버전의 프로젝트를 배치할 컴퓨터의 폴더로 이동하여 폴더 선택(Select Folder) 을 클릭합니다.

    

11. 언리얼 에디터가 패키징 프로세스를 시작합니다.

    

12. 패키징 프로세스가 완료되면 위의 10단계에서 선택한 폴더로 이동합니다. 다음과 유사한 콘텐츠가 있는 Windows 폴더를 찾을 수 있을 것입니다.

    

13. 패키징된 애플리케이션을 시작할 때마다 위의 8단계에서 설정한 것과 동일한 명령줄 플래그를 전달해야 합니다. 이를 수행하는 한 가지 방법은 바로가기를 구성하는 것입니다.

    1. 바로 가기 프로퍼티 창의 바로 가기 탭에서 타깃(Target) 필드 끝에 -PixelStreamingURL=ws://127.0.0.1:8888 텍스트를 추가하고 확인(OK) 을 클릭합니다.

       

    2. Alt 를 누르고 .exe 파일을 드래그하여 같은 폴더(또는 컴퓨터의 다른 원하는 위치)에 새 바로 가기를 생성합니다.

       

    3. 바로 가기를 우클릭하고 컨텍스트 메뉴에서 프로퍼티(Properties)를 선택합니다.

       

최종 결과

이제 픽셀 스트리밍 플러그인이 활성화된, 패키지로 만든 독립형 언리얼 엔진 애플리케이션이 생겨 렌더링된 프레임과 오디오를 스트리밍할 준비를 마쳤습니다.

2 - 픽셀 스트리밍 서버 얻기

최근 픽셀 스트리밍에 적용된 변경사항으로 인해 픽셀 스트리밍의 프론트엔드 및 웹 서버 엘리먼트가 외부 저장소로 옮겨졌습니다. 이를 픽셀 스트리밍 인프라라고 합니다.

픽셀 스트리밍 인프라에 액세스하는 데는 몇 가지 방법이 있습니다.

1. https://github.com/EpicGamesExt/PixelStreamingInfrastructure에서 github repository에 직접 액세스합니다.

2. 선호하는 터미널에서 git clone --branch UE5.4 https://github.com/EpicGamesExt/PixelStreamingInfrastructure.git 을 사용합니다(git 설치 필요). UEEX.Y를 원하는 브랜치(예: 5.5)로 대체합니다.

3. \Engine\Plugins\Media\PixelStreaming\Resources\WebServers로 이동하여 get_ps_servers 명령을 실행합니다. Windows에서는 .bat 스크립트를 사용하고, Linux 또는 Mac에서는 .sh 스크립트를 사용해야 합니다. 이렇게 하면 픽셀 스트리밍 인프라의 관련 브랜치를 폴더로 가져옵니다.

3 - 서버 시작하기

이 단계에서는 언리얼 엔진 애플리케이션과 클라이언트의 브라우저 간에 피어 투 피어 연결을 설정하는 데 도움이 되는 웹 서비스를 시작합니다. 이전 단계를 완료하지 않은 경우 이 서버에 액세스할 수 없습니다.

1. 픽셀 스트리밍 인프라를 가져온 위치의 SignallingWebServer 폴더에서 시그널링 서버의 위치를 찾습니다.

   

2. 시그널링 서버를 준비하려면 PowerShell을 관리자 권한으로 열고 SignallingWebServer\platform_scripts\cmd\setup.ps1을 실행합니다. 이렇게 하면 모든 필수 종속성이 설치됩니다.

3. SignallingWebServer\platform_scripts\cmd\start_with_stun.bat를 실행하여 시그널링 서버를 시작합니다. 서버가 시작되고 연결을 수락할 준비가 되면 콘솔 창에 다음과 같은 줄이 보입니다.

   C++

   WebSocket listening to Streamer connections on :8888
           WebSocket listening to Players connections on :80
           Http listening on *: 80

   Copy full snippet(3 lines long)

4. 이제 이전 섹션에서 생성한 바로가기를 통해 언리얼 엔진 애플리케이션을 시작합니다. 또는 명령줄에서 애플리케이션을 실행하고 싶다면 다음 명령을 실행합니다.

   C++

   MyPixelStreamingApplication.exe -PixelStreamingURL=ws://127.0.0.1:8888

   Copy full snippet(1 line long)

최종 결과

언리얼 엔진 애플리케이션이 시그널링 및 웹 서버에 연결되면, 시그널링 및 웹 서버에서 열린 콘솔 창에 다음 출력 줄이 보일 것입니다.

Streamer connected

이는 이제 픽셀 스트리밍 플러그인이 활성화된 상태로 언리얼 엔진 애플리케이션이 실행되고 있으며, 프론트엔드 시그널링 및 웹 서버가 언리얼 엔진 애플리케이션에 연결 클라이언트를 라우팅할 준비가 되었다는 뜻입니다.

이 시점에서 컴퓨터에서 작동하는 데 필요한 구성을 모두 마쳤으며, 브라우저를 연결할 일만 남았습니다.

4 - 연결!

이 단계에서는 다수의 서로 다른 디바이스에서 실행되는 웹 브라우저를 픽셀 스트리밍 브로드캐스트에 연결합니다.

1. 언리얼 엔진 애플리케이션을 실행 중인 컴퓨터에서 Alt + Tab을 눌러 언리얼 엔진 애플리케이션에서 포커스를 전환하고, 지원되는 웹 브라우저를 시작합니다. Google Chrome이나 Mozilla Firefox가 안전합니다.

2. 주소창에서 http://127.0.0.1 로 이동합니다. 로컬 머신의 IP 주소이므로 시그널링 서버가 요청을 처리합니다.

   

3. 연결할 페이지를 클릭한 다음, 플레이 버튼을 다시 클릭하여 스트림을 시작합니다.

4. 이제 애플리케이션에 연결되었으며, 다음과 같이 플레이어 웹 페이지 중앙에 렌더링된 출력 스트리밍이 보일 것입니다.

   

   디폴트 플레이어 페이지는 이미 키보드, 마우스, 터치스크린 입력을 언리얼 엔진에 전달하도록 구성되어 있으므로, 애플리케이션을 직접 제어하는 경우와 똑같은 방식으로 앱을 제어하고 탐색할 수 있습니다.

5. 창 왼쪽의 추가(+) 버튼을 클릭하여 스트림 제어를 위한 기본 옵션이 펼칩니다. 사용 가능한 옵션에 대한 자세한 내용은 https://github.com/EpicGamesExt/PixelStreamingInfrastructure 리포지토리를 참조하세요.

   프론트엔드 컨트롤이 구현되는 방식을 확인하려면 Frontend/의 내용을 참조하세요.

6. 이제 네트워크에서 다른 컴퓨터 또는 모바일 디바이스를 찾습니다. 같은 단계를 반복하되, http://127.0.0.1을 사용하는 대신 브라우저를 언리얼 엔진 애플리케이션과 시그널링 서버가 실행되는 컴퓨터의 IP 주소로 리디렉션합니다.

   

최종 결과

이제 컴퓨터에서 하나의 언리얼 엔진 인스턴스가 실행되어 로컬 네트워크를 통해 여러 디바이스로 미디어 스트림을 브로드캐스트합니다. 연결된 각 디바이스에서는 모두 동일한 데스크톱 PC에서 렌더링된, 같은 레벨의 같은 뷰가 보입니다.

기본적으로, 연결된 모든 디바이스는 언리얼 엔진 애플리케이션에 대한 컨트롤을 공유하여 모든 키보드, 마우스, 터치스크린 입력을 전달합니다.

데스크톱	iPhone	Android

5 - 직접 해보기!

위의 단계에서는 단일 서버 호스트와 디폴트 플레이어 페이지를 사용하는 비교적 단순한 구성을 안내했습니다. 약간의 노력을 기울이면 픽셀 스트리밍 시스템을 훨씬 더 발전시킬 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.

• 프로젝트의 요구 사항에 부응하여 플레이어 HTML 페이지를 완전히 재설계할 수 있습니다. 언리얼 엔진 애플리케이션으로 누가 입력을 전송할 수 있는지 제어하고, 커스텀 게임플레이 이벤트를 언리얼 엔진으로 전송하는 HTML5 UI 엘리먼트를 페이지에 생성할 수도 있습니다. 자세한 내용은 플레이어 웹 페이지 커스터마이징을 참고하세요. 실제 예시는 에픽게임즈 런처의 학습 탭에 있는 픽셀 스트리밍 데모 를 참고하세요.

• 개방형 인터넷을 통해, 또는 여러 서브넷에 걸쳐 픽셀 스트리밍 서비스를 제공해야 하는 경우 몇 가지 고급 네트워크 환경설정이 필요할 수 있습니다. 아니면 각 연결 클라이언트가 별도의 언리얼 엔진 인스턴스나 다른 컨트롤을 제공하는 별도의 플레이어 페이지를 통해 콘텐츠를 스트리밍하는 것을 선호할 수도 있습니다.
  이와 같은 주제에 대한 자세한 내용은 호스팅 및 네트워킹 가이드를 참고하세요.

• 픽셀 스트리밍 시스템의 각 컴포넌트에는 인코딩 해상도, 화면 크기, IP 주소, 통신 포트 등을 제어하는 데 사용할 수 있는 몇 가지 환경설정 프로퍼티가 있습니다. 이러한 모든 프로퍼티와 설정 방법에 대한 자세한 내용은 픽셀 스트리밍 레퍼런스 문서를 참고하세요.

• 픽셀 스트리밍의 새로운 실험 단계 기능을 확인하려면 실험 단계 픽셀 스트리밍 기능 페이지를 참고하세요.

• 스트리밍 튜닝 가이드 페이지에서는 스트림 퀄리티와 세팅을 추가로 제어할 수 있습니다.