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

MAR IO V IV IAN IT 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 l inked in .com/ in/ mariov iv iani

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 !

M a r i o V i v i a n i

Technology Evangelist, Amazon Appstore UK

@mariuxtheone

Android Developer from 201095+ apps published12,000,000+ downloadsGoogle Developer Expert 2013-15Startup Founder, Co-WorkerSpeaker 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 SELLINGStreaming Media PlayerIn US, UK and Germany

MANY MILLIONS

OF MINUTES CONSUMED EVERY DAY on Media Streaming Apps on Fire TV in UK (2016)

FIRE TV FAMILY

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

FullHDQuad-core CPU

1 GB RAM

(1080p)

WiFi – Bluetooth 4.1

8 GB Internal Storage(actual formatted capacity will be less)

MicroUSB (power only)

TV APPS

ADB Setup

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 GithubFeeds: JSON and MRSS

Player: ExoPlayer, CustomUX/UI: Optimised for big screenTheme/Branding: Customisable

IAP: AvailableClosed captioning: AvailableAds: Yes - FreeWheel, VAST

Analytics: Yes - Flurry, Omniture, Crashlytics, 3P

Login: Yes - Amazon, Adobe, Facebook, 3P

Available: On GithubFeeds: JSON, YouTube and MRSS

Player: VisualOn, OVPUX/UI: Optimised for big screenTheme/Branding: Customisable

IAP: AvailableClosed captioning: Available

Ads: OVPAnalytics: 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

WEB APP

STARTER KIT

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 VT 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 KBUILD 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 APPWITH

FLING COMPONENT

1) EMBEDDED

FLING RECEIVER

2) CUSTOM

FLING RECEIVER

OR

SETUP

AMAZON FLING SDK

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

SAMPLE

AMAZON FLING

PROJECTS

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


• CastWithFlingExample

• CustomPlayerSample

• FlingSample

• FlingWithInstallServiceSample

• InstallServiceSample

• MediaRouteProvider

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


• 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

@Overrideprotected void onResume() {

super.onResume();…

mController.start("YourReceiverServiceID", mDiscovery);}

@Overrideprotected 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 )

@Overrideprotected void onResume() {

super.onResume();…

mController.start(“amzn.thin.pl”, mDiscovery);}

@Overrideprotected 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

@Overridepublic 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"},

FLING SAMPLE

FLING UX

GUIDELINES

N O F I R E T VI N R A N G E

F I R E T VA 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


I NTEGRAT ING AMAZ ON FL ING 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


DOWNLOAD



bit.ly/amazonfling

PUBLISH YOUR

FLING-ENABLED

APP

THANK YOU!

Mario Viviani@mariuxtheone

@AmazonAppDev

[email protected]

developer.amazon.com/appstore bit.ly/flingworkshop