callAR

Inspiration

While there have been many creative solutions to accommodate for in-person communication during covid, I believe that there is still a lot of potential left on the table especially with upcoming technologies like augmented reality (AR).

What it does

callAR allows users to scan an image and have a virtual human guide them through the menus similar to a customer support phone call or website. What makes callAR different from other forms of customer support is that the special image can be placed strategically allowing for either a more immersive or convenient interaction.

How we built it

The website is lightweight and only uses HTML5/CSS3/JS with the libraries used being AR.js and aframe.js. The video clips were edited through Adobe Premiere with the chromakey effect which combined allow the customer support to export media with a transparent background with high fidelity.

Challenges we ran into

The limitations of image recognition, display methods, and time ended up preventing callAR from being much more immersive. This is because aframe.js does not support the .MOV files which would have allowed the video clips to have a transparent background. In addition, the canvas tag could not be displayed using aframe.js meaning that both methods of having transparent background in videos could not be applied. Finally, the time constraints meant that I had to make many compromises especially in terms of polish since I do not have the full duration to work on the project.

Accomplishments that we're proud of

Being able to have a clean UI in the homepage and the AR website is something I am very happy with since I have generally struggled to make nice looking websites for hackathons. In addition, getting the AR to work was much easier than I initially thought and I am very happy I decided to give it a try today. Finally, the speed at which I created and finished the entire project was surprising especially since I spent a good majority of that time playing around with the AR libraries instead of coding.

What we learned

As previously stated, I learned how to use ar.js and aframe.js which I thought would have been the primary challenge. I also learned the power of good planning as I gave myself time to plan the entire project

What's next for callAR

I definitely want to have transparent background for the videos as the black fuzz is driving me crazy. Also having an idle animation that smoothly transitions to the media clip would be a nice touch. Once I get those two done, I want to look into having synchronous video calls between the customer and customer support as that was my initial plan for callAR.

Built With

• aframe.js
• ar.js
• css3
• html5
• javascript