Tutorial: WebCamera & Chroma Key Kit Asset Unity

by 4Experience Crew | Dec 6, 2019 | - Software Development, - Tutorials

Introduction

Did you ever want to create a photo booth, where you could pose with an animated character, and then take a picture? It might sound like a complicated task but, in fact, it really isn’t. Thanks to the possibilities of the Unity Engine, it’s both simple and (really) effective!

In this example, I will guide you on how to integrate green screen videos of characters into the feed from your camera seamlessly.

Requirements

Before we get started, you need to pay close attention to some tech details.

  1. The following example is made using Unity 2019.2.7f and, obviously, you will need a webcam for it. I used an HD Pro Webcam C920 camera, but any popular model should work just as well.
  2. You need to prepare (or download) the base: a green screen video of the chosen character.

To display it on our camera feed we will be using the Chroma Key Kit asset from the Unity Asset Store.

The App

Pick the option to create a new 3D project from the Unity Hub, then name it as you wish. Once the project is ready, import the Chroma Key Kit from the Asset Store. The project is meant for a PC, so, in the Build Settings, make sure that you leave it on the Standalone platform.

Let’s begin by setting the MainCamera field to ‘Orthographic’ setting from the Projection drop-down menu, then delete the ‘Directional Light’ object from the scene. Next, create a ‘Video’ folder in the ‘Assets’ folder and put your green screen video inside.

After installing Chroma Key Kit from the Asset Store, we need to add a ‘GameObject’. Name it ‘WebCamStream’ and attach the WebCamStream script to it. For the best results on the camera, set the Resolution Mode field to ‘Manual’ and force a 1920×1080 resolution. Do the same with the FPS Mode field changing its value to 60 fps.

Next, we add a Quad object which we scale to fit the aspect ratio of our webcam stream resolution.

Create Game Object named ‘WebCamPlayer’ inside the Quad object. It’ll be responsible for displaying the webcam stream onto the Quad’s texture. Then, attach a WebCamPlayer script to it and reference the Quad’s Mesh renderer and the WebCamStream, as demonstrated in the screenshot.

We’re set up to stream the camera feed – it’s time to display our character video on it. Luckily, the Chroma Key Kit has a very useful prefab for that called Renderer-VideoPlayer-ChromaKey. The prefab uses Chroma, blur and mask scripts to make the desired color background transparent on display.

Once we added the prefab to our scene we’ll need to open the MSK object in the Inspector and set the proper Chroma Key Color. For our test video, it’s the #00FF00 (lime).

Let’s move to the Video Player and reference our green screen video to the project. Simply drag the file from the ‘Video’ folder and drop it into the Video Clip field.

After that, we need to create a simple Playback Delay script that will start playing the video after a set time interval.

using System.Collections;
using UnityEngine;
using UnityEngine.Video;

public class PlaybackDelay : MonoBehaviour
{
    #region MEMBERS

    [SerializeField]
    private float delay = 1.0f;
    [SerializeField]
    private int videoDisplayLayer = 9;

    [SerializeField]
    private VideoPlayer videoPlayer;

    [SerializeField]
    private Transform objectTransform;

    private float timeFromStart = 0.0f;

    #endregion

    #region PROPERTIES

    #endregion

    #region FUNCTIONS
    protected virtual void Update()
    {
        if (timeFromStart >= delay &&
            videoPlayer != null &&
            videoPlayer.isPlaying == false)
        {
            videoPlayer.Play();
            StartCoroutine(StartVideoCoroutine());
        }

        timeFromStart += Time.deltaTime;
    }

    IEnumerator StartVideoCoroutine ()
    {
        yield return new WaitForSeconds(0.5f);
        gameObject.layer = videoDisplayLayer;
    }

    #endregion

    #region CLASS_ENUMS

    #endregion
}

We add the Playback Delay script component to our Renderer-VideoPlayer-ChromaKey. Make sure you’ve turned off the Play on Awake setting in the Video Player object. Also, keep in mind that the Delay field controls start-up delay between the original video and the photo booth script.

The Video Display Layer setting is a bit more tricky, but with a little attention to detail, you should be able to get it done without breaking a sweat. Since the Chroma Key Kit player doesn’t handle transparency until it starts playing the video, we start off by creating two layers:

  • Pre-Video that is excluded in the Culling Mask
  •  Video that we’ll switch the object to once it starts playing the video

Summary

Content creators are constantly looking for new ways to engage potential users.

Thus, augmented reality photo booths become increasingly popular as a new tool for achieving that goal. As a mix of both a live camera feed and green screen videos, AR photo booths are great for catching the users’ interest.

Such apps can take the viewer to the center of the action for maximum thrill. For example, you can find yourself inside a dinosaur park, posing with your favorite celebrity or during an alien attack.

However, you would be wrong to think that this photo booth example is all that can be done with the above-mentioned steps. Get a little more creative and you can use what you’ve learned here for your next blockbuster clip (hey, we all have to start somewhere).

As you can see in our article, with a few simple steps and a bit of creativity, setting up an app like this using Chroma Key Kit and Unity takes only a short while and the end effect can be very entertaining.

Check out the video below, where you can see the final effect of our app!

Share with:


4Experience Crew