Forgot password?
EasyAR Portal Tutorial View Content

EasyAR Beginners Guide(3)--App with AR QR code(1)

AlbertLee 2017-8-16 10:12

App with AR QR code(1)

QR code has been common in our life. When AR and QR are integrated together, it will display fun effects. EasyAR can succeed in recognizing and supporting QR code. Thus, in this tutorial and next, we will share ways to develop Apps with QR code and AR.

Step 1:Developing Environment

We need to create a project in Unity and import unitypackage of "EasyAR_SDK_2.0.0_Basic" into Unity. If you are not familiar with that, you can visit EasyAR Beginner Guide(1)---display model”. So I don’t talk too much here. After being imported, our Unity is like that:

Delete original Main Camera and drag"EasyAR_ImageTracker-1_QRCode-1" into Hierarchy and fill in key from our official site

Comparing "EasyAR_ImageTracker-1_QRCode-1" with "EasyAR_Startup", you will find that the former has "BarCodeScanner"

The script "QRCodeScannerBehaviour" is used to achieve QR code scanning and recognition. Here is specific description:

Step 2:Prepare QR code resources

We need to prepare QR code image. Many websites provide us with designing QR code. Our design is like that:

You can think big and write something you want. At present, we want to scan QR code and display characters via EasyAR SDK

Step 3:Write codes

We have prepared QR code, now it is time to write codes to achieve this function in Unity. At first, we create a script under "EasyAR_ImageTracker-1_QRCode-1" and name it "ARIsEasyBehaviour",

using System.Collections;
using UnityEngine;

namespace EasyAR
    public class ARIsEasyBehaviour : MonoBehaviour
        private const string title = "Please enter KEY first!";
        private const string boxtitle = "===PLEASE ENTER YOUR KEY HERE===";
        private const string keyMessage = ""
            + "Steps to create the key for this sample:\n"
            + "  1. login\n"
            + "  2. create app with\n"
            + "      Name: HelloARQRCode (Unity)\n"
            + "      Bundle ID: cn.easyar.samples.unity.helloarqrcode\n"
            + "  3. find the created item in the list and show key\n"
            + "  4. replace all text in TextArea with your key";

        private bool startShowMessage;
        private bool isShowing;
        private string textMessage;

        private void Awake()
            var EasyARBehaviour = FindObjectOfType<EasyARBehaviour>();
            if (EasyARBehaviour.Key.Contains(boxtitle))
                UnityEditor.EditorUtility.DisplayDialog(title, keyMessage, "OK");
                Debug.LogError(title + " " + keyMessage);
            foreach (var behaviour in ARBuilder.Instance.ARCameraBehaviours)
                behaviour.TargetFound += OnTargetFound;
                behaviour.TargetLost += OnTargetLost;
                behaviour.TextMessage += OnTextMessage;
            foreach (var behaviour in ARBuilder.Instance.ImageTrackerBehaviours)
                behaviour.TargetLoad += OnTargetLoad;
                behaviour.TargetUnload += OnTargetUnload;

        void OnTargetFound(ARCameraBaseBehaviour arcameraBehaviour, TargetAbstractBehaviour targetBehaviour, Target target)
            Debug.Log(" Found: " + target.Id);

        void OnTargetLost(ARCameraBaseBehaviour arcameraBehaviour, TargetAbstractBehaviour targetBehaviour, Target target)
            Debug.Log(" Lost: " + target.Id);

        void OnTargetLoad(ImageTrackerBaseBehaviour trackerBehaviour, ImageTargetBaseBehaviour targetBehaviour, Target target, bool status)
            Debug.Log(" Load target (" + status + "): " + target.Id + " (" + target.Name + ") " + " -> " + trackerBehaviour);

        void OnTargetUnload(ImageTrackerBaseBehaviour trackerBehaviour, ImageTargetBaseBehaviour targetBehaviour, Target target, bool status)
            Debug.Log(" Unload target (" + status + "): " + target.Id + " (" + target.Name + ") " + " -> " + trackerBehaviour);

        private void OnTextMessage(ARCameraBaseBehaviour arcameraBehaviour, string text)
            textMessage = text;
            startShowMessage = true;
            Debug.Log("got text: " + text);

        IEnumerator ShowMessage()
            isShowing = true;
            yield return new WaitForSeconds(2f);
            isShowing = false;

        private void OnGUI()
            if (startShowMessage)
                if (!isShowing)
                startShowMessage = false;

            if (isShowing)
                GUI.Box(new Rect(10Screen.height / 2Screen.width - 2030), textMessage);

In this script, we want to recognize Target. After scanning QR code, the result will be displayed on the screen. I believe you are very familiar with found and load of Target. OnTextMessage()is for receive and return result and assign it to textMessage. Use OnGUI()to draw a model. Use Build to test and achieve the effect like below:

Ps: We won’t build up environment for AR+QR code in real operation. We will develop based on our Samples for EasyAR official site, which can enhance efficiency. Next tutorial, we will use an example to illustrate QR code +AR.