uso de wi di para android(castellano)
DESCRIPTION
Uso de wi di para android(castellano) presentado por Xavier Hallade en el Android Day celebrado en Madrid el 06/06/2014TRANSCRIPT
Usando la API Presentation y Wireless Displays desde Android* apps.
Xavier Hallade, Technical Marketing Engineer, Intel Corporatoin
ph0b.com - @ph0b
2
Qué es Miracast*?
Miracast* es un protocolo para para compartir audio y video entre dispositivos de una misma red, creado y
certificado por la WiFi Alliance*
El reemplazo inalámbrico para HDMI*/MHL*
Construido sobre estándares existentes
H.264 (MPEG-4 AVC) video compression & WiFi Direct
Basado en las especificaciones Intel® Wi-Fi Display
Abierto para la industria
El soporte fue incorporado en Android* 4.2
NO ES DLNA o ChromeCast
3
Qué es Intel® Wireless Display (WiDi)
Certificado por WFA Miracast*
Compatible con receptores certificados por Miracast*.
Soporta video HD hasta 1080p/60 con audio 5.1
Protección de contenido con HDCP2.1
Soporta dos modos adicionales de Display
Modo de Video extendido (con Android* media framework)
Soporte de uso multi-tarea (contenido en una segunda pantalla, mientras la pantalla local se usa para otra tarea)
Disponible en la mayoría de los Intel® Atom™ SOCs
Intel® WiDi en un superset de WFA Miracast*
4
El concepto de Miracast*
Video
Render Audio Render
Video Decode Audio Decode
De-Packetize De-Packetize
Link Content Protection Decrypt
(Optional)
AV DeMux
Transport
LLC
WI-Fi MAC (Direct Link)
Wi-Fi PHY
SINK
Video Encode Audio Encode
Packetize Packetize
Link Content Protection Encrypt
(Optional)
AV Mux
Transport
LLC
WI-Fi MAC (Direct Link)
Wi-Fi PHY
Video
Frames Audio
Samples
SOURCE
5
Adapters
• Actiontec* ScreenBeam Pro
• Netgear* (ex: PTV3000)
• Viewsonic (WPG-370)
• Acer*
• Best Buy* Rocketfish*
• Lenovo*
• …
Projectors
• Dell*
• Seiko Epson *
• Ricoh*
• LG*
• …
TVs
• Samsung*
• Toshiba*
• LG*
• TCL*
• Sharp*
• Philips*
• …
Miracast* Certified Sink Devices
Una lista de todos los dispositivos con certificación Miracast* puede hallarse en:
http://www.wi-fi.org/wi-fi-certified-miracast
Intel® WiDi Certified
7
Second-Screen Enabled Devices running Android* 4.2.x
Dispositivo Certificación
Miracast*
HDMI*, MHL* o
SlimPort*
Samsung* Galaxy S4 Sí Sí
Samsung Galaxy Tab3 10.1 No Sí
Sony* Xperia Z Sí Sí
LG* Optimus G Sí Sí
Nexus* 4, 5 Sí Sí
HTC* One Sí Sí
Lenovo* K900 Sí No
Asus* MeMO Pad FHD10 Sí Sí
8
Conectando Wireless Display en Android*
Sony* Xperia Z Stock/Intel® Samsung* Galaxy S4
9
Modo Clon (Por defecto)
Luego de establecer la conexión el usuario ve la pantalla local en el
display remoto
La resolución enviada al monitor remoto es la misma que en el
monitor local
No es necesario hacer nada para soportar este modo
10
Dual Screen Display With Single App
La pantalla remota es utilizada para visualizar el contenido
La pantalla local se utiliza para control e información contextual
La aplicación puede incorporar este modo a través de la Android*
Presentation API
11
Modo de Video Extendido (Específico de plataforma Intel®)
El modo video es activado automáticamente cuando el usuario reproduce un video
utilizando el framework de Android* Media Player (ex: VideoView)
El usuario visualiza el contenido en la pantalla remota a una resolución de 1080p (o
en la resolución nativa del contenido original)
La renderización local del video es desactivada para ahorrar energía pero la UI
permanence inalterada.
12
Reproducción en segundo plano (Específico de plataforma Intel®)
El usuario puede enviar video a la pantalla remota a una resolución de 1080p usando
una app que permite reproducir en segundo plano
El usuario puede navegar fuera de la app y reproducir un video en 1080p en la
pantalla local o usar cualquier otra aplicación, incluyendo recibir un llamado
telefónico sin alterar la reproducción en segundo plano.
13
Intel® WiDi – Posibilidades de pantalla doble (Dual Screen)
97 MPH 4 POS 107 MPH 8 POS 111 MPH 14 POS
LIVE FEED
TURN 7
Ventana #1 de la app
Configura y agrega
contenido seleccionado
en la 2a pantalla
Ventana #2 de la app
Vista multi-ángulo
Videos & más en pantalla grande
Aplicación
Multi-video
Configurada por el usuario
EXTREME Content
Driver #48- Car Cam
Driver #10 –
Follow the Car
Track Cam
Location
Car Race Main Live Feed
Driver #8- Car Cam Driver #99- Car Cam
Tweet Feeds….
Layout
1
Layout
4
Layout
3
Layout
2 MPH / POS MPH / POS MPH //POS
C l ear All
Follow
Driver
Driver
Tweets
Driver
Stats
Live
Feed
Driver
Locatio
n
Load Layout Save Layout
THE RACE
Una aplicación, tomando contenido de un sitio y dirigiendo dos pantallas!
14
Ideas de aplicaciones de Pantalla Doble
Enter search term
Touchpad Mode
Web Browser
15
Ideas de aplicaciones de Pantalla Doble
And
Keyboard Input Mode
w q e r t y u i o p
s a d f g h j k l
z x c v b n m
&123 / space · search
And
Web Browser
16
Ideas de aplicaciones de Pantalla Doble
Juegos
Modo doble comando
17
Ideas de aplicaciones de Pantalla Doble
Aplicación de
Productividad
18
Ideas de aplicaciones de Pantalla Doble
Current matches
X vs. Y
A vs. B
X vs. Z
Add Score
11
Player X vs. Player Z
7
Organizador de torneos
19
Demo de Segunda-Pantalla
20
API Android* de Segunda Pantalla
Android agregó soporte para segunda pantalla via la clase Presentation en Android* 4.2 (API Level 17),
permitiéndote:
Implementar soporte para una segunda pantalla en tus aplicaciones sin tener que preocuparte por el modo en que los
monitores están conectados. (Display agnostic)
Funciona con dispositivos compatibles con MHL*, HDMI*, SlimPort* y Miracast*
Puedes controlar el output de la pantalla remota (segunda pantalla) independientemente de la pantalla del celular.
21
El objeto “Presentation”
Dialog
Presentation
Necesitas una navegación fragmentable si quieres
mantenerlo corriendo mientras navegas la app.
La actividad debería ocuparse de pausar y reanudar el
contenido que está corriendo dentro de la presentación,
cuando fuere que la actividad en sí misma es pausada o
reanundada.
• Presentation es la clase base que debe ser extendida:
• Presentation hereda de Dialog, y al depender de Dialog, su ciclo de vida está
atado a una Actividad
public class DemoPresentation extends Presentation {
• Debe ser asociada a un monitor al momento de crearla
22
Usando la API Presentation
Antes de mostrar Presentation necesitás seleccionar un Display, esto se puede hacer de dos
formas:
1. MediaRouter API (in API 16): el sistema decide cuál es el major display para ti!
2. Display Manager API (in API 17): Enumeración de displays
// Get the MediaRouter service MediaRouter mMediaRouter = (MediaRouter)getSystemService(Context.MEDIA_ROUTER_SERVICE); // Care only about routes that have full video support. MediaRouter.RouteInfo mRouteInfo = mMediaRouter.getSelectedRoute(MediaRouter.ROUTE_TYPE_LIVE_VIDEO); Display presentationDisplay = mRouteInfo.getPresentationDisplay();
// Get the DisplayManager service. DisplayManager mDisplayManager = (DisplayManager)getSystemService(Context.DISPLAY_SERVICE); // enumerate the displays Display[] presentationDisplays = mDisplayManager.getDisplays(DisplayManager.DISPLAY_CATEGORY_PRESENTATION);
23
API Presentation
MediaRouter. getSelectedRoute
(ROUTE_TYPE_LIVE_VIDEO)
MediaRouter. routeInfo
getPresentationDisplay()
new Presentation (activityContext, display)
.show()
Luego, usando MediaRouter.addCallback, debes monitorear:
• onRouteUnselected
• onRouteSelected
• onRoutePresentationDisplayChanged
Cómo conseguir que se muestre Presentation:
Y dentro de la actividad manejando
Presentation:
• onResume
• onPause
24
Diseñando el Layout para Presentation
Utiliza un layout de la misma forma que con Dialog.
Las propiedades de Display son las mismas que con Google* TV:
Diseñar la UI para la TV es muy similar a diseñar para un teléfono de 7 pulgadas porque aun cuando la televisión tiene mucha más superficie, el teléfono está mucho más cerca del usuario.
El “theme” por defecto es Holo Dark: un texto claro en fondo oscuro es más fácil de leer en una TV.
La orientación es siempre… horizontal!
TV setting Addressable
screen size
Density
Identifier Screen Density Display Resolution
Screen size
identifier
720p 1280 x 720 px tvdpi 213 dp 960 x 540 dp large
1080p 1920 x 1080 px xhdpi 320 dp 960 x 540 dp large
fuente: https://developers.google.com/tv/android/docs/gtv_android_patterns
25
Probando tu app de Segunda-Pantalla:
Opciones:
• Real Hardware – soportando la funcionalidad de segunda pantalla
• Simular segunda pantalla- nueva capacidad de Android* 4.2 (en opciones de
desarrollador). Puedes seleccionar por rsolución y DPI y una vez activada recibes un
overlay emulando la segunda pantalla.
26
APIs de Display WiFi - Android* 4.2/4.3
Todas las APIs mencionadas debajo son propias de las versiones a partir de Android* 4.2/4.3
Son parte de las AOSP y públicas, pero no parte del framework con lo cual no hay garantía de que funcionen
android.hardware.display.DisplayManager
…
String ACTION_WIFI_DISPLAY_STATUS_CHANGED
WifiDisplayStatus getWifiDisplayStatus()
void scanWifiDisplays()
void connectWifiDisplay(String deviceAdress)¹
void disconnectWifiDisplay()²
void forgetWifiDisplay(String address)²
void renameWifiDisplay(String address, String alias)²
android.hardware.display.
WifiDisplayStatus
int getFeatureState()
int getScanState()
int getActiveDisplayState()
WifiDisplay getActiveDisplay()
WifiDisplay[] getAvailableDisplays()
WifiDisplay[] getRememberedDisplays()
android.hardware.display.WifiDisplay
String getDeviceAddress()
String getDeviceName()
String getDeviceAlias()
String getFriendlyDisplayName()
android.provider.Settings
…
String ACTION_WIFI_DISPLAY_SETTINGS
String getDeviceAlias()
String getFriendlyDisplayName()
¹android.permission.CONFIGURE_WIFI_DISPLAY requerido para dispositivos desconocidos ²android.permission.CONFIGURE_WIFI_DISPLAY requerido siempre
27
Agregando un MediaRouteButton
En res/menu/default.xml:
<item android:title="Media Route Settings" android:actionProviderClass="android.app.MediaRouteActionProvider" android:showAsAction="always" />
//Sets Media Route Button to second screen mode mediaRouteActionProvider.setRouteTypes (MediaRouter.ROUTE_TYPE_LIVE_VIDEO);
Q&A
29
Algunos comentarios finales
Presentation from background service with “Draw over apps” permission (SYSTEM_ALERT_WINDOW) and
TYPE_SYSTEM_ALERT LayoutParam.
WifiDisplaySink
HTML5 standard: http://webscreens.github.io/presentation-api/
Crosswalk: https://github.com/crosswalk-project/crosswalk-website/wiki/presentation-api-manual