5 Minute Script: Save Webcam Stream to Image in Unity 5

Blog Posts ,Programming ,Tutorials ,Unity
May 12, 2016

I was prototyping some stuff in Unity today using the webcam, and decided to do a quick write up of what I had done since it involved piecing together a few different components. The basic idea of this mini-application was to render the webcam feed from my laptop into Unity onto a cube, and converting the feed to image data and saving it as a .PNG file – a photographic capture sort of deal.

Why does this matter? One of the biggest things about VR is an inability to see outside of the headset. As obvious as this sounds, I think that there’s going to be an influx of applications that will have some degree of smart recognition built in over the next few years, and this starts with understanding what is going on around us, even in another world.

The prototyping process ended up being relatively simple – Unity has a webcam texture object built in, and converting between the webcam texture to a Texture2D object was pretty easy. The basic scene had three game objects: a cube, to display the webcam texture, a camera, so we could see the webcam, and a light to illuminate the scene. I made a script called PlayWebCam.cs to handle all of the image processing.

First things first: grab the webcam. Unity’s WebCamTexture class makes this super straightforward – declare an instance of the texture at the start of your PlayWebCam script:

WebCamTexture _webcamtex;

In the Start() method, we’re going to go ahead and initialize our texture, then get the renderer for our cube object and assign the webcam texture to the material’s mainTexture component. We’ll then kick off the webcam texture process with the Play method on the texture:

// Use this for initialization
void Start () {
_webcamtex = new WebCamTexture();
Renderer _renderer = GetComponent<Renderer>();
_renderer.material.mainTexture = _webcamtex;
_webcamtex.Play();
}

At this stage, our cube will be updating with our webcam data, and it will be time to add in a screenshot-type function. Since I’m not using any other inputs, I’m going to use the Update() function to check if the ‘A’ key is pressed, and if so, it will trigger our picture-saving function:

// Update is called once per frame
void Update () {
if(Input.GetKeyDown(KeyCode.A))
{
StartCoroutine(CaptureTextureAsPNG());
}
}

Once we have the input handled, we’ll implement the CaptureTextureAsPNG function. This is an IEnumerator function call because we’ll be waiting for our frame to finish updating. When the frame updates, we’ll create a new Texture2D object the size of our webcam texture, and then copy over all of the pixels from the webcam texture into that new Texture2D object. We’ll then encode all of the data from the texture into a .PNG image using the Texture2D.EncodeToPNG() function, and save it to an image.

IEnumerator CaptureTextureAsPNG()
{
yield return new WaitForEndOfFrame();
Texture2D _TextureFromCamera = new Texture2D(GetComponent<Renderer>().material.mainTexture.width,
GetComponent<Renderer>().material.mainTexture.height);
_TextureFromCamera.SetPixels((GetComponent<Renderer>().material.mainTexture as WebCamTexture).GetPixels());
_TextureFromCamera.Apply();
byte [] bytes = _TextureFromCamera.EncodeToPNG();
string filePath = "SavedScreen1.png";

File.WriteAllBytes(filePath, bytes);

}

When we write the data to a file, we will have that image saved!

There are a few ways to do this, but this was a quick and easy solution that I found after piecing together some information from various sources online. Once you have the captured image, you can do a lot with it – I’m excited to use this to prototype a few new mixed-reality styled interactions that I have in mind for future applications!

Happy coding! []-)

 

 

Related Posts

1 thought on “5 Minute Script: Save Webcam Stream to Image in Unity 5”

  1. SebaGoRk says:

    Thank you for this tutorial, lets see what crazy things can we do.
    Salut!

Leave a Reply