Miracast Too hard to discover the Windows 8.1 Play charm Pairing should not be required before a device shows up as a PlayTo target Devices should

Steven WilssensSenior Program Manager

Screen Casting: Develop multi-screen device applications using casting technologies

2-723

Users want to quickly transition from their small to big screen

Different standards and interoperability can make this tricky for developers today

With Windows 10, sharing content is intuitive, reliable and simple – for developers and consumers

Lots of devices, screens & protocols!

Miracast

• Too hard to discover the Windows 8.1 Play

charm

• Pairing should not be required before a device

shows up as a PlayTo target

• Devices should be discoverable on public and

domain networks

• More than just DLNA PlayTo devices

• The difference between Project and PlayTo is

confusing

• PlayTo just doesn’t work reliably enough

User Feedback – we’re listening

• APIs are too hard to use in real world

applications

• Device selection should be in my application

not hidden in a charm

• I want to be in control of the full experience

• Need support for more devices/protocols

• I want to be able to have converged APIs

across all Windows platforms

Developer Feedback – we’re listening

• Converged APIs across all Windows

platforms

• Improved reliability and telemetry

• Easier development for common

tasks

• Wider support for common

protocols

• Much more power to the developer!

Windows 10 Casting Investments

How can users get {stuff} from one screen to another?

Developers use Windows 10 APIs to create an experience tailored to the receiver device.

System Level Connections

Windows device connected to an external screen or wireless audio endpoint.

Application Level Connections

Use Windows APIs

Connect your Windows device to an

external screen or audio endpoint

External Screens: Cable, Miracast

Audio: Cable, USB, Bluetooth

System Level Connections

In Windows 8.1 we added Miracast as the Wireless

Projection technology. In Windows 10, we are

continuing our investment in this area.

Older devices continue to use IHV Miracast solution,

new chipsets use the Windows 10 implementation.

Key areas of focus are :

• Better user experience

• Telemetry

• Reliability improvements

• OS enhancements using standard Miracast and Wi-

Fi Direct

Miracast in Windows 10

• Monitor MS and IHV Miracast

implementations

• Filters on build #, drivers, sender

hardware, receiver hardware,

firmware, etc.

• Detailed drilldowns into every

Miracast layer

• We continuously improve our

reliability using these reports

Miracast Telemetry and Reliability Improvements

Click icon to add picture

We are working with Actiontec and other partners to

ensure a great experience with popular Miracast

devices..

The ScreenBeam Mini2 and ScreenBeam Pro have a

Beta firmware update available for Windows 10.

Download the ScreenBeam Configuration Utility and

update your firmware to Beta and take advantage of:

• Better user experience

• UIBC

• Fast IP Assignment

• Etc.

Getting a Miracast Device

Demo: System Level Connections

Application Level Connections

Multi-View ApplicationsMedia Element Casting

2nd

1st

Remote App Launching

2nd

Very easy, applications can send over content that is playing in the media element.

Applications use DIAL to launch their corresponding application on a remote device.

Create a custom multi-screen experience. Applications can leverage multiple monitors connected to a single Windows Windows 10 device

Element Casting APIs DIAL APIs ProjectionManager APIs

Media element, Video, Audio, Image tag visual elements can be casted to Bluetooth, Miracast, and DLNA devices

What’s new in Windows 10?

• Support for Bluetooth, Miracast, and DLNA

• The Play charm does not exists anymore.

Applications can now add their own casting UI !

• PlayToManager is deprecated and replaced by

Casting APIs

• The XAML MediaElement Transport Controls have

Media Element casting enabled

• Allows applications to cast content that is playing in

the media element.

• Project Spartan uses the Media Element Casting

API’s

Media Element Casting (1/2)

Media Element Casting

Media element, Video, Audio, Image tag visual elements can be casted to Bluetooth, Miracast, and DLNA devices

When to use?

• You want to add casting at a lower cost

• You want to reach the largest set of devices with one

API

• You don’t need any customization on the receiving

device

• You understand the capabilities of different protocols

and devices

• You are aware of the battery life impact on the

sending device

Media Element Casting (2/2)


Demo: Media Element Casting 101

Device Picker Control

Windows device picker control:

• Apps can customize devices that are enumerated

• Available by default in video playback controls

• Available to apps using Media Element framework

• Provides Inline pairing ceremonies

• Privacy Control

All applications can allow users to select a device through the Windows device picker control

Device Picker Control: Code Example (1/2)

CastingDevicePicker picker = new CastingDevicePicker();picker.DeviceSelected += picker_DeviceSelected; //In addition to the basic event and filters, they also adjust the colorspicker.Appearance.ForegroundColor = Windows.UI.Colors.blue; picker.Appearance.BackgroundColor = Windows.UI.Colors.green; picker.Appearance.AccentColor = Windows.UI.Colors.green; picker.Appearance.SelectedForegroundColor = Windows.UI.Colors.green; picker.Appearance.SelectedBackgroundColor = Windows.UI.Colors.blue; picker.Appearance.SelectedAccentColor = Windows.UI.Colors.blue;

//Show the selection UX when the button is pressedpicker.Show(new Rect(0, 0, 5, 5), new Placement.Above);

Media Element Casting: Code Example (2/2)

async void button_Clicked(object sender, RoutedEventArgs args){ //Show the selection UX when the button is pressed await picker.Show(new Rect(0, 0, 5, 5), new Placement.Above);}

void picker_DeviceSelected(CastingDevicePicker sender, CastingDeviceSelectedEventArgs args){ //Get the selected device from the arguments CastingDevice selectedDevice = args.SelectedDevice; //use the casting device as desired await selectedDevice.RequestStartCastingAsync(mediaElementVideo.GetAsCastingSource());}

Demo: Casting APIs with Custom Cast Button

Remote App Launching (1/3)

1. Client discovers DIAL enabled receiver devices

2. Get UPnP Device Description for receiver devices

3. Get application state information for 1 app on 1 device

4. Launch 1 app on a device with launch parameters

5. Sender and receiver apps establish their own communication

What’s Happening?

+ App

+ App

App

+ App

+ App

App

Sender Receiver

Use DIAL (DIscovery And Launch) from Windows devices to remote launch application on Xbox One and other DIAL capable devices. http://www.dial-multiscreen.org/

1st


2nd


Sender

• Converged APIs across desktop and mobile platforms

• Supports DIAL 1.6.4

• Integrated into the Windows 10 APIs and Windows

device picker control

Receiver

• Xbox One DIAL 1.6.4 support {since August 2014}

• YouTube and Netflix applications currently support

DIAL on Xbox One


1st


2nd


When to use?

• You already support DIAL on other platforms

• You want to provide a customized experience on the

receiving device

• You want to take device compatibility out of the

equation

• Best Battery life and local playback performance


Remote App Launching: Sender Code Example (1/3)

//Create a dial pickerDialDevicePicker picker = new DialDevicePicker(); //Filter it to only the application of interestpicker.Filter.SupportedAppNames.Append("ConstosoVideo"); //Add the event listener for the device selected event.picker.DialDeviceSelected += picker_DialDeviceSelected; //Add the event listener for the disconnected device event.picker.DisconnectButtonClicked += picker_DisconnectButtonClicked;

//Create a variable that refers to the desired Dial appDialApp app = null;

async void button_Clicked(object sender, RoutedEventArgs args){ //Show the selection UX when the button is pressed await picker.Show(new Rect(0, 0, 5, 5), Placement.Above);}

…

Remote App Launching: Sender Code Example (2/3)void picker_DialDeviceSelected(DialDevicePicker sender, DialDeviceSelectedEventArgs args){ //Get the selected device from the arguments DialDevice selectedDevice = args.SelectedDevice;

//Set the connecting status to ‘connecting’ picker.SetDisplayStatus(selectedDevice, DialDeviceDisplayStatus.Connecting);

//get the app from the device app = selectedDevice.GetDialApp("ConstosoVideo"); //Launch the application with a given argument. DialLaunchResult result = await app.RequestLaunchAsync("pairingCode=954967da-c57c-4d4e-924e-d54dcdf2a8bf&v=R9rymEWJX38&t=4"); //Once connected and underway, change the status to connected picker.SetDisplayStatus(selectedDevice, DialDeviceDisplayStatus.Connected); } …

"pairingCode=954967da-c57c-4d4e-924e-d54dcdf2a8bf &v=R9rymEWJX38 &t=4");

Remote App Launching: Sender Code Example (3/3)

void picker_DisconnectButtonClicked(DialDevicePicker sender, DialDisconnectButtonClickedEventArgs args){ //Retrieve the disconnecting device DialDevice device = args.Device;

//Set the status to ‘disconnecting’ picker.SetDisplayStatus(device, DialDeviceDisplayStatus.Disconnecting); //clean up the connection as necessary. This will be app specific. await app.StopAsync();

//Once done, change the status to disconnected picker.SetDisplayStatus(device, DialDeviceDisplayStatus.Disconnected); //Hide the picker picker.Hide();}

Remote App Launching: Xbox One Code Example (1/2)

<Extensions> <uap:Extension Category="windows.dialProtocol"> <uap:DialProtocol Name="constosovideo"/> </uap:Extension></Extensions>

Xbox One – Windows 10 Manifest

Remote App Launching: Xbox One Code Example (2/2)

protected override void OnActivated(IActivatedEventArgs args){ if (args.Kind != ActivationKind.DialReceiver) { Navigate("readytocast"); } else { var dialArgs = DialReceiverActivatedEventArgs(args);

var videoId = getParameter("v", dialArgs.Arguments); var startTime = getParameter("t", dialArgs.Arguments); var pairingCode = getParameter("pairingCode", dialArgs.Arguments); //Navigate to the Player page and start playing Navigate("play"); InitVideo(videoId, startTime); }}

Xbox One – Windows 10 App Code

Demo: Remote App Launching

Multi-View Applications

Create two views on the same or different screens. Different screens can be connected by cable or Miracast. Example: slideshow mode in PowerPoint, etc.



• Integrated into the Windows 10 APIs and Windows

device picker control

• You can now select a remote Miracast screen to cast

to

Multi-View Applications (1/2)

Create two views on the same or different screens. Different screens can be connected by cable or Miracast. Example: slideshow mode in PowerPoint, etc.

When to use?

• You want to customize what is being played on the

second screen

• You want to take advantage of the Windows Miracast

improvements

Multi-View Applications (2/2)


Multi-View Applications: Code Example (1/2)

async void button_Clicked(object sender, RoutedEventArgs args){ //Create the picker DevicePicker picker = new DevicePicker(); //Add the Multi-View selector to the filter. picker.Filter.AddDeviceClass(DeviceClass.ProjectionDevice); //Add the event listener for the device selected event picker.DeviceSelected += picker_DeviceSelected;

//Show the selection UX when the button is pressed picker.Show(new Rect(0, 0, 5, 5), Placement.Above); }

…

Multi-View Applications: Code Example (2/2)

void picker_DeviceSelected(DevicePicker sender, DeviceSelectedEventArgs args){ await ProjectionManager.StartProjectingAsync(ProjectionViewId, controllerViewId, args.selectedDeviceId);

}

Demo: Multi-View Applications

Combine Application Level Methods

Multi-View ApplicationsMedia Element Casting

2nd

1st


2nd

Very easy, applications can send over content that is playing in the media element.

Applications use DIAL to launch their corresponding application on a remote device.

Create a custom multi-screen experience. Applications can leverage multiple monitors connected to a single Windows Windows 10 device

Element Casting APIs DIAL APIs ProjectionManager APIs


Create a casting experience that maximizes the capabilities of every device. Combine Media Element, App Launching, and Multi-View application approaches to achieve that.



• Windows 10 APIs and Windows device picker control

allow you to create 1 user experience with different

technologies

Call to action

1. Already connected to a Miracast screen –

Continuation

2. Remote App Launching – Best performance and battery

3. Multi-View Applications – Great experience with

Miracast

4. Media Element casting – Broad set of devices

Combine Application Level Methods




Support Multiple Application-Level Methods : Code Example (1/3)

async void button_Clicked(object sender, RoutedEventArgs args){ //Create the picker DevicePicker picker = new DevicePicker(); //Add the various selectors to the filter. In this case projection, casting, and dial. picker.Filter.SupportedDeviceClasses.Add(DeviceClass.ProjectionDevice); picker.Filter.SupportedDeviceSelectors.Add(await CastingDevice.GetSelectorAsync(CastingTypes.Video)); picker.Filter.SupportedDeviceSelectors.Add(await DialDevice.GetSelectorAsync('ConstosoVideo')); //Add the event listener for the device selected event picker.DeviceSelected += picker_DeviceSelected; //Show the selection UX when the button is pressed picker.Show(new Rect(0, 0, 5, 5), Placement.Above); } …


void picker_DeviceSelected(DevicePicker sender, DeviceSelectedEventArgs args){ //Get the selected device from the argument if (DialDevice.DeviceInfoSupportsDial(args.SelectedDevice)) { //get dial device from id DialDevice selectedDevice = await DialDevice.FromIdAsync(args.SelectedDeviceId); //Get dial app DialApp app = selectedDevice.GetDialApp(‘contosovideo’);

//Launch the application using DIAL with a given argument. DialAppLaunchResult result = await DialDevice.RequestLaunchAsync("v=tGvHNNOLnCk"); } elseif (ProjectionDevice.DeviceInformationSupportsProjection(args.selectedDeviceId)) { …


elseif (ProjectionDevice.DeviceInfoSupportsProjection(args.selectedDevice)) { //Multi-View Applications await ProjectionManager.StartProjectionAsync(0, 1, args.selectedDeviceId)); } else { //Cast the element CastingDevice selectedDevice = await CastingDevice.FromIdAsync(args.SelectedDeviceId); //use the casting device as desired await selectedDevice.RequestStartCastingAsync(mediaElementVideo.GetAsCastingSource()); } //Hide the picker picker.Hide();}

…

Summary

SummaryWindows 10 will allow developers to reach the broadest set of devices through the broadest set of protocols

Developers are empowered to add casting to their apps

You can pick from Element Casting, Remote App Launching, Multi-View Applications

OR

combine them for the best possible experience for a set of devices!

© 2015 Microsoft Corporation. All rights reserved.

Documents

Miracast Too hard to discover the Windows 8.1 Play charm Pairing should not be required before a device shows up as a PlayTo target Devices should