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

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

이 페이지의 단계별 이미지에서는 삼인칭 블루프린트(Third-Person Blueprint) 템플릿으로 제작한 프로젝트를 사용하여 절차를 설명합니다. 하지만 모든 언리얼 엔진 프로젝트에서 이와 동일한 단계를 따르면 됩니다.

전제조건

• OS 및 하드웨어 확인: 픽셀 스트리밍 플러그인(Pixel Streaming Plugin)은 특정 타입의 GPU 하드웨어가 탑재된 Windows 또는 Linux 운영체제 컴퓨터에서만 비디오를 인코딩할 수 있습니다. 자세한 내용은 픽셀 스트리밍 레퍼런스를 참조하세요.
• node.js 설치: 컴퓨터에 node.js 가 설치되어 있지 않은 경우 다운로드 및 설치해야 합니다.
• 네트워크 포트 열기: 로컬 네트워크에서 통신을 위해 80번, 8888번 네트워크 포트가 열려 있어야 합니다. 이러한 디폴트 변경해야 하는 경우 픽셀 스트리밍 레퍼런스를 참조하세요.
• 다른 웹 서버 중지: 컴퓨터에서 다른 웹 서버가 실행 중인 경우 일단 중지합니다.
• IP 주소: 인터넷에서 픽셀 스트리밍을 테스트하려면 컴퓨터의 IP 주소를 알아야 합니다.
  먼저 LAN 또는 VPN 내 픽셀 스트리밍으로 시작하는 것이 좋습니다. 이 경우 픽셀 스트리밍 IP 주소로 localhost 또는 127.0.0.1 을 사용할 수 있습니다. 다른 네트워크상의 머신에서 연결하려는 경우 시그널링 서버가 STUN/TURN 서버를 사용하도록 환경설정해야 할 수 있습니다. STUN/TURN 서버를 지정하는 peerConnectionOptions 로 시그널링 서버를 환경설정하는 방법에 대한 자세한 내용은 픽셀 스트리밍 레퍼런스를 참조하세요.

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

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

• 픽셀 스트리밍 플러그인은 프로젝트를 패키지로 만든 애플리케이션으로 실행하거나 언리얼 에디터에서 독립형 게임(Standalone Game) 옵션을 사용하여 실행할 때만 작동합니다.
• 픽셀 스트리밍 플러그인이 애플리케이션의 오디오를 추출하여 스트리밍하도록 하려면 언리얼 엔진을 특수 명령줄 플래그 -AudioMixer 로 시작해야 합니다. 아래 절차는 두 시나리오를 위한 구성 방법을 보여 줍니다.

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

3. 그래픽(Graphics) 카테고리에서 Pixel Streaming 플러그인을 찾아 활성화 박스에 체크합니다.

   

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

   

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

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

   

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

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

2. 레벨 에디터(Level Editor) > 플레이(Play) 카테고리에서 추가 실행 옵션 파라미터(Additional Launch Parameters) 세팅을 찾아 값을 -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888 로 설정합니다.

   

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

   

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

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

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

1. 패키지로 만든 애플리케이션을 시작할 때마다 위의 8단계에서 설정한 것과 같은 명령줄 플래그를 전달해야 합니다. 이를 수행하는 한 가지 방법은 바로 가기를 구성하는 것입니다. 1. Alt 를 누른 채로 .exe 파일을 드래그하여 같은 폴더(또는 컴퓨터의 다른 원하는 위치)에 새 바로 가기를 생성합니다.

   

2. 바로 가기를 우클릭하고 컨텍스트 메뉴에서 속성(Properties) 을 선택합니다.

3. 바로 가기 속성(Shortcut Properties) 창의 바로 가기(Shortcut) 탭에서 대상(Target) 필드 끝에 텍스트 -AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888 을 덧붙이고 확인(OK) 을 클릭합니다.

픽셀 스트리밍 시스템이 제대로 작동된다면 -RenderOffScreen 명령줄 파라미터를 추가하는 것이 좋습니다. 언리얼 엔진 애플리케이션 창이 실수로 최소화되는 경우 픽셀 스트리밍 비디오 및 입력 스트림의 작동이 중단됩니다. -RenderOffScreen 은 애플리케이션을 표시되는 창 없이 헤드리스 모드에서 실행하여 이러한 일을 방지합니다.

최종 결과

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

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

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

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

1. 다음 github repository에 직접 액세스합니다. https://github.com/EpicGames/PixelStreamingInfrastructure
2. 선호하는 터미널에서 git clone --branch UE5.2 https://github.com/EpicGames/PixelStreamingInfrastructure.git 을 사용합니다(git 설치 필요).
3. \Engine\Plugins\Media\PixelStreaming\Resources\WebServers 로 이동하여 get_ps_servers 명령을 실행합니다. Windows의 경우 .bat 스크립트를, Linux의 경우 .sh 스크립트를 사용해야 합니다. 이렇게 하면 픽셀 스트리밍 인프라의 관련 브랜치를 해당 폴더에 자동으로 가져올 수 있습니다.

위의 Git 명령은 인프라 5.2 브랜치를 가져옵니다. 다른 브랜치가 필요한 경우 그에 맞게 Git 명령을 수정하면 됩니다.

픽셀 스트리밍 프론트엔드 및 웹 서버 변경사항에 대한 자세한 내용은 픽셀 스트리밍 인프라를 참조하세요.

3 - 서버 시작하기

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

다음 단계에서는 Windows를 사용하고 있다고 가정합니다. 하지만 Linux도 SignallingWebServer\platform_scripts\bash 폴더 내 스크립트를 실행한다는 점을 제외하면 프로세스는 동일합니다.

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

   

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

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

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

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

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

       MyPixelStreamingApplication.exe -PixelStreamingIP=127.0.0.1 -PixelStreamingPort=8888
   Copy full snippet

   MyPixelStreamingApplication.exe -PixelStreamingIP=127.0.0.1 -PixelStreamingPort=8888

편의를 위해, 언리얼 엔진 애플리케이션을 패키지로 만들 때 이 서버 역시 패키지로 만든 실행파일이 포함된 폴더로 복사됩니다. 위에 표시된 경로의 Engine 서브 폴더에서 찾을 수 있습니다. 언리얼 엔진 설치 폴더 대신 해당 폴더에서 서버를 실행할 수 있습니다.
하지만 이 폴더 내 파일, 특히 시그널링 및 웹 서버의 플레이어 페이지 또는 환경설정 파일을 수정해야 하는 경우 원래 위치에서 수정해야 합니다. 패키지 폴더에서 수정하면 다음에 애플리케이션을 패키지로 만들 때 변경사항이 덮어씌워질 수 있습니다.

최종 결과

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

Streamer connected

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

필요한 경우 언리얼 엔진 애플리케이션과 시그널링 및 웹 서버를 독립적으로 중지하고 재시작할 수 있습니다. 애플리케이션과 서버가 동시에 실행 중인 동안에는 둘 다 자동으로 재연결됩니다.

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

4 - 연결!

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

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

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

   

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

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

   

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

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

   프론트엔드 컨트롤이 구현되는 방식을 확인하려면 Frontend/의 콘텐츠를 학습하세요.

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

   

최종 결과

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

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

5 - 직접 해보기

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

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

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

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

• 픽셀 스트리밍의 새로운 실험단계 기능은 실험단계 픽셀 스트리밍 기능 페이지를 참조하세요.

• 스트리밍 튜닝 가이드 페이지는 스트림 퀄리티 및 세팅을 정밀하게 제어하는 데 도움이 될 수 있습니다.