Streaming Video in the 3D View

Scan the image above with the Zappar app to see the completed project. For the best experience print this image and lay it flat when scanning.

Difficulty Level: Easy / Medium

Coding Knowledge Required: Beginner

Time to Complete: 30 minutes

This project takes you through the steps for showing a streaming video in the 3D view within your AR experience. Make sure to scan the target image above to get a sneak peak into what you are about to build. Video in 3D is a really powerful and engaging experience, and we hope this tutorial will inspire you to use it in some of your own projects in the future!

If you get stuck, please refer to our extensive Documentation or check out the Forum, a handy way to ask questions of other ZapWorks users. You can also take a look at the completed project.

Download the completed project

Step by Step

1. Create a new Studio Zapcode

Enter your my.zap.works account and click the ‘Make a New Zapcode’ button in the top left. Give your code a name, and choose between either a circle or lozenge style and select ‘Studio’ as your tool. Widgets and Designer codes will not work for this tutorial.

2. Create a new project in ZapWorks Studio

Open ZapWorks Studio (download here) and create a ‘New Project’.

Choose to start with a ‘Blank’ template and give your project a name, e.g. “3D Streaming Video” and click ‘Create’.

3. Download the asset pack

Click here to download a zip file containing all the assets we'll need for this experience.

After downloading the assets, unzip the folder for use later on.

4. Train tracking image

Tracking Images are images that content appears attached to as they move around in the camera view.

Click the plus (+) sign in top right of the Media Library. From the dropdown, select ‘Train Image File’. This will open up your Explorer / Finder and allow you to select your tracking image, named “Video3D_target.jpg”, in the folder you unzipped in the previous step.

The image will then be trained. During this process, which may take up to a minute, the image is analysed from multiple angles and a target file is produced. This file is added to your Media Library, with the file extension ZPT. This target file contains everything the app needs to track the image.

5. Import 3D Model into Media Library

Enter the folder containing the 3D model of the TV. It should be named ‘TV 3D Model’.

Select the ‘TV.pod’ file and drag it into the Media Library import box located in the top right corner of ZapWorks Studio.

POD is the recommended file format for 3D models in ZapWorks Studio. To find out more information on POD, check out this documentation page on supported 3D formats.

The 3D model will be automatically named “TV”. Click OK.

A dialog box will then ask you to add the texture “TVSet_Diffuse.jpg”. Drag this in from the TV 3D Model folder.

Textures are images that are applied to the surface of your 3D model.

6. Create a Video Player symbol

Click the (+) icon next to the Symbol Definitions panel in the bottom right of the screen. This will bring up a dialog box. Select to create a Video Player and call it “videoplayer”.

The Symbols Definitions panel is where your subsymbols are located. Subsymbols are reusable ZapWorks Studio components and can be used to define functionality that is to be used more than once. A subsymbol can also be used to separate and abstract functionality away from the main root symbol.

7. Drag your target into the Hierarchy

Now you have all the assets in place, we can start assembling our scene.

Drag your target file from the Media Library into the root node within the Hierarchy.

Once in the Hierarchy a preview of the target will appear in the 3D view. The icons at the bottom right of the screen can be used to move the target in the view, just as if it were being physically moved in a camera view.

Targets in the Hierarchy act like groups. Content placed inside a target will appear attached to it in the 3D view and when viewed in the app.

8. Create a group

Right click on the target node and select 'New > Group' and call it “TV Group”. This has now parented the group to the target image meaning that content placed within the group will track from the target image.

Groups are incredibly useful for organizing your content. When you create more complex experiences it is good practice to use groups where necessary.

9. Adding the TV to the scene

Drag the TV 3D model from the Symbol Definitions panel into the “TV Group” in the Hierarchy. The TV 3D model node should be slightly indented from the group within the Hierarchy, indicating that it sits within it.

If you rotate the target image by using the controls in the bottom right, you will see that the TV moves with the target.

Due to changes in the 3D import process, the scale applied to the model in the video above may appear incorrect. To rectify this please set the scale of the TV model from [1,1,1] to [1.6,1.6,1.6] by selecting it in the Hierarchy and scrolling to the 'Transforms' section.

10. Position the TV Group

Click on the TV Group node. Head to the Properties panel in the bottom left of the screen. Under the Transform section use the following values to place the TV group in the right place.

Position (-0.21 , 0.1 , 0)
Scale (1.5 , 1.5 , 1.5)
Rotation (90 , 25 , 0)

When positioning content, you can change the camera view by using the widgets in the bottom right on the scene.

11. Adding the Video Player to the scene

Drag the video player subsymbol from the Symbol Definitions panel into the TV Group in the Hierarchy. Make sure that it is below the TV in the Hierarchy.

By placing the video player subsymbol below the 3D model of the TV in the Hierarchy, we are ensuring that it appears in front in our experience.

The Video Player symbol is a component for displaying streaming video in the 3D view using a URL to a hosted video file.

12. Position the Video player within the TV Group

Click on the video player node. Head to the Properties panel in the bottom left of the screen. Under the Transform section use the following values:

Position (0 , 0.535 , 0.01)
Scale (0.435 , 0.435 , 1)
Rotation (0 , 0 , 0)

The video player symbol provides you with a preview which is not reflective of the video that you are passing in. The aspect ratio of the video you are using may require you to make adjustments to the scale of the video player 3D model.

13. Setting the Video URL

Click on video player node. Within the Properties Panel, head to the References section and change the videoURL to:

https://ddg67ecygv8rc.cloudfront.net/ZapBoxTutorial/ZapBox1200.mp4

Click the autoPlay and showControls checkboxes so they are ticked.

autoPlay means that the video will play immediately once the experience has been loaded. showControls allows the user to pause and play the video.

14. Create a new script

Right click on the TV Group Node and select 'New > Script > Blank' to add a script to the group.

Rename this script “VideoScript” by right clicking on it and selecting 'rename'.

We have named the script VideoScript for our own benefit, it's good practice to give nodes descriptive titles.

15. Create video player variable in script

Click on the VideoScript to open up the script editor. Click and drag the video player node into the script and select “Insert Local Variable”.

By adding the node to the script and creating a variable, we are giving ourselves access to the node's information. Taking the video player as an example, this gives us access to functions such as: play, pause, restart etc. To understand more about basic programming concepts, check out our TypeScript Primer.

16. Rename the variable

Rename the variable to videoplayer. Your code should now look like this.

const videoplayer = symbol.nodes.Videoplayer;

We are renaming our variable so that we can copy and paste some code in the next step.

17. Set the video to loop

Add this code below the variable declaration, it tells the video player to restart upon completion giving us a looped video.

videoplayer.on("video:finish",()=>{

   videoplayer.nodes.control.restart();

});

18. Previewing your experience

At this stage the experience can be previewed on a device. If you do not have it already, download the Zappar app on Android or iOS to preview on your smartphone / tablet.

You can preview your zap by clicking the ‘Preview’ button in to top left of your ZapWorks Studio. Use the target image below to test whether you are happy with your scene.

For the best experience print this image and lay it flat when scanning.

You will be asked to authenticate your ZapWorks account.

19. Publishing your experience to your zapcode

Hit ‘Publish’ in the top left corner to publish it to your previously created zapcode.

Choose the zapcode that you created in Step 1.

The code must have been allocated as a "Studio" code in ZapWorks in order to be selected for publish.

Congratulations!

That’s it. You have completed all the steps in this tutorial and created your own streaming video in the 3D view. You are well on your way to learning ZapWorks Studio. Nice!

Suggested Next Steps

Upload your own video and stream that instead.
Swap the TV for a 3D model of a mobile phone, or how about a cinema?
Get creative with your target image. In what situation might a video playing in 3D make sense?

Streaming Video in the 3D View

Step by Step

Suggested Next Steps

Further Reading