2021 2nd International Conference on Innovative and Creative Information Technology (ICITech)
September 23-25, 2021, UKSW Salatiga, Indonesia
Implementation of Augmented Reality
in E-Commerce Applications
Brian Eniko Singgih
Computer Science Department
School of Computer Science
2021 2nd International Conference on Innovative and Creative Information Technology (ICITech) | 978-1-7281-9747-0/21/$31.00 ©2021 IEEE | DOI: 10.1109/ICITECH50181.2021.9590104
Bina Nusantara University
Jakarta, Indonesia 11530
brian.singgih@binus.ac.id
Husodo Wijaya
Computer Science Department
School of Computer Science
Bina Nusantara University
Jakarta, Indonesia 11530
husodo.wijaya@binus.ac.id
Abstract— The internet as a medium of shopping and buying
has become a widely researched media theme. Augmented
reality is a breakthrough technology that helps deliver an e-
commerce online shopping experience using the internet with
the quality of offline shopping. That is possible thanks to the
ability of augmented reality technology which allows consumers
to associate and try the product through cyberspace, as well as
online stores. This study aims to implement AR in e-commerce
applications. The e-commerce application here is a Web-based
application that is segmental into the online shopping site with
expected features to give the appearance of a new product,
unique and exciting in online shopping activity. With the
existence of augmented reality, it will make it easier to use web-
based applications so that it helps customers find the desired
product.
Keywords: Implementation, Augmented Reality, Web-Based
Applications, Electronic Commerce, Marker Detection.
I. INTRODUCTION
E-commerce is an online website that is used to trade
goods and services online. Examples of exchanges in e-
commerce are electronic funds transfers, purchases of
electronic data, and purchases of goods [1]. Augmented
reality is an innovative technology that can combine the
virtual world and the physical world through the camera.
Augmented reality not only combines the virtual world and
the physical world but also interactive [6].
Seen through the screen, it offers a view of the physical
environment in real life with computer-generated images,
changing the perception of what you see in front of you [1].
The aim is to implement augmented reality into e-commerce,
our e-commerce Application is Web-based applications that
are segmental into the online shopping site with expected
features to give the appearance of a new product, unique and
exciting in online shopping activity.
Equipped with augmented reality, it will make it easier to
use web-based applications so that it helps customers to find
the desired product. Augmented reality (AR) provides e-
commerce with new solutions in solving problems in
Authorized licensed use limited to: ULAKBIM UASL - ISTANBUL KULTUR UNIVERSITESI. Downloaded on March 12,2023 at 07:25:06 UTC from IEEE Xplore. Restrictions apply.
Langgeng Yudistira
Computer Science Department
School of Computer Science
Bina Nusantara University
Jakarta, Indonesia 11530
langgeng.yudistira@binus.ac.id
Maria Susan Anggreainy
Computer Science Department
School of Computer Science
Bina Nusantara University
Jakarta, Indonesia 11530
maria.anggreainy@binus.edu
realizing products to buyers. Augmented reality used in e-
commerce serves to make goods look realistic, increase user
satisfaction, and help promote product sales [7]. Users can
see through a smartphone or computer camera to get a real
world model, projecting virtual products in the real world,
then users can see the effect of items placed in the real world,
for example the user wants to buy a chair, augmented reality
technology can project the chair to the camera user to see the
effect of the chair placed in the background and determines
whether the size and color are appropriate [9].
With a well-constructed model, the product can be
visualized in real size on the user's device camera. Users can
also manipulate the product by selecting one of the products.
Examples of object or model manipulation in augmented
reality are moving or rotating the model and changing the
color or size of the product. This process can help users make
decisions in buying products [1].
Nowadays, people generally shop online or buy their
own goods in the store. Two, the shopping method has
advantages and disadvantages. Former customs can get the
goods tasted and textures, but limited by region and time, and
for some large stuff, such as supplies, furniture and the others,
they cannot experience the effects placed at home, unable to
determine whether just the right size and the right color [9].
Finally, saving time and effort, we can shop anytime and
wherever we want, but we often buy unwanted things [9].
Augmented reality technology is embedded in online
shopping platforms, products on web pages can be Three
dimensions, users can adjust the angle and location of goods
via cellphone screen, to see the overall appearance [9]. For
example, buying a sofa on an online shopping platform that
embeds Augmented reality Technology, the user can select a
product and open the camera on a smartphone or computer.
Then, the system will analyze the background in the room and
project a chair with the same size as the original size [6]. The
augmented reality system can also project seats according to
the user's distance and the selected area. This system is not
difficult to use and convenient to use so that it can satisfy
136
 2021 2nd International Conference on Innovative and Creative Information Technology (ICITech)
September 23-25, 2021, UKSW Salatiga, Indonesia

users [6]. When shopping online, shoppers sometimes buy the Marker based tracking is a method in Augmented Reality,
wrong or inappropriate product because they cannot see the a function of a marker, namely as a medium that plays a role
product in person. Augmented Reality can be one of the most in display virtual object on it, marker will be recognized by
useful technologies for E-commerce business owners in the an application that has embedded augmented reality
digital era. This technology can provide a pleasant shopping technology through camera device by recognizing the
experience so that customer loyalty can continue to increase. position and the orientation of the marker is in the form of 3
Augmented Reality turns the shopping experience into x, y and z axes [15][16][17].
gameplay, entertaining shoppers while guiding them in-store
to familiarize them with products and creating funnels to buy. III. RESULT
A. System Flow Design
II. METHODOLOGY
The flow of augmented reality design in e-commerce
AR is a perceptual strategy that helps to overlay computer applications can be seen in Fig. 3 with the following
graphic illustrations in the real world. AR can consolidate explanation.
representation strategies to be applied to various applications.
AR. Vision based framework introduced for representation 1. Application built for a web based
connection in devices; AR is also empowering perception of 2. When the user selects an application icon then the
invisible ideas or events by placing virtual items or data onto application will run and display the main menu page.
the physical article or situation [12]. The main purpose of this 3. On the main menu page, there are several other
paper is to implement augmented reality in e-commerce menus for each category in e-commerce applications.
4. When the user selects the menu or the AR function
applications.
of the app, the app will activate the camera feature
1. Literary Studies 5. The camera feature is activated to track markers.
The thing that was done the first time is a literature study, 6. To track a marker through the camera, the user must
reading researchers articles and research results other people place the marker in front of the camera so that the
do. Study of literature done by reading journals and papers. camera can capture and read the marker.
However, only fifteen journals and papers are taken for 7. If the marker is recognized, the screen will then
reference [13]. display the object as recorded on the marker.
2. Develop a Proposal Research
First identify the problem, later formulate it in the form
of a sentence asked, after the problem statement has been
made the next step is to formulate goals, then specify the
methodology to be used. In this study the end result is
building a prototype of an e-commerce application with
implementing augmented reality.
3. System Design
In this study, augmented reality in e-commerce is
designed to serve a realistic user experience and interaction.
With Augmented reality, users can bring products to the
physical world and even try to visualize products to the user's
physical body.
Just like regular e-commerce, our e-commerce also
requires the internet. Augmented reality in our e-commerce
requires the internet and a camera to project the product
model to the user's background through the camera.
The system was developed as an Active X plugin for e-
commerce web pages, as shown in Fig. 1. Online users can Fig. 1 The Active X plugin for e-commerce web pages.
search for and view images and related information products,
as they do on the website of traditional e-commerce, users can
also use the assistant plugin to bring the virtual product model
to their physical environment and then interact with the
product to specify if they are suitable. Plugin created using
MFC and OpenGL library.
The plugin works between client and server assistants'
ecommerce interface through Internet Explorer. ARToolkit is
used for tracking, and Open VRML is used for rendering the
Fig. 2 The complete structure of Augmented Reality e-commerce.
model. The complete structure of our system can be seen in
Fig. 2 [14].

137

Authorized licensed use limited to: ULAKBIM UASL - ISTANBUL KULTUR UNIVERSITESI. Downloaded on March 12,2023 at 07:25:06 UTC from IEEE Xplore. Restrictions apply.
 2021 2nd International Conference on Innovative and Creative Information Technology (ICITech)
September 23-25, 2021, UKSW Salatiga, Indonesia
Fig. 3. Augmented Reality System Visualized E - Commerce
B. Marker-Based Augmented Reality
Visual markers are widely used in existing augmented
reality applications. This augmented reality system based on
visual markers usually records video directly as input and is
the result of the performance of the marker-based augmented
reality system which relies heavily on the tracking system
used to detect markers and predict poses. The following is a
tracing process described below.
Step 1. Record video: record live video, by camera, and the
results will send in to the computer, frame by frame in real
time.
Step 2. Marker detection: marker detection, with image
processing algorithm, frame by frame in real time.
Step 3. Calculate the transformation matrix: calculation
position of the camera, comparative to the marker.
Step 4. Create the virtual object: create and segmental virtual
3D objects into a video stream.
As shown in Fig. 4 and Fig. 5, the relation between the
actual marker point (Xm, Ym, Zm) and the suitable point (xc,
yc) on the picture screen can be expressed by Fig 5. The
equation [1].
Fig. 4. The relationship between the real marker point with the suitable
screen image.
Authorized licensed use limited to: ULAKBIM UASL - ISTANBUL KULTUR UNIVERSITESI. Downloaded on March 12,2023 at 07:25:06 UTC from IEEE Xplore. Restrictions apply.
Fig. 5. The Equation.
In the equation, P is the intrinsic camera matrix obtained
from camera calibration, (Xc, Yc, Zc) are points in camera
coordinates, V and W are translation and rotational
transformation matrices between real-world coordinate
systems and the camera coordinate system. Because we use a
standard marker, the marker coordinates (Xm, Ym, Zm) and
the Screen coordinate (xc, yc) are also already known.
Therefore, the transformation matrix between the real world
with the camera coordinate system can be calculated using
four detected marker corners. The transformation matrix can
be used to render and segment virtual objects into live video
streams. The marker-based AR is quite robust and
comparatively easy to implement, marker-based AR has
several limitations associated with the use of computer vision
and image processing technology. For example, the marker-
based AR, the actual physical markers that must be
observable in a live video scene, limits the size and location
of the marker which tracking purposes, and the type and level
of human interaction that users can do with virtual objects. If
a partially closed marker, the marker will not be uncovered.
Simultaneously, the stability and accuracy of the marker
detection and counting of the transformation matrix is also
very dependent on the size of the marker used, the complexity
of the pattern of the marker, and lighting conditions.
IV. CONCLUSION AND DISCUSSION
The E-commerce system has within reach the limits that need
to be addressed, as it does not serve enough direct
information to online shoppers, mainly when shopping for
products such as clothing, furniture, jewelry, shoes and other
decorative products. Nowadays, technology is getting more,
more perfect, and more popular from the prospect of its
applications is also getting wider. This study aims to
implement an augmented reality into e-commerce, our e-
commerce Application is Web-based applications that are
segmental into the online shopping site with expected
features to give the appearance of a new product, unique and
exciting in online shopping activity. Online shoppers can
have several options to use this system as a static image
upload with the tags, or video using a computer for each
product. The rendering method used is also necessary to help
the virtual model of segmentation more seamlessly into the
real scene. For example, texture mapping in large quantities
should be used to be a better virtual reality product. Occlusion
real time can be applied to assist the approximate distance of
the consumer virtual products.
Although AR e-commerce provides more information
and interaction than other e-commerce tools, the results of
research, some limitations still exist in the proposals.
approach. The limitation using AR in e-commerce is,
according to study participants, this time not as easy to use as
138
 2021 2nd International Conference on Innovative and Creative Information Technology (ICITech)
September 23-25, 2021, UKSW Salatiga, Indonesia

traditional e-commerce systems or based VR. Render AR [7] Leonnard, L., Paramita, A. S., & Maulidiani, J. J. (2019). The Effect
system also needs to be improved to merge virtual models Augmented Reality Shopping Applications on Purchase Intention.
https://doi.org/10.15408/ess.v9i2.9724.
and real scenes smoother. Realistic product models can be [8] Jain, S., Hada, N., & Joshi, S. (2020). Shopping using Virtual Reality
very expensive to make. In addition, at this time, the Internet and Augmented Reality.
is still not fast enough to transfer and high-resolution product http://sersc.org/journals/index.php/IJAST/article/view/28168.
models in real time. Augmented Reality is used to provide [9] Cao, S., & Wang Q. (2017). Application and Prospect of AR
product information directly to online purchases which is to Technology in e-Commerce https://www.atlantis-
press.com/proceedings/emcs-17/25876258.
help them at the time when they make better decisions. [10] Haile, T. T., & Kang, M. (2020). Mobile Augmented Reality in
Moreover, in this research, the user prefers Augmented Electronic Commerce: Investigating User Perception and Purchase
reality e-commerce systems rather than Virtual reality e- Intent Amongst Educated Young Adults.
commerce systems. The implementation of augmented reality https://www.mdpi.com/2071-1050/12/21/9185.
technology in e-commerce can trigger an increase in [11] Eh Phon, D. N., Ali, M. B., & Halim, N. D. A. (2014). Collaborative
customer satisfaction in buying products and can trigger an augmented reality in education: A review. Proceedings - 2014
increase in profit. Through the implementation of this AR International Conference on Teaching and Learning in Computing and
feature can help marketers to eliminate consumer doubts in Engineering, LATICE 2014, 78–83.
doing online shopping because it is able to provide a real https://doi.org/10.1109/LaTiCE.2014.23.
picture of a products through virtual experiences with clarity [12] Ankita Pareek, Ajinkya Lale, Jagannath Charya. Evolution in E-
pictures and time efficiency offered Commerce with Augmented Reality Navneet Garg, IOP Conf. Series:
Materials Science and Engineering 1012 (2021) 012041 IOP
Publishing doi:10.1088/1757-899X/1012/1/012041.
REFERENCES [13] Lixăndroiu, R., Cazan, A. M., & Maican, C. I. (2021). An analysis of
[1] Lu, Y., & Smith, S. (2007). Augmented Reality E-Commerce Assistant the impact of personality traits towards augmented reality in online
System: Trying While Shopping. shopping. Symmetry, 13(3), 1–18.
https://link.springer.com/chapter/10.1007/978-3-540-73107-8_72 https://doi.org/10.3390/sym13030416.
[2] Chen, R. (2020). The Role of Augmented Reality in Retail Settings: A [14] Perwitasari, I. D. (2018). Teknik Marker Based Tracking Augmented
Systematic Literature Review and Research Agenda.
Reality untuk Visualisasi Anatomi Organ Tubuh Manusia Berbasis
https://www.research.manchester.ac.uk/portal/files/162160711/FULL
_TEXT.PDF. Android. INTERCOMS: Journal of Information Technology and
[3] Lu, Y., & Smith, S. (2008). Augmented Reality e-commerce: How the Computer Science, 1(1), 8–18.
Technology Benefits People's Lives. https://doi.org/10.31539/intecoms.v1i1.161.
https://pdfs.semanticscholar.org/51f4/d244e9781e0eb5791003431721 [15] Preprint, E., Jaiswal, T., Khan, A. A., Maheshwari, V., & Prakash, S.
4a77d02504.pdf?_ga=2.50199334.1096356092.1616252258- (2021). A Review on Augmented Reality in Education Augmented
1922432460.1616252258. Reality in Education. https://easychair.org/publications/preprint/NTcx.
[4] Priyah, R., & Vinod, V. (2014). Digital Online Shopping Using 3D in
Augmented Reality. [16] Procházka, D., & Koubek, T. (2011). Augmented reality
[5] Li, J. (2019). Trends in Virtual and Augmented Reality Research: A implementation methods in mainstream applications. Acta
Review of Latest Eye Tracking Research Papers and Beyond. Universitatis Agriculturae et Silviculturae Mendelianae Brunensis,
https://www.preprints.org/manuscript/201909.0019/v1/download. 59(4), 257–266. https://doi.org/10.11118/actaun201159040257.
[6] Trinidad, J., & Supervisors, S. (2020). Consumers’ online shopping [17] Xinyu Li., Dongyi Chen. Augmented Reality in E-Commerce with
experience with augmented reality: A way to influence consumers’ Markerless Tracking. International Conference on Information
knowledge and behavior.
Management and Engineering.2010.
http://essay.utwente.nl/83522/1/Trinidad_MA_BMS.pdf.

139

Authorized licensed use limited to: ULAKBIM UASL - ISTANBUL KULTUR UNIVERSITESI. Downloaded on March 12,2023 at 07:25:06 UTC from IEEE Xplore. Restrictions apply.