AR Photocards

This is the first coding product project I ever made. I don’t like web development, but sometimes, it’s the optimized approach to your problem.

Introduction

Freebies is a crucial part of ATVNCG community, but an impressive one is a whole problem. How do we make the freebies worth keeping?

Our main goal is sending a message from our idol to the fans. To reach the goal, we decide to use Augmented Reality technology.

The idea is when you scan the AR mark on the card, a video will pop up and play.

stateDiagram-v2
    [*] --> Phone_Camera
    Phone_Camera --> AR_Photocards: Scan AR Marks
    AR_Photocards --> Videos: Show Videos
    Videos --> [*]

Objectives

Videos has sound and play smoothly
AR videos work in expected dimension and size
Different marks show different videos

Tech Stacks

arjs, threejs
Basic HTML and CSS
GitHub page

The first, I believe a website is the most universal accessible. I have to make it most easy to use for users. I also have to minimize the cost as most as possible. GitHub page with free hosting and I have experienced is a clear good choice. The most important is the package already have examples code from stemkoski/AR-Examples.

Implementation

Flowchart

The detail flowchart of this problem is like this:

graph TD
    A[Start] --> B{Camera Permission?}
    B -->|Yes| C{Mark 1 detected?}
    B -->|No| End
    C -->|Yes| D[Show Video 1]
    D --> C
    C -->|No| E{Mark 2 detected?}
    E -->|Yes| F[Show Video 2]
    E -->|No| C
    F --> C

Videos and Markers

First, I create different markers image and convert to .patt file. Tool for create AR markers: AR.js Marker Training

Video format is like this, notice the codecs of the video.

<video
  id="thanks_for_coming"
  loop
  crossorigin="anonymous"
  webkit-playsinline
  playsinline
  style="display: none"
>
  <source src="video/cam_on.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <source
    src="video/cam_on.mp4"
    type='video/mp4; codecs="avc1.64001F, mp4a.40.2"'
  />
</video>

Some coding notices

I use AR-Examples/Video as base source. Then I remove unnecessary files.

According to Apple policy, autoplay video can’t play sounds, we will find a sneak-out way by creating a waiting screen, the user has to touch the waiting screen to use the main feature.

  <!-- Start Button -->
  <div id="start-button" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px; background: #fff; cursor: pointer; font-size: 15px">
    Chạm màn hình</br>Cho phép truy cập camera</br>Quay mặt sau của card</br>Và cùng khui sít rịt với 2212 Phố Chèo
  </div>
  ...
    document.getElementById("start-button").addEventListener("click", () => {
      // Hide the start button
    document.getElementById("start-button").style.display = "none";

The logic is simple like showed flowchart, the source code I will provide link at the end of the post.

Results

The products has a lot of feedbacks on Threads, both in videos and images. I will provide links at the end of the post. Examples images:

Nguồn: @hnm.hanh và @thao_sayaka.

Take-aways

There are some things I notice in this project, I am not sure about my understanding about the word ‘take-aways’ but let do it.

You should keep the video as short as possible to make it stable
Test on at least 2 different browsers on 2 different OS (Android and iOS)
The marker should be identical, not square!!

Future works

I am planning to make an animated 3D version of him, don’t know where this project will lead to?