creating rich multi-screen experiences on android with amazon fling - mario viviani
TRANSCRIPT
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
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)
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)
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
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 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 :
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
G E T S TA RT E D O N F L I N G
DOWNLOAD
developer.amazon.com/sdk-download
D O C U M E N TAT I O N
bit.ly/amazonfling
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
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
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]"><!-- Android Network Access Permissions --><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]"><!-- Android Network Access Permissions --><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"},
G E T S TA RT E D O N F L I N G
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
G E T S TA RT E D O N F L I N G
DOWNLOAD
developer.amazon.com/sdk-download
D O C U M E N TAT I O N
bit.ly/amazonfling
THANK YOU!
Mario Viviani@mariuxtheone
@AmazonAppDev
developer.amazon.com/appstore bit.ly/flingworkshop