Video Support

Native Media Decoder

Gameface comes with its own Media Decoder. You can read more details about the native decoder here.

Unreal Engine Bink Media Plugin

As of UE 4.27, the engine comes with the Bink Media plugin by default. Gameface and Bink can be utilized together in a fairly straightforward fashion with minimal code.

Implementation

The easiest way to add a Bink video playback to your UI, is by using a Live View. The general idea is to:

  • Have a Render Target
  • Create a <video> element in your HTML page, with an Unreal asset source path to your Render Target
    • For example "TextureRenderTarget2D'/Game/MapAssets/BinkMediaPlayer/BinkVideoRT.BinkVideoRT'"
  • Create a UBinkMediaPlayer object and configure its settings
  • Call UBinkMediaPlayer::Draw on each Tick

Here is an example code we use for our BinkVideoMap sample:

  1. Subscribe to the ReadyForBindings event

     ACoherentSampleBinkVideoPlayerHUD::ACoherentSampleBinkVideoPlayerHUD()
    : currenttime(0.f)
    , duration(0.f)
    , volume(1.f)
    , paused(false)
    , muted(false)
    , loop(false)
    , View(nullptr)
    , MediaPlayer(nullptr)
    , BinkTextureRT(nullptr)
    , ModelSyncNeeded(false)
    , VideoEnded(false)
{
    check(CohtmlHUD);
    CohtmlHUD->ReadyForBindings.AddDynamic(this, &ACoherentSampleBinkVideoPlayerHUD::BindUI);
}

  2. Create and initialize a UBinkMediaPlayer object when your ReadyForBindings delegate gets executed:

    void ACoherentSampleBinkVideoPlayerHUD::BindUI()
{
    MediaPlayer = NewObject<UBinkMediaPlayer>();
    MediaPlayer->URL = TEXT("./Movies/SampleVideo_1280x720_vp8.bk2");
    MediaPlayer->BinkSoundTrack = BMASM_Bink_Sound_Simple;
    MediaPlayer->Looping = false;

    BinkTextureRT = LoadObject<UTextureRenderTarget2D>(nullptr, TEXT("/Game/MapAssets/BinkMediaPlayer/BinkVideoRT.  BinkVideoRT"));
    BinkTextureRT->RenderTargetFormat = RTF_RGBA8;
    BinkTextureRT->SRGB = false;
    BinkTextureRT->bForceLinearGamma = false;
    BinkTextureRT->ClearColor = FLinearColor::Black;

    // By this point there will be a valid Viewport even in a packaged game
    FVector2D ViewportSize;
    GEngine->GameViewport->GetViewportSize(ViewportSize);
    BinkTextureRT->SizeX = ViewportSize.X;
    BinkTextureRT->SizeY = ViewportSize.Y;
    BinkTextureRT->UpdateResource();

    MediaPlayer->InitializePlayer();
    duration = MediaPlayer->GetDuration().GetTotalSeconds();

    View = CohtmlHUD->GetView();
    check(View);
    View->CreateModel("BinkVideoPlayerHUDModel", this);
    View->SynchronizeModels();

    UE_LOG(LogCoherentSample, Log, TEXT("UI is bound!"));
}

  3. Call UBinkMediaPlayer::Draw each Tick

    void ACoherentSampleBinkVideoPlayerHUD::Tick(float DeltaTime)
{
    if (!View)
    {
        return;
    }

    FVector2D ViewportSize;
    GEngine->GameViewport->GetViewportSize(ViewportSize);
    if (BinkTextureRT->SizeX != ViewportSize.X || BinkTextureRT->SizeY != ViewportSize.Y)
    {
        BinkTextureRT->SizeX = ViewportSize.X;
        BinkTextureRT->SizeY = ViewportSize.Y;
    }

    if (!BinkTextureRT->HasPendingRenderResourceInitialization())
    {
        MediaPlayer->Draw(BinkTextureRT);
    }
    currenttime = MediaPlayer->GetTime().GetTotalSeconds();

    if (ModelSyncNeeded)
    {
        View->SynchronizeModels();
    }

    // UBinkMediaPlayer's OnMediaReachedEnd event seems to be buggy,
    // as it gets fired even when calling UBinkMediaPlayer::Seek at
    // a time before the end of a given video, so we handle this ourselves.
    if (MediaPlayer->GetTime() == MediaPlayer->GetDuration() && !VideoEnded)
    {
        OnMediaReachedEnd();
        VideoEnded = true;
    }
}

With this approach, if you have an in-world View, you will be able to play Bink videos in-world as well.

Video Controls and BinkVideoMap sample

If you want to create UI video controls such as volume, seeking, sound, playback, etc., you can expose the UBinkMediaPlayer APIs to Gameface.

We have a sample map demonstrating this implementation under CoherentSample/Content/Maps/BinkVideoMap.umap within the CoherentSample project. The relevant source code is located in the CoherentSample/Source/CoherentSample/BinkVideoPlayer directory.

← Transition guide