Creating Rich Multi-Screen Experiences on Android with Amazon Fling - Mario Viviani

MARIO VIVIANI
T E C H N O L O G Y E V A N G E L I S T, A M A Z O N A P P S T O R E U K
@mariuxtheone linkedin.com/in/marioviviani
C R E AT I N G R I C H M U LT I - S C R E E N
E X P E R I E N C E S O N A N D R O I D
W I T H A M A Z O N F L I N G

I T ’ S A - M E !
Ma r io V ivia n i
Technology Evangelist, Amazon Appstore UK
@mariuxtheone
Android Developer from 2010
95+ apps published
12,000,000+ downloads
Google Developer Expert 2013-15
Startup Founder, Co-Worker
Speaker at: Droidcon, Android Dev
Days, Big Android BBQ, Google I/O

Android is Not Just for
Mobile Devices

Android
Android TV Apps
based on
Fire OS
Fire TV Apps
based on

OS 5BASED ON
ANDROID 5.1
LOLLIPOP
ANDROID STUDIO

A M A Z O N F I R E T V FA C T S
Amazon Fire TV is
#1 BEST SELLING
Streaming Media Player
In US, UK and Germany
MANY MILLIONS
OF MINUTES
CONSUMED EVERY DAY
on Media Streaming Apps
on Fire TV in UK (2016)

bit.ly/firetvspecs
TV TV Stick
4K compatible
Quad-core CPU
2 GB RAM
(2160p)
WiFi – Bluetooth 4.1
8 GB Internal Storage
(actual formatted capacity will be less)
USB-A and MicroSD slot
FullHD
Quad-core CPU
1 GB RAM
(1080p)
WiFi – Bluetooth 4.1
8 GB Internal Storage
(actual formatted capacity will be less)
MicroUSB (power only)

Creating Rich Multi-Screen Experiences on Android with Amazon Fling - Mario Viviani

Development on Fire TVConnect ADB via WiFi
adb connect <ipaddress>
- + xTerminal

TV APPS DEVELOPMENT
Fire TV SDK add-on
v17 Leanback Library
Fire TV SDK add-on

BUILDING APPS
FOR TV
IN MINUTES

Available: On Github
Feeds: JSON and MRSS
Player: ExoPlayer, Custom
UX/UI: Optimised for big screen
Theme/Branding: Customisable
IAP: Available
Closed captioning: Available
Ads: Yes - FreeWheel, VAST
Analytics: Yes - Flurry, Omniture, Crashlytics, 3P
Login: Yes - Amazon, Adobe, Facebook, 3P
Available: On Github
Feeds: JSON, YouTube and MRSS
Player: VisualOn, OVP
UX/UI: Optimised for big screen
Theme/Branding: Customisable
IAP: Available
Closed captioning: Available
Ads: OVP
Analytics: Yes
Social Login: No
Web App Starter Kit

F I R E A P P B U I L D E R
STREAMING MEDIA PLAYERS
Plug and Play template for audio and video
apps. Create an app in less than 1 hour.
E A S Y, FA S T A N D
B E A U T I F U L
Contains modules (plugins) to enable advanced
functionality
Handles JSON feeds, branding and
customisation
Can be extended with your own code
Supports Amazon Fire TV family

M O D U L E S
Social loginsIn-App Purchasing
Ads
Analytics
Media Player AD

F I R E A P P B U I L D E R W O R K F L O W
CONFIGURE YOUR
FEED LAUNCH THE APP!
CUSTOMIZE UI &
MODULAR COMPONENTS
SETUP RECIPE FOR
CATEGORIES AND CONTENTS
JSON

S TA RT TO D AY !
D O W N L O A D
github.com/amzn/fire-app-builder
D O C U M E N TAT I O N
bit.ly/FireAppBuilderDoc

W E B A P P S TA RT E R K I T
STREAMING MEDIA PLAYERS
Web-Based Template for easily create
Media Streaming Apps
W E B - A P P S F O R T V
T H E E A S I E S T WAY
Optimised for the big screen
Handles JSON, MRSS and YouTube
Easily editable through CSS
Test directly on Fire TV through Web App Tester

var settings = {
Model: YouTubeAPIModel,
PlayerView: YouTubePlayerView,
PlaylistView: PlaylistPlayerView,
showSearch: true,
skipLength: 30,
controlsHideTime: 3000,
user: “MyUserNameOnYouTube",
devKey: “MyKey_YUIYDSUIHJAhsdud9as8aAPAUIAO",
showLatestChannel: true,
displayButtons: false
};
C R E AT E A WA S K A P P F R O M Y O U T U B E
i n i t . j s :

S TA RT TO D AY !
DOWNLOAD
bit.ly/WASKdoc
bit.ly/WASKgithub

BUILD RICH
MULTI-SCREEN
EXPERIENCES
WITH
AMAZON FLING

A M A Z O N F L I N G
B U I L D M U L T I - S C R E E N E X P E R I E N C E S
G E T T H E S D K BUILD RICH MULTI-SCREEN EXPERIENCES
bit.ly/amazonfling
Cross platform toolkit that enables you to
build rich multi-screen experiences for Fire TV
Allows sending video, audio and images from
iOS, Android or FireOS
Leverage two-way communication between
Amazon Fire TV and mobile apps to create
engaging second screen experiences

A M A Z O N F L I N G
VIDEO/AUDIO
METADATA
MOBILE APP
WITH
FLING COMPONENT
1) EMBEDDED
FLING RECEIVER
2) CUSTOM
FLING RECEIVER
OR

G E T S TA RT E D O N F L I N G
DOWNLOAD
developer.amazon.com/sdk-download
bit.ly/amazonfling

W H I S P E R P L AY R E Q U I R E D O N A O S P A N D R O I D

S A M P L E A M A Z O N F L I N G P R O J E C T S
developer.amazon.com/sdk-download
• CastWithFlingExample
• CustomPlayerSample
• FlingSample
• FlingWithInstallServiceSample
• InstallServiceSample
• MediaRouteProvider

MAIN COMPONENTS
OF A FLING APP

A N D R O I D M A N I F E S T – F I R E O S
manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="[YOUR PACKAGE NAME]">

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<application>
...
<uses-library android:name="com.amazon.whisperplay.contracts" android:required="true" />
...
</application>
...
</manifest>

A N D R O I D M A N I F E S T – A N D R O I D
manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="[YOUR PACKAGE NAME]">

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_MULTICAST_STATE"/>
...
</manifest>

F L I N G D I S C O V E RY L I S T E N E R
S E T U P T H E F L I N G L I S T E N E R
private DiscoveryController.IDiscoveryListener mDiscovery = new
DiscoveryController.IDiscoveryListener() {
@Override
public void playerDiscovered(RemoteMediaPlayer player) {
//add media player to the application’s player list.
}
@Override
public void playerLost(RemoteMediaPlayer player) {
//remove media player from the application’s player list.
}
@Override
public void discoveryFailure() {}
};

S TA RT / S TO P F L I N G D I S C O V E RY
@Override
protected void onResume() {
super.onResume();
…
mController.start("YourReceiverServiceID", mDiscovery);
}
@Override
protected void onPause() {
super.onPause();
…
mController.stop();
}

S TA R T / S T O P F L I N G D I S C O V E R Y ( E M B E D D E D R E C E I V E R )
@Override
protected void onResume() {
super.onResume();
…
mController.start(“amzn.thin.pl”, mDiscovery);
}
@Override
protected void onPause() {
super.onPause();
…
mController.stop();
}

DiscoveryController mController = new DiscoveryController(this); //in onCreate()
…
mController.start("amzn.thin.pl", mDiscoveryListener); //in onResume()
D E V I C E D I S C O V E RY & F L I N G O N E M B E D D E D R E C E I V E R
D I S C O V E R F L I N G R E C E I V E R
F L I N G T H E C O N T E N T
@Override
public void playerDiscovered(final RemoteMediaPlayer remoteMediaPlayer) {
//use RemoteMediaPlayer.setMediaSource(String source, String metadataJson, boolean autoPlay,
boolean playInBg)
remoteMediaPlayer.setMediaSource(videoUrl, metadataJson, true, true)
}

{
"type" : string,
"title" : string, // optional
"description" : string, // optional
"poster" : string, // optional – URL of the album art for an audio media source
"tracks" : // optional – subtitles presented to the user
[ // Array of subtitle objects
{
"src" : string, // required – URL of the WebVTT file
"kind" : string, // required – always "subtitles"
"srclang" : string, // required – language code
"label" : string // required – what is shown on the UI
}, …
],
"noreplay": true|false, //optional
}
A M A Z O N F L I N G M E TA D ATA
String videoUrl = “https://myservice.com/myvideourl.mp4”;
String metadataJson =

A M A Z O N F L I N G S A M P L E – S I M P L E V I D E O
{
"title": "Big Buck Bunny - MP4 H.264",
"url": "https://s3-us-west-1.amazonaws.com/amazon-fling/fling_media/BigBuckBunny_1280x736.mp4",
"metadata": {
"type": "video/mp4",
"title": "Big Buck Bunny",
"description": "Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself."
},
"iconUrl": "https://peach.blender.org/wp-content/uploads/bbbscore_cover_small.jpg"
}

A M A Z O N F L I N G S A M P L E – V I D E O W I T H C C
{
"title": "Elephant's Dream with Closed Caption",
"url": "https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4",
"metadata": {
"type": "video/mp4",
"title": "Elephant's Dream",
"description": "Elephants Dream is the world’s first…",
"tracks": [
{
"src": "https://s3-us-west-1.amazonaws.com/amazon-fling/fling_media/elephantsdream_english_en.vtt",
"kind": "subtitles",
"srclang": "en-US",
"label": "English"
},
{
"src": "https://s3-us-west-1.amazonaws.com/amazon-fling/fling_media/elephantsdream_korean_kr.vtt",
"kind": "subtitles",
"srclang": "kr-KOR",
"label": "Korean"
}
]
},
"iconUrl": "https://orange.blender.org/wp-content/uploads/2006/05/edscore_cover_l.jpg"
},

A M A Z O N F L I N G S A M P L E – A U D I O
{
"title": "MP3 - Four Seasons",
"url": "http://.../Music/Vivaldi-Spring-from-Four-Seasons.mp3",
"metadata":
{
"type": "audio/mp3",
"title": "Vivaldi - Spring from Four Seasons",
"description": "From album Vivaldi",
"poster": http://.../Vivaldi_Boston_Baroque.jpg
},
"iconUrl": "http://.../Vivaldi_Boston_Baroque.jpg"
},

N O F I R E T V
I N R A N G E
F I R E T V
A V A I L A B L E
C O N N E C T E D T O
F I R E T V

A M A Z O N F L I N G - C O N T R O L S

G E T S TA RT E D O N F L I N G
INTEGRATING AMAZ ON FLING W ITH
APPS THAT USE GOOGLE CAST
bit.ly/migratetofling
I N T E G R AT I N G A M A Z O N F L I N G
S D K I N TO Y O U R F I R E T V A P P
bit.ly/flinginfiretv

PUBLISH YOUR
FLING-ENABLED
APP

THANK YOU!
Mario Viviani
@mariuxtheone
@AmazonAppDev
vivianim@amazon.co.uk
developer.amazon.com/appstore bit.ly/flingworkshop

Creating Rich Multi-Screen Experiences on Android with Amazon Fling - Mario Viviani

More Related Content

Viewers also liked (16)

Similar to Creating Rich Multi-Screen Experiences on Android with Amazon Fling - Mario Viviani (20)

More from Amazon Appstore Developers (7)

Recently uploaded (20)

Creating Rich Multi-Screen Experiences on Android with Amazon Fling - Mario Viviani