Skip to content

View AR Experiences

Note

There is an assumption that you have already subscribed to an account on the Appearition Platform cloud. If you haven’t, please read Getting Started

Introduction#

This sample project will show you how to invoke methods on the Appearition Platform JS SDK to access and download AR Experience records. It uses the AR Target Image and Media module.

In this project you will build a simple HTML page that lists all of the AR Experience records in your channel. It will display the target images and let you invoke the media linked to the AR Experience.

Note

To complete this project, you will need to create at least one AR Experience record on the Appearition Platform. You can learn more about this here.

Create sample project file#

This project will be a one page HTML. Let’s go ahead and create a simple structure. We need to reference the JQuery library as the Appearition JS SDK requires it. Bootstrap is optional and used for styling our sample project only.

<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
    <h1>My AR Experiences</h1>

    <p>This sample project will connect to the Appearition Platform and download the published AR Experiences. </p>

    <div class="panel panel-default">
        <div class="panel-heading">AR Experiences</div>
        <div class="panel-body" id="arExperiences">None Loaded</div>
        <div class="panel-footer">
            <button class="btn btn-primary" onclick="javascript: loadArExperiences();">Load AR Experiences</button>
        </div>
    </div>

    <br />

    <div class="panel panel-default">
        <div class="panel-heading">Messages</div>
        <div class="panel-body" id="messages">Starting</div>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</html>

Reference core files#

Next we want to reference the Appearition Platform JS SDK files. For the latest version please see the API Documentation.

<script src="https://s3-ap-southeast-2.amazonaws.com/cdn.appearition.com/sdk/js/appearition.1.0.0.min.js"></script>
<script src="https://s3-ap-southeast-2.amazonaws.com/cdn.appearition.com/sdk/js/appearition.authentication.1.0.0.min.js"></script>

Reference module files#

Then we want to reference the module which will give us the AR Experiences (i.e. AR Target Image and Media).

<script src="https://s3-ap-southeast-2.amazonaws.com/cdn.appearition.com/sdk/js/appearition.arTargetImageAndMedia.1.0.0.min.js"></script>

Initialise#

Once we have all of our references, we can go ahead and initialise the Appearition JS SDK. This will configure the basic details for access the Appearition Platform.

<script type="text/javascript">

    $(document).ready(function () {
        Appearition.Init('<Base API URL>', '<App Id>', '<Anonymous Token>', '<Channel Id>');
    });

</script>
Init Parameters
Base API URL The Appearition Platform is available across numerous regions. As such, each region will have its own dedicated URL. To find out which is your URL, please view the API Access page in the platform portal. You can learn more about this [here](/api-access)
App Id When you setup API Access, you will need to register your application and supply an App Id. This should be any string that uniquely identifies your project. Consider using namespacing to ensure your App Id is unique. You can learn more about this [here](/api-access/#application_registration)
Anonymous Token Once you have registered your application, you can then go ahead and create an "Anonymous Token". This will give your application access to resources on the Appearition Platform without requiring user login. You can learn more about this [here](/api-access/#configuring_anonymous_access_permissions)
Channel Id When you registered an account on the Appearition Platform, you were allocated at least one channel. If you select that channel, you will be able to find the Id for it. You can learn more about channels [here](/platform/concepts/#channels)

List AR Experiences#

Now we will add the functionality to retrieve a list of all published AR Experiences from our channel in the Appearition Platform. 

 function loadArExperiences() {
        $('#arExperiences').html('Loading...');

        Appearition.ArTargetImageAndMedia.ListByChannel(
            {
                beforeSend: function (request) {
                    PrintMessage("Calling ListByChannel");
                },
                complete: function () {
                    PrintMessage("Call to ListByChannel completed");
                },
                success: function (data) {
                    console.log(data);

                    var htmlSnip = "<table class='table'><tr><th>Name</th><th>Asset Id</th><th>Media</th></tr>";
                    for (var i = 0; i < data.assets.length; i++) {
                        var asset = loadAsset(data.assets[i]);
                        htmlSnip += showAsset(asset);
                    }
                    htmlSnip += "</table>";

                    $('#arExperiences').html(htmlSnip);
                },
                fail: function (errorArr, xhr, thrownError) {
                    handleResponseErrors(errorArr, xhr, thrownError);
                    $('#arExperiences').innerHTML = 'Loading failed';
                }
            });
    }

The important part here is the call to Appearition.ArTargetImageAndMedia.ListByChannel which takes in an object of type Appearition.RequestOptions.

Request option parameters
beforeSend Optional function if you want to perform any actions before the request to the Appearition platform is made
complete Optional function if you want to perform any actions once the request has completed to the Appearition platform
success Function to process the results of a successful request to the Appearition Platform
fail Function to process the any failures with the request to the Appearition Platform
channelId Optional paramater to override the Channel Id that is sent as part of the request. Defaults to the Channel Id set during the Initialise
contentType Optional paramater to override the contentType that is sent as part of the request. Defaults to 'application/json'

Reading data from the Appearition Platform#

All calls to the Appearition Platform will yield a set JSON response. You can learn more about successful responses here.

When the ListByChannel succeeds, all of your published AR Experience records will be available under the data field of the reponse. Below is the code to load and process the data returned:

    function showAsset(asset) {
        var html = "<tr>"
            + "<td>" + asset.name + "</td>"
            + "<td>" + asset.assetId + "</td>"
            + "<td>";

        for (var i = 0; i < asset.mediaFiles.length; i++) {
            var media = asset.mediaFiles[i];
            html += "Media Type: " + media.mediaType + "<br/>" + "<a target='blank' href='" + media.url + "'>View</a>";
        }

        if (asset.mediaFiles.length == 0) {
            html += "No Media Available";
        }

        html += "</td></tr>";

        return html;
    }

    function loadAsset(jsData) {

        var asset = {
            assetId: jsData.assetId,
            name: jsData.name,
            mediaFiles: jsData.mediaFiles
        };

        return asset;
    }

Handling errors#

If something goes wrong with the request, there is a set format for errors. You can learn more about error handling here.

For now, you can add this code which will handle any errors returned from the call to the platform:

 function handleResponseErrors(errorArr, xhr, thrownError) {
        var msg = "";

        if (errorArr != null) {
            errorArr.foreach(function (e) {
                msg = msg + e + "; ";
            });
        }

        if (xhr != null) {
            msg = msg + "Status Code: " + xhr.status + ", ResponseText: " + xhr.responseText + "; ";
        }

        if (thrownError != null) {
            msg = msg + "ThrownError: " + thrownError + ";";
        }

        PrintMessage(msg);
    }

    function PrintMessage(msg) {
        $('#messages').append("<br/>");
        $('#messages').append(msg);
    }

Complete sample#

Click here to view and download the complete sample project.