비디오 스트림 재생

Stream Media Source (스트림 미디어 소스)는 언리얼 엔진 5(UE5) 안에서 지원되는 URL 포맷의 비디오 스트리밍을 가능하게 해주는 애셋입니다. 스트림을 정의해 두고, UE5 안에서 (미디어 텍스처 가 할당된) 미디어 플레이어 애셋을 로드하고 재생하면 레벨 여러 곳에 할당할 수 있습니다. 스트림은 UI 요소의 일부로 로드 및 재생 가능하며, 전체화면 재생은 물론 (TV 와 같은) 스태틱 메시에 적용한 뒤 레벨 안에서 재생하도록 할 수도 있습니다.

여기서는 언리얼 모션 그래픽 (UMG)를 사용하여 스트리밍 비디오를 전체화면으로 재생할 UI 요소를 만들어 보겠습니다.

이 안내서에서는 C++를 사용하지 않아도 됩니다.

권장 구성

여기서는 시작용 콘텐츠 를 활성화한 상태로 블루프린트 삼인칭 템플릿 프로젝트를 사용합니다.

1. 스트리밍 미디어 소스 및 텍스처 만들기

1. 콘텐츠 브라우저 에서 소스 패널 을 펼친 뒤 콘텐츠 폴더 아래 Media 라는 폴더를 새로 만듭니다.

   

2. 빈 Media 폴더 안에 우클릭한 뒤 미디어 아래 스트림 미디어 소스 를 선택한 뒤 애셋 이름을 MediaStream 이라 합니다.

   

3. MediaStream 을 열고 원하는 Stream URL 을 입력합니다.

   

   링크시킬 URL 파일이 없는 경우, 샘플 비디오 에 우클릭하고 링크 주소를 복사한 뒤 Stream URL 칸에 붙여넣습니다.

   Stream URL 은 반드시 지원되는 포맷으로 직접 링크를 걸어야 비디오가 재생됩니다. 예를 들어 PS4Media (PS4) 는 최신 버전에서 HLS 를 통한 MP4 만 지원하는 반면, WmfMedia (Windows) 는 여러 다른 스트림 소스를 지원할 수 있습니다. 플랫폼/플레이어 플러그인 별 지원되는 포맷 관련 상세 정보는, 미디어 프레임워크 기술 레퍼런스 문서를 참고하세요.

4. Media 폴더 안에 우클릭한 후 미디어 아래 미디어 플레이어 애셋을 선택합니다.

   

5. 미디어 플레이어 생성 창에서 Video output Media Texture asset (비디오 출력 미디어 텍스처 애셋) 옵션을 체크하고 OK 를 클릭합니다.

   

   그러면 재생에 필요한 이 미디어 플레이어 애셋에 링크된 미디어 텍스처 애셋을 자동 생성 및 연결합니다.

6. 새로운 미디어 플레이어 애셋 이름을 MyPlayer 라고 지정합니다. 생성된 미디어 텍스처 애셋에 자동 적용됩니다.

   

2. 머리티얼로 미디어 소스 연결

1. Media 폴더에서 새 머리티얼 을 만들고 이름을 MyPlayer_Material 이라고 지정합니다.

   

2. MyPlayer_Material 을 열고 머티리얼 도메인(Material Domain) 을 유저 인터페이스(User Interface) 로 변경합니다. 이렇게 하면 유저 인터페이스 출력이 설정되도록 Result 노드가 변경됩니다.

   

3. 콘텐츠 브라우저에서 MyPlayer_Video 를 클릭하고 드래그하여 MyPlayer_Material 그래프에 놓습니다. 이렇게 하면 소스로 MyPlayer_Video가 포함된 텍스처 샘플 이 생성됩니다.

4. RGB 핀을 머티리얼의 최종 색(Final Color) 입력에 연결합니다.

   

   Electra Media Player에 텍스처 샘플이나 텍스처 오브젝트를 사용 중이면 샘플러 타입(Sampler Type) 을 색(Color) 으로 설정해야 합니다.

   

3. 유저 인터페이스 위젯에 미디어 소스 추가

1. 미디어 폴더에 우클릭한 뒤, 유저 인터페이스 아래 Widget Blueprint (위젯 블루프린트)를 선택하고 HUD 라 합니다.

   

   위젯 블루프린트 는 (UMG)와 함께 사용하여 언리얼 엔진 안의 UI 요소를 만드는 것으로, 여기에 스트리밍 비디오를 적용할 것입니다.

2. HUD 위젯 블루프린트 안의 팔레트 창에서 캔버스 패널(Canvas Panel) 을 드래그하여 그래프에 놓고 그리드 종횡비에 맞게 늘입니다.

   

3. 팔레트 창에서 이미지 를 드래그하여 캔버스 패널 그래프에 놓고 맞게 늘입니다.

   

   이 이미지에 미디어 텍스처를 적용하면, 게임을 플레이할 때 플레이어의 뷰포트를 이미지가 가득 채웁니다. 전체화면 재생되는 비디오가 생성됩니다.

4. Image 에 대한 디테일 패널에서 Appearance 아래 Brush 를 펼친 뒤 Image 를 MyPlayer_Video 로 설정합니다.

   

5. Image 에 대한 디테일 패널에서 Slot 아래 Anchors (앵커) 드롭다운을 클릭한 뒤 가운데 옵션을 선택합니다.

   

   그러면 뷰포트 크기와 상관 없이 이미지가 항상 뷰포트 중간에 고정됩니다.

4. Playing the Media Source

1. HUD 위젯 블루프린트를 닫고, 레벨 에디터 툴바에서 블루프린트 - 레벨 블루프린트 열기 를 선택합니다.

   

2. 새 변수를 만들어 MediaPlayer 라 하고 유형은 Media Player Reference 로 한 뒤, Default Value 를 MyPlayer 미디어 플레이어 애셋으로 설정합니다.

   

   MediaPlayer 변수의 Default Value 확인을 위해서는 컴파일 클릭을 해야할 수 있습니다.

3. Ctrl 키를 누르고 MediaPlayer 변수를 그래프에 끌어놓아 이 변수의 Get 노드를 생성한 뒤, 우클릭하고 Event Begin Play 노드를 추가합니다.

   

   게임이 시작되면, HUD 생성 및 표시 프로세스를 거쳐 스트림에 대한 사운드 구성을 한 뒤 스트림을 열어 재생되도록 하겠습니다.

4. 우클릭 후 Create Widget 노드를 추가하고 Class 를 HUD 로 설정한 뒤 Return Value 에서 Add to Viewport 를 사용하여 그림처럼 연결합니다.

   

5. Add to Viewport 노드 뒤에 우클릭 후 Add Media Sound Component 를 사용하여 디테일 패널에서 Media Player 를 MyPlayer 로 설정합니다.

   

   비디오와 함께 오디오를 듣기 위해서는, 미디어 사운드 컴포넌트에 미디어 플레이어 애셋을 사용하도록 해야합니다. 여기서는 실행시간에 동적으로 생성 및 추가하고 있습니다. 하지만 기존에 레벨에 있는 액터 또는 컴포넌트 패널에서 블루프린트 일부로 이 컴포넌트를 추가할 수도 있습니다.

6. Add Media Sound Component 노드 뒤 Media Player 레퍼런스 노드에서 Open Source 를 사용하여 Media Source 를 MediaStream 애셋으로 설정합니다.

   이미지를 클릭하면 원본을 확인합니다.

   노드 망이 완성되었으니, 게임이 시작되면 HUD 가 생성 및 표시되고, 미디어 스트림을 열어 재생하면 사운드가 같이 재생될 것입니다.

7. 레벨 블루프린트를 닫은 뒤, 플레이 버튼을 클릭하여 레벨에서 플레이합니다.

최종 결과

에디터에서 플레이하면, HUD 위젯 블루프린트의 일부로 비디오가 전체 화면에서 재생되기 시작할 것입니다.

디스크에서 비디오 파일을 재생하는 파일 미디어 소스 를 사용할 때와 마찬가지로, 연결된 미디어 플레이어 애셋에 기본으로 켜지는 옵션인 Play on Open (열리면 재생) 옵션이 설정된 경우, 스트림 미디어 소스는 Open Source 호출시 자동으로 재생됩니다. 비디오 재생이 시작된 후에는 일시정지, 되감기, 중지 등 미디어 플레이어 애셋에 추가로 내릴 수 있는 명령이 있는데, 미디어 플레이어 레퍼런스를 끌어 놓을 때 Media Player 섹션 아래에서 찾을 수 있습니다.