Creating Rich Multi-Screen Experiences on Android with Amazon Fling - Mario Viviani
1 like761 views
Mario Viviani, a technology evangelist and Android developer, specializes in creating rich multi-screen experiences on Amazon Fire TV and Android. The document outlines various tools and services available for developing apps, including the Amazon Fling SDK, Web App Starter Kit, and Fire App Builder, designed to facilitate streaming and app customization. Key features and components of the mentioned tools are detailed, offering resources for developers to build and publish their applications effectively.
![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>](https://image.slidesharecdn.com/flingworkshop-170301122752/85/Creating-Rich-Multi-Screen-Experiences-on-Android-with-Amazon-Fling-Mario-Viviani-42-320.jpg)
![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>](https://image.slidesharecdn.com/flingworkshop-170301122752/85/Creating-Rich-Multi-Screen-Experiences-on-Android-with-Amazon-Fling-Mario-Viviani-43-320.jpg)
![{
"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 =](https://image.slidesharecdn.com/flingworkshop-170301122752/85/Creating-Rich-Multi-Screen-Experiences-on-Android-with-Amazon-Fling-Mario-Viviani-48-320.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"
},](https://image.slidesharecdn.com/flingworkshop-170301122752/85/Creating-Rich-Multi-Screen-Experiences-on-Android-with-Amazon-Fling-Mario-Viviani-50-320.jpg)
Creating Rich Multi-Screen Experiences on Android with Amazon Fling - Mario Viviani
- 1. 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
- 2. 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
- 3. Android is Not Just for Mobile Devices
- 4. Android Android TV Apps based on Fire OS Fire TV Apps based on
- 5. OS 5BASED ON ANDROID 5.1 LOLLIPOP ANDROID STUDIO
- 6. 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)
- 8. 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)
- 10. TV APPS
- 11. ADB Setup
- 15. Development on Fire TVConnect ADB via WiFi adb connect <ipaddress> - + xTerminal
- 16. TV APPS DEVELOPMENT Fire TV SDK add-on v17 Leanback Library Fire TV SDK add-on
- 17. BUILDING APPS FOR TV IN MINUTES
- 18. 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
- 20. 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
- 21. M O D U L E S Social loginsIn-App Purchasing Ads Analytics Media Player AD
- 22. 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
- 23. 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
- 25. 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
- 26. 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 :
- 28. S TA RT TO D AY ! DOWNLOAD D O C U M E N TAT I O N bit.ly/WASKdoc bit.ly/WASKgithub
- 30. 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
- 31. 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
- 33. 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
- 37. 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
- 39. 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
- 40. 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
- 41. MAIN COMPONENTS OF A FLING APP
- 42. 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>
- 43. 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>
- 44. 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() {} };
- 45. 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(); }
- 46. 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(); }
- 47. 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) }
- 48. { "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 =
- 49. 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" }
- 50. 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" },
- 51. 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" },
- 52. FLING SAMPLE
- 55. 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
- 56. A M A Z O N F L I N G - C O N T R O L S
- 57. 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
- 58. 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
- 61. THANK YOU! Mario Viviani @mariuxtheone @AmazonAppDev [email protected] developer.amazon.com/appstore bit.ly/flingworkshop