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

픽셀 스트리밍 데모는 언리얼 엔진 콘텐츠를 웹 브라우저 또는 모바일 디바이스에서 라이브 스트림으로 볼 수 있도록 구성하는 방법을 보여줍니다.

Choose your operating system:

Windows

macOS

Linux

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

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

  • 픽셀 스트리밍 플러그인을 사용하는 미디어 스트림을 생성하고, HTML 플레이어 페이지에서 실행된 커스텀 입력에 응답하도록 이미 구성된 언리얼 엔진 프로젝트.

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

전제조건:

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

  • 시작하기 가이드의 모든 지침을 한 번 이상 수행하여 필요한 항목을 모두 설치하고 기본 플레이어 페이지에서 작동하는지 확인해야 합니다.

시작하기

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

  2. Windows 탐색기에서 컴퓨터의 프로젝트 위치로 이동하여 WebInterface 폴더를 찾습니다.

  3. 이 폴더의 내용을 언리얼 엔진 설치 폴더의 Samples/PixelStreaming/WebServers/SignallingWebServer/custom_html 폴더로 복사합니다. 
    custom_html 폴더가 아직 없다면 폴더부터 생성합니다.

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

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

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

    • 시그널링 및 웹 서버를 시작합니다.

  6. 웹 브라우저를 열고, 시그널링 및 웹 서버에서 호스팅하는 PixelDemo.htm 플레이어 페이지로 이동합니다. 아래의 예시를 참고하세요.
    http://<your-server-ip-address>/PixelDemo.htm

플레이어 페이지 제어하기

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

  1. 페이지 왼쪽에 있는 메뉴를 사용하여 현재 캐릭터, 스킨, 환경, 시간을 변경합니다.

  2. 툴바에서는 UI 및 뷰어에 대한 추가적인 컨트롤을 제공합니다.

    컨트롤

    효과

    메뉴 토글

    왼쪽 메뉴를 표시하거나 숨깁니다.

    줌 레벨 토글

    최대 줌 인과 최대 줌 아웃 위치 사이에서 카메라를 전환합니다.

    720p, 1080p, 4k

    서버에서 실행 중인 언리얼 엔진 애플리케이션의 렌더링 해상도를 설정합니다.

    4K 해상도의 비디오 피드 인코딩은 일부 GPU에서만 가능합니다.

    현재의 제한사항으로 인해 지정된 값으로 대역폭 한도를 설정하면 언리얼 엔진 애플리케이션을 다시 시작하기 전까지 한도를 다시 높일 수는 없습니다.

  3. 뷰어 위젯은 언리얼 엔진 애플리케이션에 대한 직접적인 마우스 및 터치 컨트롤을 제공합니다.

    컨트롤

    효과

    클릭하여 드래그, 또는 터치하여 드래그

    현재 캐릭터 주변에서 카메라를 회전합니다.

    마우스 휠

    카메라를 줌 인 및 줌 아웃합니다.

    전체화면 모드 시작

    뷰어를 전체화면 모드로 전환합니다. Esc 키를 누르면 종료됩니다.

  4. 페이지 오른쪽 상단에 있는 추가(Add) (+) 버튼을 클릭하면 스트림에 대한 추가 제어를 제공하는 오버레이로 전환됩니다. 이러한 세팅 대부분은 기본 player.htm 페이지의 세팅과 동일하며, 시작하기 가이드에 나와 있습니다. 새로운 세팅은 다음과 같습니다.

    컨트롤

    효과

    퀄리티 우선(Prioritise Quality)

    활성 상태가 되면 언리얼 엔진 애플리케이션의 렌더링 해상도가 HTML 플레이어 페이지에 있는 플레이어 위젯의 현재 크기와 일치하도록 자동 조정됩니다. 브라우저 창의 크기를 줄여 플레이어 위젯 크기가 줄어들면 서버의 언리얼 엔진 애플리케이션 렌더링 해상도 역시 이에 맞춰 줄어듭니다. 마찬가지로 플레이어 페이지에서 전체화면 모드로 전환하는 경우 언리얼 엔진 애플리케이션은 클라이언트 화면의 해상도에 맞춰 창이 확장됩니다.

    뷰포트 해상도 일치(Match Viewport Resolution)

    활성 상태가 되면 연결에 사용 가능한 대역폭이 제한될 때 픽셀 스트리밍 시스템에서 언리얼 엔진 애플리케이션이 생성하는 초당 프레임 수를 자동으로 제한합니다. 픽셀 스트리밍 레퍼런스Streamer.PrioritiseQuality, Streamer.LowBitrate, Streamer.HighBitrate, Streamer.MinFPS 콘솔 명령에 관한 설명을 참조하세요.

커스텀 UI 이벤트 이해하기

커스텀 HTML 플레이어 페이지 PixelDemo.htm 은 픽셀 스트리밍 시그널링 및 웹 서버에 제공되는 scripts/app.js 파일을 사용하여 마우스, 키보드, 터치 이벤트를 캡처하고 이를 언리얼 엔진 애플리케이션으로 다시 전달합니다. 또한 이 페이지는 몇 가지 추가 함수 기능에 고유한 커스텀 PixelDemo.js 파일을 사용합니다.

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

  1. 먼저 PixelDemo.htm 파일에서 파악하고자 하는 UI 항목을 찾고, 해당 버튼을 누를 때 JavaScript 함수가 무엇을 트리거하도록 설정되어 있는지 확인합니다.
    예를 들어 왼쪽 메뉴의 각 항목은 onConfigButton() 함수를 트리거하여 2개의 숫자로 전달합니다.

    <li>
        <a href="#" onclick="onConfigButton(2,1)">Fortress</a>
    </li>
  2. PixelDemo.js 파일에서 해당 함수의 정의를 찾습니다.
    예를 들어 onConfigButton() 함수는 이 두 숫자를 JavaScript 개체에 *Category** 및 **Item** 필드 값으로 쓴 다음, 이 JavaScript 개체를 `emitUIInteraction()` 함수로 전달합니다.

    function onConfigButton(category, item) {
        let descriptor = {
            Category: category,
            Item: item
        };
        emitUIInteraction(descriptor);
        console.log(descriptor);
    }
  3. 언리얼 엔진 프로젝트에서 이러한 이벤트는 Blueprints/Pawn/Orbit_Controller 클래스에 의해 응답됩니다.
    Orbit_Controller
    이 클래스를 더블클릭하여 이벤트 그래프를 엽니다.

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

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

    이 이벤트는 Category 필드의 값을 확인하고, 이 값을 사용하여 캐릭터, 스킨, 환경 또는 하루의 시간을 변경해야 하는지 여부를 결정합니다.

    각 이벤트는 Item 값을 확인하여 활성화해야 하는 캐릭터, 스킨, 환경 또는 하루의 시간 타입을 결정합니다.

퀄리티 우선(Prioritise Quality)뷰포트 해상도 일치(Match Viewport Resolution) 와 같은 페이지 오른쪽 상단의 오버레이에 있는 컨트롤은 약간 다른 방식으로 작동합니다. app.js 파일은 로드될 때 HTML 엘리먼트에 이벤트 리스너를 추가합니다. 사용자가 이러한 엘리먼트 중 하나를 활성화 또는 비활성화할 때마다 app.js 파일의 리스너 함수가 트리거되어 변경사항에 직접 응답합니다.

태그
언리얼 엔진의 이전 버전을 위해 작성된 페이지입니다. 현재 언리얼 엔진 5 버전을 위해 업데이트되지 않았습니다.