Enhance your Android ecommerce app with Amazon Interactive Video Service

The internet has drastically changed the way that many people around the world shop. Although online shopping can be more convenient than shopping in-person, the human touch of a retail experience can be difficult to recreate in a website or app. As stores expand their online presence, some have turned to live, interactive video streams as a way to connect with shoppers.

Live video streams led by sales professionals or social media influencers can both help increase sales, and also provide a personal touch to an otherwise sterile online shopping experience. Live streams are also effective at building communities and promoting special events like limited-time flash sales or product “drops”.

While live video experiences may seem expensive and time-consuming to build and maintain, in this post I show you how to build a live shopping experience in a few minutes using Amazon Interactive Video Service (Amazon IVS). Amazon IVS is a managed live streaming solution that is quick and easy to set up, and ideal for creating interactive video experiences.

The example in this post showcases a live video stream, and a carousel that gives shoppers the opportunity to purchase the products shown on stream. Here’s what this post covers

Setting up an example eCommerce app on Android phones (10 min)
Modifying the example to point to your own products and Amazon IVS live stream (15–30 min)

Prerequisites

Before you can set up the example app, you need the following tools:

Android Studio, installed and up-to-date.
An Android Virtual Device (AVD) phone with API level 23 or later (Android 6.0). Learn more here: Run apps on the Android Emulator.
Git installed and up-to-date.If you want to modify this example, you also need the following:
An Amazon IVS channel that you can stream to. Follow the steps in Setting Up for Streaming with Amazon Interactive Video Service to learn how to stream to Amazon IVS.
AWS CLI version 2 installed and configured with access to Amazon IVS.

The following steps describe the process on macOS, but they can also be completed on any operating system that supports the prerequisites.

Setting up the example

To set up the example, get the Amazon IVS eCommerce Android Demo code from GitHub. Follow these steps to clone the repository and run the app in the Android Emulator:

Clone the repository from GitHub using your method of choice. The following steps describe how to do this using the Terminal app on macOS.
a. Open the Terminal app.
b. Navigate to a directory where you want to store the app code. For example: cd ~/Developer.
c. Clone the demo code repository with this command: git clone git@github.com:aws-samples/amazon-ivs-eCommerce-android-demo.git.\
Launch Android Studio.
Choose Open an Existing Android Studio Project, navigate to the repository you cloned in step 1, and open it.
You should now have the demo app open in Android Studio. Follow these next steps to run the app in the Android Emulator.
In the top-right corner of the app, click the list of available devices, and choose an Android phone with API level 23 or later (Android 6.0 or later). This example uses the Pixel 3a with Android 10.0+ (Google Play). If you do not see any available Android devices, you must create and configure one. Learn more here: Run apps on the Android Emulator.
Click the run button or press Ctrl-R to run the app.
Wait for the emulator to boot and start the example app. This may take a few moments if it is your first time launching your virtual device in the emulator.

Congratulations! The app should now be running in the Android Emulator. There are two examples of video in this app. Follow the instructions for the video type that you would like to see:

To view an example of portrait video, tap the leftmost image in the carousel.
To view an example of landscape video, tap the second-to-leftmost image in the carousel.

Modifying the example

While this example is not meant to run in a production environment, it may be helpful to modify it to see how your own products or live video might appear. In order to modify this example, you must be able to stream to your Amazon IVS channel. To do this, you can follow the instructions here: Setting Up for Streaming with Amazon Interactive Video Service.

Important note: Using your own stream creates and consumes AWS resources, which incur cost.

Customizing the example video

Use the following steps to replace the example video provided with your own Amazon IVS video stream.

Once you create an Amazon IVS channel, follow these steps to use your own live video in place of the portrait and/or landscape streams provided:

Open the Amazon IVS console and navigate to the channel you would like to use.
Copy the Playback URL for the channel. The URL should end in .m3u8.
In Android Studio, open src/main/java/com/amazonaws/ivs/player/eCommerce/common/Configuration.kt.
If you are streaming portrait video, replace the string on line 8 with the Playback URL from step 2. For landscape video, replace the string on line 9.
Save your changes (File > Save All).
Press Ctrl-R to run the app.
Navigate to the leftmost image in the LIVE carousel to view landscape video, or the second-to-leftmost image to view portrait video.

Customizing the products shown

Once you have your own video in the example app, you can use Timed Metadata to embed your own product information into the Amazon IVS video stream.

Amazon IVS Timed Metadata provides a way to embed metadata in an Amazon IVS stream. This means that your viewers receive the metadata at the same time as the video stream, regardless of stream latency or geographic location. To learn more about how to use Timed Metadata, read this guide: Embedding Metadata within a Video Stream.

Follow these steps to embed product information into your Amazon IVS stream.

In Android Studio, open src/main/java/com/amazonaws/ivs/player/eCommerce/common/Configuration.kt.
On line 10 change the value of BASE_URL to the base url of the server hosting your product and user images. This url string is prepended to the imageUrl and lastPurchaser.userprofile keys in the timed metadata you compose next. If you are unsure of what to put here, replace it with an empty string, like this:
let BASE_URL = ""
Using a text editor of your choice, create a new file metadata.json in a directory of your choice, like ~/Developer/temp.

Open the metadata.json file you created and add the product information you want to show into an object containing an array of json product objects following this structure:

{
    "products": [
        {
            "id": 0,
            "priceDiscount": "$<product-discount-
price>",
            "priceOriginal": "$<product-original-
price>",
            "imageUrl": "<product-image-url>",
            "name": "<product-name>",
            "webLink": "<product-details-url>",
            "isFeatured": <BOOL | true if currently on
stream, false if not>,
            "lastPurchaser": {
                "username": "<purchaser-name>",
                "userprofile": "<purchaser-image-url>"
            }
        }
    ]
}

Each of these keys maps onto a piece of information displayed in the product carousel:Note that your metadata must be less than 1 KB.

Once you have formatted your data, convert it from a json object to a String. One way to do this is to open your web browser’s javascript console with Command(⌘)-Option(⌥)-J and use the JSON.Stringify() function. Copy your object and invoke JSON.Stringify().
Copy the output string to your clipboard and paste it somewhere where you can retrieve it.
Open a command line tool with access to the AWS CLI, such as Terminal on macOS, or PowerShell on Windows 10.

Use the AWS CLI to call the PutMetadata endpoint. Replace <YOUR_CHANNEL_ARN> and <YOUR_STRINGIFIED_JSON> with your channel ARN from step 1 and your stringified json from step 4.

aws ivs put-metadata \
 --channel-arn <YOUR_CHANNEL_ARN> \
 --metadata '<YOUR_STRINGIFIED_JSON>'

Your command should look similar to this (note the use of single quotes to wrap the metadata string):

aws ivs put-metadata \
    --channel-arn arn:aws:ivs:us-west-2:XXXXXXXXXX:channel/XXXXXXXXXX \
    --metadata
	'{"products":[{"id":614522,"priceDiscount":"$75","priceOriginal":"$99","imageUrl":"/p-614522.png","name":"Tri-Ply Heavy Duty Round Pan 8-in","webLink":"https://thinkwithwp.com","isFeatured":true,"lastPurchaser":{"username":"yan18","userprofile":"/u-yan18.png"}},{"id":725412,"priceDiscount":"","priceOriginal":"$89","imageUrl":"/p-725412.png","name":"Handcrafted Forged Steel Chefs Knife","webLink":"https://thinkwithwp.com","isFeatured":false,"lastPurchaser":{"username":"marnie27","userprofile":"/u-marnie27.png"}},{"id":109822,"priceDiscount":"$110","priceOriginal":"$150","imageUrl":"/p-019822.png","name":"8-quart Pro Kitchen Stockpot","webLink":"https://thinkwithwp.com","isFeatured":false,"lastPurchaser":{"username":"TNKO","userprofile":"/u-TKNO.png"}}]}'

Go back to the portrait or landscape video you opened in step 7 of the Customizing the example video previous section.
When you call the PutMetadata endpoint in step 6, you should be able to see the product information that you entered appear in the carousel at the bottom of the screen.

Customizing the video metadata

Follow the next steps to change the stream metadata displayed in the app, including the streamer’s avatar, name, and stream title.

Using an image-editing app of your choice, create an avatar and export it to a file named avatar_1.png. If you would like a template of the avatar design, you can use the template in this file: Amazon IVS eCommerce Demo Android Avatar Asset.
In the Android Studio project tree panel, navigate to the directory app/src/main/res/drawable. Drag and drop your avatar_1.png file into this directory. Click “Overwrite” when asked.
In Android Studio, open the file app/src/main/res/values/strings.xml and modify line 13 and line 14 to change the streamer’s name and stream title, respectively.
Save your changes (File > Save All).
Press Ctrl-R to run the app.
Navigate to the leftmost image in the LIVE carousel to view landscape video, or the second-to-leftmost image to view portrait video.

Food for thought

If you want to extend this example and use it in your own app, consider the following:

Store product information like price, name, and id in a database like Amazon DynamoDB. Use Timed Metadata only to indicate which product id is being shown on-stream.
Add live chat, so shoppers can ask the host any questions they might have.

About Amazon IVS

Amazon Interactive Video Service (Amazon IVS) is a managed live streaming solution that is quick and easy to set up, and ideal for creating interactive video experiences. Simply send your live streams to Amazon IVS and the service does everything to make ultra-low latency live video available to any viewer around the world, letting you focus on building interactive experiences alongside the live video. Learn more.

AWS for M&E Blog