AR/VR Tutorial : Putting Videos on a Canvas

Carl Villamor, Jun 10th, 2018

Given that most tutorials nowadays are video based, and VR and AR are on the rise, we thought it would be interesting if we managed to combine the two together into the same activity. In this tutorial, we will teach how to incorporate Videos into Stereo VR/AR.

 

  1. Download the video clip and audio clip of the video
  2. Open Unity and create a new project
  3. Select GameObject, UI, then Raw Image //this creates the plane in which the video will play from
  4. Right-click RawImage,  UI, then Image  //Here, we will put the photo of the play/pause button
  5. In RawImage, click Add Component then New Script and name it: Stream Video (name is optional)
  6. Use this code in Stream Video: (c# script here)
  7. Drag and drop, play image File into Image under Source Image (photo file here)
  8. Adjust Width and Height to liking //image may not be optimal when you first add it in
  9. In Stream Video (Script), drag RawImage into Image // sets the Image to the RawImage object we’ve created
  10. In Stream Video (Script), drag Image into Play Icon // sets the Play Icon to our button image
  11. In Stream Video (Script), drag Video File into Video To Play // sets the Video To Play to our downloaded video
  12. In RawImage, add a GameObject and rename it to videoTrigger
  13. Within videoTrigger, add a box collider and rigid body component
  14. Unselect Use Gravity in Rigid Body // this prevents the video from falling
  15. This is the code that triggers the video:

  

void OnTriggerEnter(Collider col) {

 GameObject go = col.gameObject;

 if(go.name == "VideoTrigger")

{

StreamVideo sv = VideoObject.GetComponent<StreamVideo>();

if(sv != null)

{

sv.PlayPause();

}

return;

}

 

The code above, triggers the Video to play when the hand collides with the Raw Image, otherwise it remains paused.

 

Ultimately, this tutorials allows you to import any video and source and be able to play in within the VR or AR world and with such easy steps you could really turn this simple program into something incredible. For example, this program can be used to teach operatives in the field and if you want something more casual, using the hands as a cursor you could literally make your own virtual youtube, of course you’d have to make some changes if you want to stream videos from URLs instead of downloading each video and source, but in the end you can still create something pretty cool.

 

Note that the head tracking in this video was performed using ARkit and the screen capture was done on an Iphone 6S. The viewports were setup for th Mira Prism AR viewer. A more recent phone would provide a smoother experience.

 

Credits:

Inspired By : https://www.youtube.com/watch?v=R36UuAjQmK4

Siemens LR560 Installation video: https://www.youtube.com/watch?v=mekNjmsHoIM

 

Powered by CouchCMS