Idioma: HTML | XAML

Guia de início rápido: transmitindo uma apresentação de slides usando Reproduzir em (XAML)

Applies to Windows only

Você pode usar Reproduzir em para permitir que os usuários executem facilmente o streaming de áudio, vídeo ou imagens, de seus computadores para dispositivos nas redes domésticas. Este tópico mostra como usar o recurso Reproduzir em no aplicativo da Windows Store para permitir que os usuários transmitam imagens como uma apresentação de slides para um dispositivo de destino.

Objetivo: Use Reproduzir em para transmitir de imagens como uma apresentação de slides para um dispositivo de destino.

Pré-requisitos

Microsoft Visual Studio

Instruções

1. Criar um novo projeto e permitir o acesso às Imagens

  1. Abra o Visual Studio e selecione Novo Projeto no menu Arquivo. Na seção Visual C# ou Visual Basic, Visual C# ou Visual Basic, selecione o Aplicativo. Nomeie o aplicativo PlayToSlideShow e clique em OK.
  2. Abra o arquivo Package.appxmanifest e selecione a guia Recursos. Selecione a funcionalidade Imagens para habilitar o acesso do seu aplicativo à pasta Imagens em um computador. Feche e salve o arquivo de manifesto.

2. Adicionar a interface do usuário em HTML

Abra o arquivo MainPage.xaml e adicione o seguinte à <Grid> padrão. A interface do usuário contém um StackPanel usado para exibir as imagens e um TextBlock usado para exibir mensagens de status. A interface do usuário também contém um TextBlock que informa ao usuário como começar o streaming usando Reproduzir em e Button para habilitar o usuário a se desconectar durante o streaming. Esses dois elementos ficam ocultos e se tornam visíveis dependendo de a apresentação de slides ser streaming ou não.


<StackPanel Orientation="Vertical">
    <StackPanel x:Name="SlideShowPanel"  Height="600" Orientation="Horizontal" />
    <TextBlock x:Name="MessageBlock" FontSize="14" >Slideshow disconnected</TextBlock>
    <Button x:Name="DisconnectButton" Width="600" Height="60" Visibility="Collapsed" FontSize="14">
        <StackPanel Orientation="Horizontal">
            <TextBlock>Connected to</TextBlock>
            <Image x:Name="IconImage" Width="30" />
            <TextBlock x:Name="DeviceBlock" />
        </StackPanel>
    </Button>
    <TextBlock x:Name="InstructionsBlock" FontSize="14" >Swipe from the right edge of the screen, select "Devices", 
        and select a device to stream the slide show to.</TextBlock>
</StackPanel>


3. Adicione o código de inicialização

O código nessa etapa inicializa o PlayToManagere inicia a apresentação de slides.

Abra o arquivo MainPage.xaml.cs ou MainPage.xaml.vb e adicione o código a seguir no lugar do método OnNavigatedTo padrão.


private Windows.Media.PlayTo.PlayToManager ptm;
private Windows.UI.Xaml.DispatcherTimer timer;
private Windows.UI.Core.CoreDispatcher dispatcher = Window.Current.CoreWindow.Dispatcher;

protected override void OnNavigatedTo(NavigationEventArgs e)
{
    ptm = Windows.Media.PlayTo.PlayToManager.GetForCurrentView();
    ptm.SourceRequested += SourceRequested;
    ptm.SourceSelected += SourceSelected;

    StartSlideShow();
}


4. Adicionar código para obter e exibir as imagens como uma apresentação de slides

Este exemplo exibe imagens como uma apresentação de slides usando as imagens na pasta raiz das Imagens. Para fazer isso, primeiro obtenha a lista de imagens da pasta Imagens e depois crie objetos <image> para realizar um ciclo pela lista.

Ao fazer streaming das imagens usando Reproduzir em, o código desse aplicativo de apresentação de slides usa a capacidade de armazenar em buffer o próximo item de mídia usando Reproduzir em. Isso é opcional, mas é útil em cenários nos quais é necessário tempo adicional para a obtenção do próximo item de mídia a ser transmitido. Armazenando a mídia em buffer, você pode transmiti-la imediatamente após a conclusão do item de mídia atual e evitar atrasos entre itens de mídia.

Para armazenar o próximo item de mídia em buffer, definimos a origem do Reproduzir em do item seguinte como a propriedade Next do item atual. Quando o item atual é concluído, chamamos o método PlayNext do item atual para transmitir a próxima origem de mídia para o dispositivo de destino.

Quando a apresentação de slides está sendo reproduzida apenas localmente, o código usa um tempo limite para se mover para a próxima imagem na lista. Quando a apresentação de slides faz streaming para um receptor de Reproduzir em, o código ainda usa um tempo limite para se mover para a próxima imagem, mas também responde quando o receptor de Reproduzir em pausa a apresentação de slides, move-se para a próxima imagem antes de se esgotar o tempo limite ou é desconectado. Para fazer isso, use o evento Statechanged da origem de Reproduzir em referenciada pela propriedade PlayToSource de um objeto de imagem. No evento Statechanged, o código examina as propriedades CurrentState e PreviousState dos argumentos passados para o evento. Os diferentes estados, juntamente com o número que identifica o índice da imagem que gerou o evento Statechanged, informam como responder conforme mostrado na tabela a seguir.

CurrentStateAção a ser tomada
desconectado

Se o índice da imagem que gerou o evento for o mesmo índice da imagem que está sendo exibida no momento, isso significará que a origem de Reproduzir em foi desconectada enquanto uma imagem estava sendo exibida. Isso significa que o receptor de Reproduzir em não está mais conectado e que iniciamos a apresentação de slides localmente usando o índice de imagem mais recente. Caso contrário, um estado de Disconnected simplesmente indica que a apresentação de slides concluiu a exibição da imagem que gerou o evento e que podemos limpar o objeto de imagem que não é mais necessário.

conectado

Se o estado anterior for Disconnected, isso significará que a imagem que gerou o evento acabou de ser conectada a um receptor de Reproduzir em. Nesse momento, obtemos a próxima imagem para que seja carregada enquanto a imagem atual é exibida.

Se o estado anterior for Rendering, isso significará que o usuário pausou a apresentação de slides no receptor de Reproduzir em e que limpamos o tempo limite atual até que o usuário reinicie a apresentação.

renderizaçãoSe o estado anterior for Connected, isso significará que o receptor de Reproduzir em cancelou a pausa da apresentação de slides e que podemos iniciá-la novamente.

 

No arquivo MainPage.xaml.cs ou MainPage.xaml.cs, adicione o código a seguir depois do código da etapa anterior.


IReadOnlyList<Windows.Storage.StorageFile> imageList;   // contains the list of images to show
bool streaming = false;      // true when streaming using Play To; otherwise false
int timeLapse = 5;           // time between images (5 seconds)
int imageSize = 600;         // size of current displayed image
int thumbnailSize = 200;     // size of "thumbnail" of next image
int currentImage = 0;        // index of the current image from imageList

// Get the list of images from the Pictures folder and start the slide show.
async private void StartSlideShow()
{
    var resultsLibrary = await
        Windows.Storage.KnownFolders.PicturesLibrary.GetFilesAsync();
    imageList = resultsLibrary;
    if (imageList.Count > 0)
    {
        var image = QueueImage(0, true);
    }
    else
    {
        MessageBlock.Text = "There are no images in the Pictures library.";
    }
}

// PlayNextImage
// Called when a new image is displayed due to a timeout.
// Removes the current image object and queues a new next image.
// Sets the next image index as the new current image, and increases the size 
// of the new current image. Then sets the timeout to display the next image.

private async void PlayNextImage(int num)
{
    // Stop the timer to avoid repeating.
    if (timer != null) { timer.Stop(); }

    await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
        async () =>
        {
            SlideShowPanel.Children.Remove((UIElement)(SlideShowPanel.FindName("image" + num)));
            var i = await QueueImage(num + 2, false);

            currentImage = num + 1;
            ((Image)SlideShowPanel.FindName("image" + currentImage)).Width = imageSize;
        });

    timer = new Windows.UI.Xaml.DispatcherTimer();
    timer.Interval = new TimeSpan(0, 0, timeLapse);
    timer.Tick += delegate(object sender, object e)
    {
        PlayNextImage(num + 1);
    };
    timer.Start();
}

// QueueImage
// Called to create an image object for the displayed images.

private async System.Threading.Tasks.Task<Image> QueueImage(int num, bool isFirstImage)
{
    // Create the image element for the specified image index and add to the
    // slide show div.

    Image image = new Image();
    image.Width = isFirstImage ? imageSize : thumbnailSize;
    image.Name = "image" + num;
    image.VerticalAlignment = VerticalAlignment.Bottom;
    var fileContents = await imageList[num % imageList.Count].OpenReadAsync();
    var imageBitmap = new Windows.UI.Xaml.Media.Imaging.BitmapImage();
    imageBitmap.SetSource(fileContents);
    image.Source = imageBitmap;

    await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
        () =>
        {
            SlideShowPanel.Children.Add(image);
        });

    // If this is the first image of the slide show, queue the next image. Do
    // not queue if streaming as images are already queued before
    // streaming using Play To.

    if (isFirstImage && !streaming)
    {
        var i = await QueueImage(num + 1, false);

        timer = new Windows.UI.Xaml.DispatcherTimer();
        timer.Interval = new TimeSpan(0, 0, timeLapse);
        timer.Tick += delegate(object sender, object e)
        {
            PlayNextImage(num);
        };
        timer.Start();
    }

    // Use the transferred event of the Play To connection for the current image object
    // to "move" to the next image in the slide show. The transferred event occurs
    // when the PlayToSource.playNext() method is called, or when the Play To
    // Receiver selects the next image.

    image.PlayToSource.Connection.Transferred += 
        async delegate(Windows.Media.PlayTo.PlayToConnection sender, 
                 Windows.Media.PlayTo.PlayToConnectionTransferredEventArgs e)
           { 
               currentImage = num + 1;

               await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
                   () =>
                   {
                       ((Image)SlideShowPanel.FindName("image" + currentImage)).Width = imageSize;
                   });
           };


// Use the statechanged event to determine which action to take or to respond
// if the Play To Receiver is disconnected.
image.PlayToSource.Connection.StateChanged += 
    async delegate(Windows.Media.PlayTo.PlayToConnection sender,
             Windows.Media.PlayTo.PlayToConnectionStateChangedEventArgs e)
    {
        switch (e.CurrentState) {
            case Windows.Media.PlayTo.PlayToConnectionState.Disconnected:

                // If the state is disconnected and the current image index equals the 
                // num value passed to queueImage, then the image element is not connected 
                // to the Play To Receiver any more. Restart the slide show.
                // Otherwise, the current image has been discarded and the slide show
                // has moved to the next image. Clear the current image object and
                // remove it from the slide show div.

                if (currentImage == num)
                {
                    await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, 
                        async () =>
                        {
                            MessageBlock.Text = "Slideshow disconnected";

                            // Cancel any existing timeout
                            if (timer != null) { timer.Stop(); }

                            // Clear all image objects from the slide show div
                            SlideShowPanel.Children.Clear();

                            // Reset the slide show objects and values to their beginning state
                            streaming = false;
                            DisconnectButton.Visibility = Visibility.Collapsed;
                            InstructionsBlock.Visibility = Visibility.Visible;
                            DisconnectButton.Click -= DisconnectButtonClick;

                            // Restart the slide show from the current image index
                            var i = await QueueImage(currentImage, true);
                        });
                } 
                else 
                { 
                    await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
                            () =>
                            {
                                image.PlayToSource.Next = null;

                                if (streaming)
                                {
                                    SlideShowPanel.Children.Remove(image);
                                }   
                            });
                }

                break;
            
            case Windows.Media.PlayTo.PlayToConnectionState.Connected:

                // If the state is connected and the previous state is disconnected, 
                // then the image element is newly connected. Queue up the next image so 
                // that it is loaded while the current image is being displayed.
                // If the previous state is rendering, then the user has paused the slideshow 
                // on the Play To Receiver. Clear the current timeout until the user restarts
                // the slide show.
                await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
                    async () =>
                    {
                        if (e.PreviousState ==  Windows.Media.PlayTo.PlayToConnectionState.Disconnected)
                        {
                            var imageNext = await QueueImage(num + 1, false);
                            image.PlayToSource.Next = imageNext.PlayToSource;
                        } 
                        else if (e.PreviousState == Windows.Media.PlayTo.PlayToConnectionState.Rendering) 
                        {
                            if (timer != null) { timer.Stop(); }
                        }

                        if (currentImage == num) 
                        {
                            MessageBlock.Text = "Slideshow connected";
                        }
                    });
                break;

            case  Windows.Media.PlayTo.PlayToConnectionState.Rendering:

                // If the state is rendering and the previous state is
                // connected, then the Play To Receiver has restarted
                // the slide show.
                    await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
                        () =>
                        {
                            if (e.PreviousState == Windows.Media.PlayTo.PlayToConnectionState.Connected)
                            {
                                // Clear any existing timeout.
                                if (timer != null) { timer.Stop(); }

                                // Restart the slide show.
                                timer = new Windows.UI.Xaml.DispatcherTimer();
                                timer.Interval = new TimeSpan(0, 0, timeLapse);
                                timer.Tick += delegate(object s, object args)
                                {
                                    image.PlayToSource.PlayNext();
                                };
                                timer.Start();
                            }

                            if (currentImage == num)
                            {
                                MessageBlock.Text = "Slideshow rendering";
                            }
                       }); 
                break;
            }
        };

    return image;
}


5. Adicione o código de Reproduzir em

O código nesta etapa implementa o contrato do botão Reproduzir em Ele obtém uma referência ao PlayToManager para o aplicativo atual e associa o manipulador de eventos para os eventos SourceRequested e SourceSelected.

Como objetos de imagem são criados e eliminados para cada imagem da apresentação de slides, usamos um objeto de imagem temporário que nunca é eliminado no evento SourceRequested. Isso é feito porque não sabemos se o tempo limite se esgotará antes de o usuário escolher um receptor de Reproduzir em. Se isso ocorresse, a imagem atual seria eliminada e passaríamos uma referência nula para Reproduzir em. Em vez disso, passamos para Reproduzir em uma referência a um objeto de imagem que nunca é eliminado e atualizamos a origem da imagem para a imagem exibida atualmente depois que o usuário escolhe um receptor de Reproduzir em. Sabemos que isso ocorreu quando o estado da imagem muda para Connected.

No arquivo MainPage.xaml.cs ou MainPage.xaml.vb, adicione o código a seguir depois do código da etapa anterior.


// Set up the Play To contract.

// Used to pass an image to Play To that will not be removed/destroyed
// by the slide show logic. For example, if the user opens the Devices
// charm and the sourcerequested event fires, but the image display timeout
// completes before the user selects a target device, then the image that
// was being displayed is removed and destroyed. intialImage is never 
// destroyed so Play To will always have a valid source to stream.
Image initialImage = null;

private async void SourceRequested(Windows.Media.PlayTo.PlayToManager sender, 
                             Windows.Media.PlayTo.PlayToSourceRequestedEventArgs e)
{
    var deferral = e.SourceRequest.GetDeferral();

    await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
    () =>
    {
        initialImage = new Image();

        // Use the statechanged event of the image passed to Play To to determine when
        // the image is finally connected to the Play To Receiver.
        initialImage.PlayToSource.Connection.StateChanged += InitialImageConnectionStateChanged;

        // Provide Play To with the first image to stream.
        e.SourceRequest.SetSource(initialImage.PlayToSource);

        deferral.Complete();
    });
}

private async void InitialImageConnectionStateChanged(Windows.Media.PlayTo.PlayToConnection sender,
                                                      Windows.Media.PlayTo.PlayToConnectionStateChangedEventArgs e)
{
        if (e.CurrentState == Windows.Media.PlayTo.PlayToConnectionState.Connected) {

            await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal, 
                async () =>
                {
                    // Clear any existing timeout.
                    if (timer != null) { timer.Stop(); }

                    // Clear the slide show panel.
                    SlideShowPanel.Children.Clear();

                    // Set the slide show objects and values to show that we are streaming.
                    streaming = true;
                    DisconnectButton.Visibility = Visibility.Visible;
                    InstructionsBlock.Visibility = Visibility.Collapsed;

                    // Queue and display the next image.
                    var image = await QueueImage(currentImage, true);
                    initialImage.PlayToSource.Next = image.PlayToSource;
                    initialImage.PlayToSource.PlayNext();
                });
        };
}

// Update the once the user has selected a device to stream to.

private async void SourceSelected(Windows.Media.PlayTo.PlayToManager sender, 
                            Windows.Media.PlayTo.PlayToSourceSelectedEventArgs e)
{
    await dispatcher.RunAsync(Windows.UI.Core.CoreDispatcherPriority.Normal,
        () =>
        {
            DisconnectButton.Click += DisconnectButtonClick;
            MessageBlock.Text = "Streaming to " + e.FriendlyName + "...";
            DeviceBlock.Text = e.FriendlyName + ".\nClick here to disconnect.";
            var imageBitmap = new Windows.UI.Xaml.Media.Imaging.BitmapImage();
            imageBitmap.SetSource(e.Icon);
            IconImage.Source = imageBitmap;
        });
}

private void DisconnectButtonClick(object sender, RoutedEventArgs e)
{
    Windows.Media.PlayTo.PlayToManager.ShowPlayToUI();
}


6. Crie um destino para Reproduzir em (opcional)

Para executar o aplicativo, você precisará de um dispositivo para o qual Reproduzir em possa transmitir mídia. Caso você não possua um dispositivo certificado Reproduzir em, é possível usar o Windows Media Player como dispositivo de destino. Para usar o Windows Media Player como dispositivo de destino, é necessário que o seu computador esteja conectado a uma rede privada. O Windows Media Player precisa estar em execução em um computador diferente do aplicativo de origem de Reproduzir em.

  1. Inicie o Windows Media Player.
  2. Expanda o menu Transmissão e habilite a opção Permitir controle remoto do meu Player. Deixe o Windows Media Player aberto; é necessário que ele esteja em execução para que fique disponível como o destino de Reproduzir em.
  3. Abra o painel de controle Dispositivos e Impressoras. Clique em Adicionar dispositivos e impressoras. No assistente Adicionar dispositivos e impressoras, na janela Escolha um dispositivo ou impressora para adicionar a este PC, localize o Renderizador de mídia digital para o seu PC. Esse é o Windows Media Player para o seu PC. Selecione o item e clique em Avançar. Quando o assistente for concluído, você verá a sua instância do Windows Media Player na lista de Dispositivos Multimídia.

7. Executar o aplicativo

  • No Visual Studio, pressione F5 (depurar) para executar o aplicativo. Você pode selecionar qualquer botão de mídia para reproduzir ou visualizar o primeiro item de mídia em bibliotecas de mídia diferentes. Enquanto uma mídia estiver em reprodução, abra o botão Dispositivos e selecione o destino de Reproduzir em para fazer o streaming da mídia para o dispositivo de destino.

Resumo

Neste guia de início rápido, você adicionou o recurso Reproduzir em a um aplicativo que exibe imagens como uma exibição de slides em um dispositivo de destino. O recurso Reproduzir em permite que os usuários transmitam o conteúdo do aplicativo para um receptor Reproduzir em de sua rede.

Tópicos relacionados

Transmitindo mídia para dispositivos usando Reproduzir em
Exemplos
exemplo do botão Reproduzir em
exemplo de PlayToReceiver
exemplo de Servidor de Mídia

 

 

Mostrar:
© 2014 Microsoft