Intermediate Tutorial


Using Webcam Video as a Texture


15 minutes

Posted on: January 4, 2019

Learn Sumerian
Using Webcam Video as a Texture

Tags

texture
webcam
video
streaming

In this tutorial you will learn about:


This tutorial shows you how to apply live captured webcam video as a texture on a primitive Box entity in Amazon Sumerian. See a completed example scene and make sure to enable your webcam!

You’ll learn about:

  • Applying video as a texture
  • Script Editor

Prerequisites

Before you begin, you should have completed the following tasks and tutorials:

Step 1: Create a Scene and Add a Box

In this step, we will add a Box entity which will be eventually contain the webcam texture.

  1. From the Dashboard, create a scene using the Default Lighting scene.
  2. From the Create Entity menu, choose a Box entity.

Entity box

Step 2: Add the Video Script

In this step, we will add a script to the box which will pull the camera feed from your webcam.

  1. With the Box selected, choose Add Component.
  2. Add a Script component.
  3. Use the plus (+) button to add a new Custom script.
  4. By default, the script is named “Script”. Rename it to “WebcamScript”. You can copy and paste the following code into the script.
// Called when play mode starts
function setup(args, ctx) {

    const material = ctx.entity.meshRendererComponent.materials[0];

    new sumerian.TextureCreator().loadTextureWebCam().then( (data) => {

        material.setTexture('DIFFUSE_MAP', data.texture);

        ctx.mediaStream = data.stream;

    }, () => {

        console.error('Error loading webcam texture');
    });
}


// Called when play mode stops
function cleanup(args, ctx) {

    // Close the webCam media stream

    if(ctx.mediaStream) {

       ctx.mediaStream.getTracks()[0].stop();

}
}

Step 3: Play the Scene to Test That Your Video Is Working

Play the scene to see your webcam image on the entity.

You’ve learned how to apply a video stream as a texture to an entity.

Now publish and share your scene!

You should now have a much better understanding of displaying webcam video capture as a texture. For related topics, see the following tutorials:

Back to Tutorials

© 2019 Amazon Web Services, Inc or its affiliates. All rights reserved.