In previous posts (post 1, post 2) I have raved over the brilliant combination of Mozilla's AFrame and Jerome Etienne's fantastic AR code - guess what this post is no different in that respect.
Here is the problem I was interested in - having a set of markers that when viewed, a different video plays for each marker.
Glitch is a great editor for this (for example https://glitch.com/~ambitious-hub ) easy to use and it can stored assets (in this case a video). Add the assets by clicking on the asset folder and then use the add asset button, upload the file. You will need the URL for the asset this is what is included as a source in the HTML files; you get this by clicking on the asset and then copying the URL.
So some initial code using Aframe and aframe-ar.js is shown below. This is set-up to display a video when the HIRO marker is shown to the camera.
<!DOCTYPE html>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body>
<a-assets>
<video preload="auto" id="vid" autoplay loop="true" crossorigin webkit-playsinline playsinline controls src="https://cdn.glitch.com/b0bce38d-a212-4ce2-a89f-9c03bd45e85a%2Fdeep_learning_example_(SD_Small_-_WEB_MBL_(H264_900)).mp4?1540209123141"></video>
</a-assets>
<a-scene embedded arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-marker preset="hiro">
<a-video src="#vid" width="1" height="1" position="0 0.5 0" rotation="-90 0 0"></a-video>
</a-marker>
</body>
There is a problem, in some browser including Chrome the video doesn't play it needs something to make it play. A great solution can be found at https://github.com/jeromeetienne/AR.js/issues/400 revolving around adding a button to play the video; a new HTML file aframe_video needs to be created as per the advice; a new call to the HTML file aframe_video.html (<script src="aframe_video.html"></script>) and some extra code available in the advice needs to be add to index.html. If you want to see the code I used, please go to https://glitch.com/edit/#!/ambitious-hub; please feel free to remix and reuse; I have built this on top of code developed by others, so I more than happy for others to use it.
Another great tool (developed again by Jerome Etienne) is the AR-Code Generator https://jeromeetienne.github.io/AR.js/three.js/examples/arcode.html which you put your URL for the index.html file of your AR example in and it generates a Hiro marker and a QR code for the site (an example is shown below). More details can be found at https://medium.com/arjs/ar-code-a-fast-path-to-augmented-reality-60e51be3cbdf
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Here is the problem I was interested in - having a set of markers that when viewed, a different video plays for each marker.
Glitch is a great editor for this (for example https://glitch.com/~ambitious-hub ) easy to use and it can stored assets (in this case a video). Add the assets by clicking on the asset folder and then use the add asset button, upload the file. You will need the URL for the asset this is what is included as a source in the HTML files; you get this by clicking on the asset and then copying the URL.
So some initial code using Aframe and aframe-ar.js is shown below. This is set-up to display a video when the HIRO marker is shown to the camera.
<!DOCTYPE html>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<!-- include ar.js for A-Frame -->
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<body>
<a-assets>
<video preload="auto" id="vid" autoplay loop="true" crossorigin webkit-playsinline playsinline controls src="https://cdn.glitch.com/b0bce38d-a212-4ce2-a89f-9c03bd45e85a%2Fdeep_learning_example_(SD_Small_-_WEB_MBL_(H264_900)).mp4?1540209123141"></video>
</a-assets>
<a-scene embedded arjs="sourceType: webcam; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">
<a-marker preset="hiro">
<a-video src="#vid" width="1" height="1" position="0 0.5 0" rotation="-90 0 0"></a-video>
</a-marker>
</body>
There is a problem, in some browser including Chrome the video doesn't play it needs something to make it play. A great solution can be found at https://github.com/jeromeetienne/AR.js/issues/400 revolving around adding a button to play the video; a new HTML file aframe_video needs to be created as per the advice; a new call to the HTML file aframe_video.html (<script src="aframe_video.html"></script>) and some extra code available in the advice needs to be add to index.html. If you want to see the code I used, please go to https://glitch.com/edit/#!/ambitious-hub; please feel free to remix and reuse; I have built this on top of code developed by others, so I more than happy for others to use it.
Another great tool (developed again by Jerome Etienne) is the AR-Code Generator https://jeromeetienne.github.io/AR.js/three.js/examples/arcode.html which you put your URL for the index.html file of your AR example in and it generates a Hiro marker and a QR code for the site (an example is shown below). More details can be found at https://medium.com/arjs/ar-code-a-fast-path-to-augmented-reality-60e51be3cbdf
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
This comment has been removed by the author.
ReplyDeleteReally grateful for the snippet of code to play AR videos. This was exactly what I was looking for as if been looking for a way of streaming short videos for my augmented reality website. Thanks again and I look forward to further posts of yours in time to come AR blog
ReplyDeleteYour welcome
DeleteVery informative!!!!
ReplyDeleterobot kit
This comment has been removed by a blog administrator.
ReplyDeleteVR has the ability to connect and engage remote teams and employees as if they were together in the same physical room. Please read this Virtual Reality Development Ottawa for more info.
ReplyDeleteThe article does a great job explaining how WebVR 5 leverages augmented reality to make video content more interactive and immersive. It also highlights how similar immersive technologies, like VR training solutions, can enhance practical learning experiences in hands-on environments.
ReplyDelete