Diffusion multimédiaMedia casting

Cet article vous montre comment procéder à une diffusion multimédia sur des appareils distants à partir d’une application Windows universelle.This article shows you how to cast media to remote devices from a Universal Windows app.

Diffusion multimédia intégrée avec MediaPlayerElementBuilt-in media casting with MediaPlayerElement

La façon la plus simple d’effectuer un cast de médias à partir d’une application Windows universelle consiste à utiliser la fonctionnalité de cast intégrée du contrôle MediaPlayerElement .The simplest way to cast media from a Universal Windows app is to use the built-in casting capability of the MediaPlayerElement control.

Pour permettre à l’utilisateur d’ouvrir un fichier vidéo à lire dans le contrôle MediaPlayerElement, ajoutez les espaces de noms suivants à votre projet.To allow the user to open a video file to be played in the MediaPlayerElement control, add the following namespaces to your project.

using Windows.Storage;
using Windows.Storage.Pickers;
using Windows.Storage.Streams;
using Windows.Media.Core;

Dans le fichier XAML de votre application, ajoutez un élément MediaPlayerElement et définissez AreTransportControlsEnabled sur true.In your app's XAML file, add a MediaPlayerElement and set AreTransportControlsEnabled to true.

<MediaPlayerElement Name="mediaPlayerElement"  MinHeight="100" MaxWidth="600" HorizontalAlignment="Stretch" AreTransportControlsEnabled="True"/>

Ajoutez un bouton pour permettre à l’utilisateur de lancer la sélection d’un fichier.Add a button to let the user initiate picking a file.

<Button x:Name="openButton" Click="openButton_Click" Content="Open"/>

Dans le gestionnaire d’événements Click du bouton, créez une nouvelle instance du FileOpenPicker, ajoutez des types de fichiers vidéo à la collection FileTypeFilter , puis définissez l’emplacement de départ sur la bibliothèque vidéos de l’utilisateur.In the Click event handler for the button, create a new instance of the FileOpenPicker, add video file types to the FileTypeFilter collection, and set the starting location to the user's videos library.

Appelez PickSingleFileAsync pour ouvrir la boîte de dialogue du sélecteur de fichiers.Call PickSingleFileAsync to launch the file picker dialog. Lorsque cette méthode est retournée, le résultat est un objet StorageFile représentant le fichier vidéo.When this method returns, the result is a StorageFile object representing the video file. Vérifiez que la valeur de ce fichier n’est pas null, ce qui est le cas si l’utilisateur annule l’opération de sélection.Check to make sure the file isn't null, which it will be if the user cancels the picking operation. Appelez la méthode OpenAsync du fichier pour obtenir un IRandomAccessStream pour le fichier.Call the file's OpenAsync method to get an IRandomAccessStream for the file. Enfin, créez un objet MediaSource à partir du fichier sélectionné en appelant CreateFromStorageFile et attribuez-le à la propriété Source de l’objet MediaPlayerElement pour définir le fichier source du contrôle.Finally, create a new MediaSource object from the selected file by calling CreateFromStorageFile and assign it to the MediaPlayerElement object's Source property to make the video file the video source for the control.

private async void openButton_Click(object sender, RoutedEventArgs e)
{
    //Create a new picker
    FileOpenPicker filePicker = new FileOpenPicker();

    //Add filetype filters.  In this case wmv and mp4.
    filePicker.FileTypeFilter.Add(".wmv");
    filePicker.FileTypeFilter.Add(".mp4");

    //Set picker start location to the video library
    filePicker.SuggestedStartLocation = PickerLocationId.VideosLibrary;

    //Retrieve file from picker
    StorageFile file = await filePicker.PickSingleFileAsync();

    //If we got a file, load it into the media lement
    if (file != null)
    {
        mediaPlayerElement.Source = MediaSource.CreateFromStorageFile(file);
        mediaPlayerElement.MediaPlayer.Play();
    }
}

Une fois la vidéo chargée dans l’élément MediaPlayerElement, il suffit à l’utilisateur d’appuyer sur le bouton de diffusion sur les contrôles de transport pour lancer une boîte de dialogue intégrée qui lui permet de choisir un appareil sur lequel diffuser le média chargé.Once the video is loaded in the MediaPlayerElement, the user can simply press the casting button on the transport controls to launch a built-in dialog that allows them to choose a device to which the loaded media will be cast.

Bouton de diffusion MediaElement

Notes

À compter de Windows 10, version 1607, nous vous recommandons d’utiliser la classe MediaPlayer pour lire des éléments multimédias.Starting with Windows 10, version 1607, it is recommended that you use the MediaPlayer class to play media items. MediaPlayerElement est un contrôle XAML léger utilisé pour afficher le contenu d’un MediaPlayer dans une page XAML.The MediaPlayerElement is a lightweight XAML control that is used to render the content of a MediaPlayer in a XAML page. Le contrôle MediaElement continue d’être pris en charge pour la compatibilité descendante.The MediaElement control continues to be supported for backwards compatibility. Pour plus d’informations sur l’utilisation de MediaPlayer et MediaPlayerElement pour lire du contenu multimédia, voir Lire du contenu audio et vidéo avec MediaPlayer.For more information on using MediaPlayer and MediaPlayerElement to play media content, see Play audio and video with MediaPlayer. Pour plus d’informations sur l’utilisation de MediaSource et des API associées pour utiliser du contenu multimédia, voir Éléments, playlists et pistes multimédias.For information on using MediaSource and related APIs to work with media content, see Media items, playlists, and tracks.

Diffusion multimédia à l’aide de la classe CastingDevicePickerMedia casting with the CastingDevicePicker

Une deuxième façon de convertir un média en appareil consiste à utiliser CastingDevicePicker.A second way to cast media to a device is to use the CastingDevicePicker. Pour utiliser cette classe, incluez l’espace de noms Windows. Media. Casting dans votre projet.To use this class, include the Windows.Media.Casting namespace in your project.

using Windows.Media.Casting;

Déclarez une variable de membre pour l’objet CastingDevicePicker.Declare a member variable for the CastingDevicePicker object.

CastingDevicePicker castingPicker;

Lorsque vous initialisez la page, créez une nouvelle instance du sélecteur de Cast et définissez la propriété Filter sur SupportsVideo pour indiquer que les périphériques de cast listés par le sélecteur doivent prendre en charge la vidéo.When you page is initialized, create a new instance of the casting picker and set the Filter to SupportsVideo property to indicate that the casting devices listed by the picker should support video. Enregistrez un gestionnaire pour l’événement CastingDeviceSelected, qui est déclenché lorsque l’utilisateur sélectionne un appareil pour la diffusion.Register a handler for the CastingDeviceSelected event, which is raised when the user picks a device for casting.

//Initialize our picker object
castingPicker = new CastingDevicePicker();

//Set the picker to filter to video capable casting devices
castingPicker.Filter.SupportsVideo = true;

//Hook up device selected event
castingPicker.CastingDeviceSelected += CastingPicker_CastingDeviceSelected;

Dans votre fichier XAML, ajoutez un bouton pour permettre à l’utilisateur de lancer le sélecteur.In your XAML file, add a button to allow the user to launch the picker.

<Button x:Name="castPickerButton" Content="Cast Button" Click="castPickerButton_Click"/>

Dans le gestionnaire d’événements Click du bouton, appelez TransformToVisual pour obtenir la transformation d’un élément d’interface utilisateur par rapport à un autre élément.In the Click event handler for the button, call TransformToVisual to get the transform of a UI element relative to another element. Dans cet exemple, la transformation est la position du bouton du sélecteur de diffusion par rapport à la racine visuelle de la fenêtre d’application.In this example, the transform is the position of the cast picker button relative to the visual root of the application window. Appelez la méthode Show de l’objet CastingDevicePicker pour lancer la boîte de dialogue de sélecteur de cast.Call the Show method of the CastingDevicePicker object to launch the casting picker dialog. Indiquez l’emplacement et les dimensions du bouton du sélecteur de diffusion afin que le système puisse afficher la boîte de dialogue à partir du bouton sur lequel l’utilisateur a appuyé.Specify the location and dimensions of the cast picker button so that the system can make the dialog fly out from the button that the user pressed.

private void castPickerButton_Click(object sender, RoutedEventArgs e)
{
    //Retrieve the location of the casting button
    GeneralTransform transform = castPickerButton.TransformToVisual(Window.Current.Content as UIElement);
    Point pt = transform.TransformPoint(new Point(0, 0));

    //Show the picker above our casting button
    castingPicker.Show(new Rect(pt.X, pt.Y, castPickerButton.ActualWidth, castPickerButton.ActualHeight),
        Windows.UI.Popups.Placement.Above);
}

Dans le gestionnaire d’événements CastingDeviceSelected, appelez la méthode CreateCastingConnection de la propriété SelectedCastingDevice des arguments d’événement, qui représente l’appareil de diffusion sélectionné par l’utilisateur.In the CastingDeviceSelected event handler, call the CreateCastingConnection method of the SelectedCastingDevice property of the event args, which represents the casting device selected by the user. Enregistrez des gestionnaires pour les événements ErrorOccurred et StateChanged.Register handlers for the ErrorOccurred and StateChanged events. Enfin, appelez RequestStartCastingAsync pour lancer la diffusion en transmettant le résultat à la méthode GetAsCastingSource de l’objet MediaPlayer du contrôle MediaPlayerElement pour indiquer que le contenu multimédia à diffuser correspond à celui du MediaPlayer associé à MediaPlayerElement.Finally, call RequestStartCastingAsync to begin casting, passing in the result to the MediaPlayerElement control's MediaPlayer object's GetAsCastingSource method to specify that the media to be cast is the content of the MediaPlayer associated with the MediaPlayerElement.

Notes

La connexion de la diffusion doit être lancée sur le thread d’interface utilisateur.The casting connection must be initiated on the UI thread. Étant donné que CastingDeviceSelected n’est pas appelé sur le thread d’interface utilisateur, vous devez placer ces appels à l’intérieur d’un appel à CoreDispatcher.RunAsync pour changer cela.Since the CastingDeviceSelected is not called on the UI thread, you must place these calls inside a call to CoreDispatcher.RunAsync which causes them to be called on the UI thread.

private async void CastingPicker_CastingDeviceSelected(CastingDevicePicker sender, CastingDeviceSelectedEventArgs args)
{
    //Casting must occur from the UI thread.  This dispatches the casting calls to the UI thread.
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        //Create a casting conneciton from our selected casting device
        CastingConnection connection = args.SelectedCastingDevice.CreateCastingConnection();

        //Hook up the casting events
        connection.ErrorOccurred += Connection_ErrorOccurred;
        connection.StateChanged += Connection_StateChanged;

        //Cast the content loaded in the media element to the selected casting device
        await connection.RequestStartCastingAsync(mediaPlayerElement.MediaPlayer.GetAsCastingSource());
    });
}

Dans les gestionnaires d’événements ErrorOccurred et StateChanged, vous devez mettre à jour votre interface utilisateur pour informer l’utilisateur de l’état de diffusion actuel.In the ErrorOccurred and StateChanged event handlers, you should update your UI to inform the user of the current casting status. Ces événements sont décrits en détail dans la section suivante portant sur la création d’un sélecteur d’appareil de diffusion personnalisé.These events are discussed in detail in the following section on creating a custom casting device picker.

private async void Connection_StateChanged(CastingConnection sender, object args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        ShowMessageToUser("Casting Connection State Changed: " + sender.State);
    });
}

private async void Connection_ErrorOccurred(CastingConnection sender, CastingConnectionErrorOccurredEventArgs args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        ShowMessageToUser("Casting Connection State Changed: " + sender.State);
    });
}

Diffusion multimédia à l’aide d’un sélecteur d’appareil personnaliséMedia casting with a custom device picker

La section suivante décrit comment créer votre propre interface utilisateur de sélecteur d’appareil de diffusion par l’énumération des appareils de diffusion et le lancement de la connexion à partir de votre code.The following section describes how to create your own casting device picker UI by enumerating the casting devices and initiating the connection from your code.

Pour énumérer les périphériques de cast disponibles, incluez l’espace de noms Windows. Devices. Enumeration dans votre projet.To enumerate the available casting devices, include the Windows.Devices.Enumeration namespace in your project.

using Windows.Devices.Enumeration;

Ajoutez les contrôles suivants à votre page XAML pour implémenter l’interface utilisateur rudimentaire pour cet exemple :Add the following controls to your XAML page to implement the rudimentary UI for this example:

  • Un bouton pour démarrer l’observateur d’appareils qui recherche les appareils de diffusion disponibles.A button to start the device watcher that looks for available casting devices.
  • Contrôle ProgressRing pour fournir des commentaires à l’utilisateur pour lequel l’énumération est en cours.A ProgressRing control to provide feedback to the user that casting enumeration is ongoing.
  • Une classe ListBox pour répertorier les appareils de diffusion détectés.A ListBox to list the discovered casting devices. Définissez un ItemTemplate pour le contrôle afin que nous puissions assigner les objets de périphérique de cast directement au contrôle et afficher toujours la propriété FriendlyName .Define an ItemTemplate for the control so that we can assign the casting device objects directly to the control and still display the FriendlyName property.
  • Un bouton permettant à l’utilisateur de déconnecter l’appareil de diffusion.A button to allow the user to disconnect the casting device.
<Button x:Name="startWatcherButton" Content="Watcher Button" Click="startWatcherButton_Click"/>
<ProgressRing x:Name="watcherProgressRing" IsActive="False"/>
<ListBox x:Name="castingDevicesListBox" MaxWidth="300" HorizontalAlignment="Left" SelectionChanged="castingDevicesListBox_SelectionChanged">
    <!--Listbox content is bound to the FriendlyName field of our casting devices-->
    <ListBox.ItemTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding Path=FriendlyName}"/>
        </DataTemplate>
    </ListBox.ItemTemplate>
</ListBox>
<Button x:Name="disconnectButton" Content="Disconnect" Click="disconnectButton_Click" Visibility="Collapsed"/>

Dans le code sous-jacent, déclarez des variables de membre pour DeviceWatcher et CastingConnection.In your code behind, declare member variables for the DeviceWatcher and the CastingConnection.

DeviceWatcher deviceWatcher;
CastingConnection castingConnection;

Dans le gestionnaire Click de l’événement startWatcherButton, commencez par mettre à jour l’interface utilisateur en désactivant le bouton et en activant l’anneau de progression pendant l’énumération des appareils.In the Click handler for the startWatcherButton, first update the UI by disabling the button and making the progress ring active while device enumeration is ongoing. Effacez la zone de liste des appareils de diffusion.Clear the list box of casting devices.

Ensuite, créez un observateur d’appareils en appelant DeviceInformation.CreateWatcher.Next, create a device watcher by calling DeviceInformation.CreateWatcher. Cette méthode peut être utilisée pour observer de nombreux types d’appareils différents.This method can be used to watch for many different types of devices. Indiquez que vous souhaitez observer les appareils prenant en charge la diffusion vidéo en utilisant la chaîne de sélecteur d’appareil renvoyée par CastingDevice.GetDeviceSelector.Specify that you want to watch for devices that support video casting by using the device selector string returned by CastingDevice.GetDeviceSelector.

Enfin, enregistrez les gestionnaires d’événements pour les événements added, removed, EnumerationCompletedet Stopped .Finally, register event handlers for the Added, Removed, EnumerationCompleted, and Stopped events.

private void startWatcherButton_Click(object sender, RoutedEventArgs e)
{
    startWatcherButton.IsEnabled = false;
    watcherProgressRing.IsActive = true;

    castingDevicesListBox.Items.Clear();

    //Create our watcher and have it find casting devices capable of video casting
    deviceWatcher = DeviceInformation.CreateWatcher(CastingDevice.GetDeviceSelector(CastingPlaybackTypes.Video));

    //Register for watcher events
    deviceWatcher.Added += DeviceWatcher_Added;
    deviceWatcher.Removed += DeviceWatcher_Removed;
    deviceWatcher.EnumerationCompleted += DeviceWatcher_EnumerationCompleted;
    deviceWatcher.Stopped += DeviceWatcher_Stopped;

    //Start the watcher
    deviceWatcher.Start();
}

L’événement Added est déclenché lorsqu’un nouvel appareil est détecté par l’observateur.The Added event is raised when a new device is discovered by the watcher. Dans le gestionnaire de cet événement, créez un objet CastingDevice en appelant CastingDevice.FromIdAsync et en transmettant l’ID de l’appareil de diffusion détecté, qui est contenu dans l’objet DeviceInformation transmis au gestionnaire.In the handler for this event, create a new CastingDevice object by calling CastingDevice.FromIdAsync and passing in the ID of the discovered casting device, which is contained in the DeviceInformation object passed into the handler.

Ajoutez le CastingDevice à l’appareil de diffusion ListBox afin que l’utilisateur puisse le sélectionner.Add the CastingDevice to the casting device ListBox so that the user can select it. En raison du ItemTemplate défini dans le XAML, la propriété FriendlyName sera utilisée comme texte de l’élément dans la zone de liste.Because of the ItemTemplate defined in the XAML, the FriendlyName property will be used as the item text for in the list box. Étant donné que ce gestionnaire d’événements n’est pas appelé sur le thread d’interface utilisateur, vous devez mettre à jour l’interface utilisateur à partir d’un appel à CoreDispatcher. RunAsync.Because this event handler is not called on the UI thread, you must update the UI from within a call to CoreDispatcher.RunAsync.

private async void DeviceWatcher_Added(DeviceWatcher sender, DeviceInformation args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, async () =>
    {
        //Add each discovered device to our listbox
        CastingDevice addedDevice = await CastingDevice.FromIdAsync(args.Id);
        castingDevicesListBox.Items.Add(addedDevice);
    });
}

L’événement Removed est déclenché lorsque l’observateur détecte qu’un appareil de diffusion n’est plus présent.The Removed event is raised when the watcher detects that a casting device is no longer present. Comparez la propriété de l’ID de l’objet Added transmis par le biais du gestionnaire à l’ID de chaque Added de la collection Items de la zone de liste.Compare the ID property of the Added object passed into the handler to the ID of each Added in the list box's Items collection. Si l’ID correspond, supprimez cet objet de la collection.If the ID matches, remove that object from the collection. Là encore, dans la mesure où l’interface utilisateur est mise à jour, cet appel doit être effectué depuis un appel RunAsync.Again, because the UI is being updated, this call must be made from within a RunAsync call.

private async void DeviceWatcher_Removed(DeviceWatcher sender, DeviceInformationUpdate args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        foreach (CastingDevice currentDevice in castingDevicesListBox.Items)
        {
            if (currentDevice.Id == args.Id)
            {
                castingDevicesListBox.Items.Remove(currentDevice);
            }
        }
    });
}

L’événement EnumerationCompleted est déclenché lorsque l’observateur a terminé la détection des appareils.The EnumerationCompleted event is raised when the watcher has finished detecting devices. Dans le gestionnaire de cet événement, mettez à jour l’interface utilisateur pour permettre à l’utilisateur de savoir que l’énumération des appareils est terminée et arrêtez l’observateur d’appareils en appelant Stop.In the handler for this event, update the UI to let the user know that device enumeration has completed and stop the device watcher by calling Stop.

private async void DeviceWatcher_EnumerationCompleted(DeviceWatcher sender, object args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        //If enumeration completes, update UI and transition watcher to the stopped state
        ShowMessageToUser("Watcher completed enumeration of devices");
        deviceWatcher.Stop();
    });
}

L’événement Stopped est déclenché lorsque l’observateur d’appareils a terminé l’arrêt.The Stopped event is raised when the device watcher has finished stopping. Dans le gestionnaire de cet événement, arrêtez le contrôle ProgressRing et réactivez le paramètre startWatcherButton afin que l’utilisateur puisse redémarrer le processus d’énumération des appareils.In the handler for this event, stop the ProgressRing control and reenable the startWatcherButton so that the user can restart the device enumeration process.

private async void DeviceWatcher_Stopped(DeviceWatcher sender, object args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        //Update UX when the watcher stops
        startWatcherButton.IsEnabled = true;
        watcherProgressRing.IsActive = false;
    });
}

L’événement SelectionChanged est déclenché, dès que l’utilisateur sélectionne un des appareils de diffusion à partir de la zone de liste.When the user selects one of the casting devices from the list box, the SelectionChanged event is raised. La création de la connexion de la diffusion et le démarrage de la diffusion s’effectuent dans ce gestionnaire.It is within this handler that the casting connection will be created and casting will be started.

Tout d’abord, assurez-vous que l’observateur d’appareils est arrêté afin que l’énumération des appareils n’interfère pas avec la diffusion multimédia.First, make sure the device watcher is stopped so that device enumeration doesn't interfere with media casting. Créez une connexion de diffusion en appelant CreateCastingConnection sur l’objet CastingDevice sélectionné par l’utilisateur.Create a casting connection by calling CreateCastingConnection on the CastingDevice object selected by the user. Ajoutez des gestionnaires d’événements pour les événements StateChanged et ErrorOccurred .Add event handlers for the StateChanged and ErrorOccurred events.

Lancez la diffusion multimédia en appelant RequestStartCastingAsync et en transmettant la source de diffusion renvoyée en appelant la méthode GetAsCastingSource de MediaPlayer.Start media casting by calling RequestStartCastingAsync, passing in the casting source returned by calling the MediaPlayer method GetAsCastingSource. Enfin, faites en sorte que le bouton de déconnexion soit visible pour permettre à l’utilisateur d’arrêter la diffusion multimédia.Finally, make the disconnect button visible to allow the user to stop media casting.

private async void castingDevicesListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (castingDevicesListBox.SelectedItem != null)
    {
        //When a device is selected, first thing we do is stop the watcher so it's search doesn't conflict with streaming
        if (deviceWatcher.Status != DeviceWatcherStatus.Stopped)
        {
            deviceWatcher.Stop();
        }

        //Create a new casting connection to the device that's been selected
        castingConnection = ((CastingDevice)castingDevicesListBox.SelectedItem).CreateCastingConnection();

        //Register for events
        castingConnection.ErrorOccurred += Connection_ErrorOccurred;
        castingConnection.StateChanged += Connection_StateChanged;

        //Cast the loaded video to the selected casting device.
        await castingConnection.RequestStartCastingAsync(mediaPlayerElement.MediaPlayer.GetAsCastingSource());
        disconnectButton.Visibility = Visibility.Visible;
    }
}

Dans le gestionnaire de changement d’état, l’action effectuée dépend du nouvel état de la connexion de diffusion :In the state changed handler, the action you take depends on the new state of the casting connection:

  • Si l’état est Connected ou Rendering, assurez-vous que le contrôle ProgressRing est inactif et que le bouton de déconnexion est visible.If the state is Connected or Rendering, make sure the ProgressRing control is inactive and the disconnect button is visible.
  • Si l’état est Disconnected, désélectionnez l’appareil de diffusion actuel dans la zone de liste, assurez-vous que le contrôle ProgressRing est inactif et masquez le bouton de déconnexion.If the state is Disconnected, unselect the current casting device in the list box, make the ProgressRing control inactive, and hide the disconnect button.
  • Si l’état est Connecting, activez le contrôle ProgressRing et masquez le bouton de déconnexion.If the state is Connecting, make the ProgressRing control active and hide the disconnect button.
  • Si l’état est Disconnecting, activez le contrôle ProgressRing et masquez le bouton de déconnexion.If the state is Disconnecting, make the ProgressRing control active and hide the disconnect button.
private async void Connection_StateChanged(CastingConnection sender, object args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        //Update the UX based on the casting state
        if (sender.State == CastingConnectionState.Connected || sender.State == CastingConnectionState.Rendering)
        {
            disconnectButton.Visibility = Visibility.Visible;
            watcherProgressRing.IsActive = false;
        }
        else if (sender.State == CastingConnectionState.Disconnected)
        {
            disconnectButton.Visibility = Visibility.Collapsed;
            castingDevicesListBox.SelectedItem = null;
            watcherProgressRing.IsActive = false;
        }
        else if (sender.State == CastingConnectionState.Connecting)
        {
            disconnectButton.Visibility = Visibility.Collapsed;
            ShowMessageToUser("Connecting");
            watcherProgressRing.IsActive = true;
        }
        else
        {
            //Disconnecting is the remaining state
            disconnectButton.Visibility = Visibility.Collapsed;
            watcherProgressRing.IsActive = true;
        }
    });
}

Dans le gestionnaire de l’événement ErrorOccurred, mettez à jour votre interface utilisateur pour informer l’utilisateur qu’une erreur de diffusion s’est produite et désélectionnez l’objet CastingDevice dans la zone de liste.In the handler for the ErrorOccurred event, update your UI to let the user know that a casting error occurred and unselect the current CastingDevice object in the list box.

private async void Connection_ErrorOccurred(CastingConnection sender, CastingConnectionErrorOccurredEventArgs args)
{
    await Dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, () =>
    {
        //Clear the selection in the listbox on an error
        ShowMessageToUser("Casting Error: " + args.Message);
        castingDevicesListBox.SelectedItem = null;
    });
}

Enfin, implémentez le gestionnaire pour le bouton de déconnexion.Finally, implement the handler for the disconnect button. Arrêtez la diffusion multimédia et déconnectez l’appareil de diffusion en appelant la méthode DisconnectAsync de l’objet CastingConnection.Stop media casting and disconnect from the casting device by calling the CastingConnection object's DisconnectAsync method. Cet appel doit être transmis au thread d’interface utilisateur en appelant CoreDispatcher.RunAsync.This call must be dispatched to the UI thread by calling CoreDispatcher.RunAsync.

private async void disconnectButton_Click(object sender, RoutedEventArgs e)
{
    if (castingConnection != null)
    {
        //When disconnect is clicked, the casting conneciton is disconnected.  The video should return locally to the media element.
        await castingConnection.DisconnectAsync();
    }
}