Uso de wi di para Android(castellano)

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


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


Juegos

Modo doble comando

17


Aplicación de

Productividad

18


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

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);

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

http://webscreens.github.io/presentation-api/



https://github.com/crosswalk-project/crosswalk-website/wiki/presentation-api-manual









Uso de wi di para Android(castellano)

Technology

Transcript of Uso de wi di para Android(castellano)