[UE4] MediaPlayer 를 사용하여 인터넷 비디오 재생하기

시험기간이 드디어 끝나, 간만에 언리얼 엔진 포스팅을 해보고자 한다.

 

 

이번에는 인터넷상에 존재하는 비디오(또는 오디오) 파일을 받아와서 언리얼엔진의 MediaPlayer 를 통해 재생해보는 것이 이번 포스팅의 목표 이다.

 

웹 (또는 디스크)에 저장된 동영상 파일을 재생할 일은 생각보다 많다.

 

예를 들어, 게임이 시작될 때 오프닝 영상을 재생한다던지, 게임 내 요소로써 (예, 전광판) 사용될 수 있다.

필자는 전광판도, 오프닝 영상도 아닌 리듬게임에서 단순히 MV 영상을 보면서 도트를 치고 싶은 마음으로

이 기능을 연구하였다. 

 

 

이 글을 모두 읽게 되면...

 

이 글을 모두 읽게 된다면, 아래 이미지 처럼 TV 에서 인터넷에 업로드 된 비디오 파일을 재생 할 수 있게 된다.

 

뱅드림 Neo-Aspect 이다.

또한, 런타임에서 동영상을 바로 불러오게 만들도록 하겠다.

(런타임에서 불러와야만 인게임에서 불특정한 비디오 파일을 재생 할 수 있게 된다 즉, 엔진에서 직접 비디오 파일을 지정하는 방식이 아니다.)

 

OpenUrl 함수를 런타임에서 호출하면 TV 의 영상이 즉시 바뀐다.

 

꽤 흥미롭고 실용성 높은 기능이므로, 꼭 해보길 바라며 포스팅을 시작 한다.

 

 

 

프로젝트 설정

 

필자는 프로젝트를 새로 생성하기로 했다. C++ 로 생성해도 상관 없지만, 이번에는 블루프린트만 사용해서

만들 것 이므로 블루프린트 프로젝트를 생성하도록 한다.

 

프로젝트가 생성되었다면 아래 파일을 다운로드 하여 프로젝트에 추가해두길 바란다.

(TV 에셋이다, 압축을 풀면 비디오 파일이 하나 있는데 그것은 넣을 필요 없다.)

 

https://docs.unrealengine.com/Attachments/Engine/MediaFramework/QuickStart/Sample_Content.rar

불러오는 중입니다...

 

 

임포트를 하였다면, 위 사진처럼 머티리얼이 하나 있을 것 이다.

M_TV_Inst 파일을 열고, 편집을 시작 한다. (이는 TV 에 사용될 머티리얼 이다.)

 

 

 

 

 

텍스처 샘플을 두개 생성하고, 아래 것은 T_TV_M2 텍스처를 적용하도록 한다.

나머지 텍스처 샘플 (위에 것)은 비디오가 재생될 부분이다. 이 부분에 대한 설정을 진행 하겠다.

 

 

 

 

머티리얼을 파라미터로 바꾼다. 외부 블루프린트 파일에서 이 파라미터 값을 바꿔 여러가지 영상을

재생 할 수 있도록 한다.

 

 

 

 

 

Sampler Type 을 External 으로 변경 한다.

이를 바꾸지 않으면 비디오 파일이 나오지 않고 하얗게 변한다.

 

오류가 발생하는데, 기본 값이 정해지지 않아서 그렇다. 빈 미디어 텍스처를 하나 만들도록 한다.

 

 

 

 

 

미디어 텍스처를 하나 만들고, 이름은 TXT_EmptyMediaTexture 으로 짓는다.

(원하면 이름은 자유롭게 바꾸어도 된다.)

 

 

 

방금 만든 빈 텍스처를 기본 값으로 지정하도록 한다.

 

 

 

 

TexCoord 노드의 V 타일링 값을 2로 올려준다. 이를 작업하지 않으면 영상이 짜부러진다.

이제 저장하고, 적용 버튼을 누르도록 한다. (필자는 적용버튼을 누르지 않아서 한참동안 삽질 했다.)

 

 

TV 블루프린트 작성

스테틱 메시에 대한 블루프린트를 생성하도록 한다.

이름은 BP_DynamicTV 라고 하였다.

 

 

 

 

파일을 열고, MediaSound 컴포넌트를 추가한다.

이 컴포넌트가 있어야 오디오가 재생 된다.

 

 

생성자 스크립트로 이동 하여 코드를 계속 작성 한다.

 

 

여기서 주의 해야할 점은, MediaTexture 은 반드시 생성자 코드에서 만들어야 한다.

이 버그때문에 굉장히 삽질을 오랫동안 했는데, 런타임 코드에서 실행하면 생성이 제대로 안되서

하얀 화면만 뜨게 된다. (언리얼 엔진 버그로 보인다)

 

반드시 MediaTexture 생성 부분은 생성자 코드에 넣도록 한다.

 

 

 

 

 

 

BeginPlay 이벤트로 이동하여, MediaPlayer 를 생성 하고 MediaSound 컴포넌트, MediaTexture 변수의 SetMediaPlayer

함수를 호출하여 생성한 값을 지정하도록 한다.

 

MediaSound 는 소리를 담당하는 컴포넌트이고, MediaTexture 는 영상을 담당하는 부분 이다.

 

각 컴포넌트에 대한 자세한 기능은 아래 문서를 참고하면 도움이 될 것이다.

 

https://docs.unrealengine.com/en-US/BlueprintAPI/Media/MediaSoundComponent/index.html

Media Sound Component

https://docs.unrealengine.com/en-US/BlueprintAPI/Media/MediaTexture/index.html

Media Texture

(두 문서는 한글문서가 없더라.)

 

 

 

 

마지막으로, FileURL 변수를 생성하고, 외부에서 편집 가능하도록 한다.

이 변수값을 바꿈으로 써 재생될 비디오 파일을 마음대로 바꿀 수 있다.

 

※ 주의 할 점, 직접적인 파일 경로만 작동 한다.

    (예, http://example.com/video.mp4) 유튜브 링크는 작동 하지 않는다.

 

 

 

 

FileURL 을 인자값으로 받는 OpenURL 함수를 호출 한다.

 

OpenURL 이 호출되면, 리턴값으로 부울 값을 반환하는데 해당 URL 이 로드 가능한지를 나타낸다.

즉, true 라고 로드가 모두 완료된건 아니다. 로드가 완료됨은 이벤트를 통해 받을 수 있다.

 

자세한 내용은 아래 API 문서를 참고하도록 하자.

 

https://docs.unrealengine.com/en-US/BlueprintAPI/Media/MediaPlayer/index.html

Media Player

 

 

 

이제, SpaceBar 를 누르면 각각 영상이 재생, 정지 되도록 작성해보자.

 

 

액터에서는 이벤트를 받을 수 없으므로, 커스텀 이벤트로 빼고, 월드 블루프린트에서 이벤트를 받아서

해당 커스텀 이벤트를 호출하도록 작성 하였다.

 

 

 

 

 

레벨 블루프린트에서는 이벤트를 받고, 해당 함수를 호출 하는 코드를 추가했다.

 

 

이 상태로 액터를 스폰하고 FileURL 을 알맞게 편집 한 다음에 재생해보면 오디오만 재생되는 것을 볼 수 있다.

우리가 원하는 것은 비디오도 재생되는 것 이므로, 비디오가 재생되도록 코드를 수정해보겠다.

 

 

 

비디오 재생

이제 비디오가 재생되도록 해보자. 다시 BP_DynamicTV 블루프린트로 이동 한다.

 

 

 

이벤트를 받고, 플레이 함수가 호출 될 때로 이동하여 DoOnce 구문을 추가 한다.

이것을 추가하는 이유는, 머티리얼은 한번만 바꾸면 되기 때문이다.

 

TV 메시에 대한 다이나믹 머티리얼을 생성, 이전에 만들어둔 MediaTexture (파라미터)의 값을 MediaTexture (변수) 값으로 바꾼다. (둘이 이름을 같게 해놔서 엇갈린다.)

 

이로써 URL 에 맞게 재생되는 TV 를 모두 만들었다.

 

 

 

 

최종 결과

다시한번 루미너스

 

파일 URL 에 맞는 영상이 스트리밍 되어 나오는 것을 볼 수 있다.

 

 

네오에스팩트

 

이로써, URL 에 따라 여러가지 영상이 출력되는 TV 를 만들어보았다.

 

이를 응용하면 리듬게임에서의 MV 영상이라던지, 전광판 (사실 TV 의 크기를 줄이면 전광판이 된다) 도 제작 할 수 있을 것 이다.

 

작성 후 생각해보았는데, 굳이 게임 오프닝 영상에서는 이렇게 어려운 방법을 사용하지 않아도 될 것 같다.

왜냐면 오프닝 영상은 패키징 할 때 집어넣고 재생만 시켜주면 될 일이기 때문이다. (영상이 바뀌지 않음)

 

 

나중에는 파일 다운로드 관련 플러그인을 제작하여 1회 파일을 다운로드 하고 캐시에 저장하여 이후 재생 할 때는 캐시에 있는 영상 파일을 활용, 서버의 트래픽을 아끼도록 바꿔보도록 할 예정이다.