Démarrage rapide : diffusion d’un diaporama à l’aide de la fonctionnalité Lire sur (HTML)
[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]
Vous pouvez utiliser la fonctionnalité Lire sur pour permettre aux utilisateurs de diffuser facilement du contenu audio, des vidéos ou des images depuis leur ordinateur vers les périphériques de leur réseau domestique. Cette rubrique explique comment utiliser la fonctionnalité Lire sur dans une application du Windows Store pour permettre aux utilisateurs de diffuser des images sous forme de diaporama vers un périphérique cible.
Objectif: Utilisez la fonctionnalité Lire sur pour diffuser des images sous forme de diaporama vers un périphérique cible.
Prérequis
Microsoft Visual Studio
Instructions
1. Créer un projet et autoriser l’accès à Images
- Ouvrez Visual Studio et sélectionnez Nouveau projet dans le menu Fichier. Dans la section JavaScript, sélectionnez Application vide. Nommez l’application PlayToSlideShow et cliquez sur OK.
- Ouvrez le fichier Package.appxmanifest, puis sélectionnez l’onglet Capacités. Sélectionnez la fonctionnalité Bibliothèque d’images pour permettre à votre application d’accéder au dossier Images d’un ordinateur. Fermez et enregistrez le fichier manifeste.
2. Ajouter une interface utilisateur HTML
Ouvrez le fichier Default.html et ajoutez le code HTLML suivant à la section <body>. L’interface utilisateur contient une balise <div> qui permet d’afficher les images et une autre employée pour afficher les messages d’état. Elle contient aussi une balise <div> qui indique à l’utilisateur comment lancer la diffusion à l’aide de la fonctionnalité Lire sur, ainsi qu’un bouton permettant à l’utilisateur de se déconnecter au cours de la diffusion. Ces deux éléments sont masqués et sont visibles que le diaporama diffuse ou non.
<div id="slideshowDiv" style="height:600px;display:table-cell;vertical-align:bottom;"></div>
<div id="messageDiv">Slideshow disconnected</div>
<button id="disconnectButton" style="width:600px;height:60px;display: none">
Connected to <img id="iconImage" style="width: 30px;" /> <span id="deviceSpan" />
</button>
<div id="instructionsDiv">Swipe from the right edge of the screen, select "Devices", and select a device to stream the slide show to.</div>
3. Ajouter du code d’initialisation
Le code de cette étape permet de lancer le diaporama et crée le gestionnaire pour l’événement associé au clic sur le bouton de déconnexion. Le code propose aussi une fonction de raccourci (id) pour accéder facilement à la fonction getElementById.
Ouvrez le dossier js. Ouvrez le fichier Default.js et ajoutez le code suivant à la place de la fonction onactivated par défaut.
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
startSlideShow();
args.setPromise(WinJS.UI.processAll());
}
};
// Disconnect button event handler.
function disconnectButtonClick() {
Windows.Media.PlayTo.PlayToManager.showPlayToUI();
}
// Shortcut function.
function id(tagName) {
return document.getElementById(tagName);
}
4. Ajouter du code pour obtenir et afficher les images sous forme de diaporama
Cet exemple affiche les images sous forme de diaporama en utilisant les images placées dans le dossier racine de Images. Pour cela, la liste d’images est d’abord récupérée à partir du dossier Images, puis des objets <image> sont créés pour parcourir la liste.
Lorsque vous diffusez les images à l’aide de la fonctionnalité Lire sur, le code de cette application de diaporama profite de la possibilité de mettre l’élément multimédia suivant en mémoire tampon à l’aide de la fonctionnalité Lire sur. Cette option est facultative mais utile dans des scénarios où il faut plus de temps pour obtenir l’élément multimédia suivant à diffuser. En mettant le média en mémoire tampon, vous pouvez le diffuser de suite après la fin de lecture de l’élément multimédia actif, ce qui évite toute attente entre les éléments multimédias.
Pour mettre en mémoire tampon l’élément multimédia suivant, vous devez définir la source de lecture de cet élément par rapport à la propriété next de l’élément actif. Lorsque la lecture de l’élément actuel se termine, vous devez appeler la méthode playNext de cet élément pour diffuser la source multimédia suivante sur le périphérique cible.
Lorsque la lecture du diaporama est uniquement locale, le code utilise un délai d’expiration pour passer à l’image suivante de la liste. Lorsque le diaporama est diffusé sur un récepteur Lire sur, le code exploite toujours un délai d’expiration pour passer à l’image suivante mais répond aussi lorsque le récepteur Lire sur interrompt le diaporama, passe à l’image suivante avant que le délai d’expiration ne soit écoulé ou est déconnecté. Pour y parvenir, il utilise l’événement statechanged de la source Lire sur référencée par la propriété msPlayToSource d’un objet image. Dans l’événement statechanged, le code examine les propriétés currentState et previousState des arguments transmis à l’événement. Les différents états, tout comme le nombre chargé d’identifier l’index de l’image qui a déclenché l’événement statechanged, expliquent comment répondre comme le montre le tableau qui suit.
| currentState | Action à entreprendre |
|---|---|
| disconnected | Si l’index de l’image qui a déclenché l’événement est le même que celui de l’image actuellement affichée, cela signifie que la source Lire sur a été déconnectée pendant qu’une image s’affichait. Cela signifie aussi que le récepteur Lire sur n’est plus connecté et que le diaporama peut démarrer localement à l’aide de l’index d’image le plus récent. Sinon, un état disconnected indique simplement que le diaporama a fini d’afficher l’image qui a déclenché l’événement et que l’objet image qui n’est plus nécessaire peut être supprimé. |
| connected | Si l’état précédent est disconnected, cela signifie que l’image qui a déclenché l’événement vient d‘être connectée au récepteur Lire sur. À cette étape, nous nous procurons l’image suivante pour pouvoir la charger pendant que l’image actuelle est affichée. Si l’état précédent est rendering, cela signifie que l’utilisateur a interrompu le diaporama sur le récepteur Lire sur et qu’il est possible de supprimer le délai d’expiration actuel jusqu’à ce que l’utilisateur redémarre le diaporama. |
| rendering | Si l’état précédent est connected, cela signifie que le récepteur Lire sur a repris le diaporama et que la présentation peut recommencer. |
Dans le fichier Default.js, ajoutez le code suivant après le code de l’étape précédente.
var states = Windows.Media.PlayTo.PlayToConnectionState, // alias for PlayToConnectionState
imageList, // contains the list of images to show
streaming = false, // true when streaming using Play To; otherwise false
cancel = 0, // used to cancel a timeout
timeLapse = 5, // time between images (5 seconds)
imageSize = "600px", // size of current displayed image
thumbnailSize = "200px", // size of "thumbnail" of next image
currentImage = 0; // index of the current image from imageList
// Get the list of images from the Pictures folder and start the slide show.
function startSlideShow() {
Windows.Storage.KnownFolders.picturesLibrary.getFilesAsync().then(
function (resultsLibrary) {
imageList = resultsLibrary;
if (imageList.length > 0) {
var image = queueImage(0, true);
} else {
id("messageDiv").innerHTML = "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.
function playNextImage(num) {
id("slideshowDiv").removeChild(id("image" + num));
queueImage(num + 2, false);
currentImage = num + 1;
id("image" + currentImage).style.width = imageSize;
cancel = setTimeout(function () {
playNextImage(num + 1);
}, timeLapse * 1000);
}
// queueImage
// Called to create an image object for the displayed images.
function queueImage(num, isFirstImage) {
// Create the image element for the specified image index and add to the
// slide show div.
var image = document.createElement("img");
image.style.width = (isFirstImage ? imageSize : thumbnailSize);
image.id = "image" + num;
image.src = URL.createObjectURL(imageList[num % imageList.length], { oneTimeOnly: true });
id("slideshowDiv").appendChild(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) {
queueImage(num + 1, false);
cancel = setTimeout(function () {
playNextImage(num);
}, timeLapse * 1000);
}
// 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.msPlayToSource.connection.addEventListener("transferred", function () {
currentImage = num + 1;
id("image" + currentImage).style.width = imageSize;
}, false);
// Use the statechanged event to determine which action to take or to respond
// if the Play To Receiver is disconnected.
image.msPlayToSource.connection.addEventListener("statechanged", function (e) {
switch (e.currentState) {
case states.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) {
id("messageDiv").innerHTML = "Slideshow disconnected";
// Cancel any existing timeout
if (cancel) {
clearTimeout(cancel);
}
// Clear all image objects from the slide show div
while (id("slideshowDiv").firstChild) {
id("slideshowDiv").removeChild(id("slideshowDiv").firstChild);
}
// Reset the slide show objects and values to their beginning state
streaming = false;
id("disconnectButton").style.display = "none";
id("instructionsDiv").style.display = "block";
disconnectButton.removeEventListener("click", disconnectButtonClick, false);
// Restart the slide show from the current image index
queueImage(currentImage, true);
} else {
image.msPlayToSource.next = null;
image.removeAttribute("src");
if (streaming) {
id("slideshowDiv").removeChild(image);
}
}
break;
case states.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.
if (e.previousState === states.disconnected) {
var imageNext = queueImage(num + 1, false);
image.msPlayToSource.next = imageNext.msPlayToSource;
} else if (e.previousState === states.rendering) {
if (cancel) {
clearTimeout(cancel);
cancel = 0;
}
}
if (currentImage == num) {
id("messageDiv").innerHTML = "Slideshow connected";
}
break;
case states.rendering:
// If the state is rendering and the previous state is
// connected, then the Play To Receiver has restarted
// the slide show.
if (e.previousState === states.connected) {
// Clear any existing timeout.
if (cancel) {
clearTimeout(cancel);
}
// Restart the slide show.
cancel = setTimeout(function () {
image.msPlayToSource.playNext();
}, timeLapse * 1000);
}
if (currentImage == num) {
id("messageDiv").innerHTML = "Slideshow rendering";
}
break;
}
}, false);
return image;
}
5. Ajouter du code Lire sur
Dans cette étape, le code implémente le contrat Lire sur. Il obtient une référence à PlayToManager pour l’application active et associe le gestionnaire d’événements pour les événements sourcerequested et sourceselected.
Du fait que les objets image sont créés et détruits pour chaque image du diaporama, nous utilisons un objet image temporaire qui n’est jamais détruit dans l’événement sourcerequested. Ceci parce que nous ignorons si le délai d’expiration s’écoulera avant que l’utilisateur ne sélectionne un récepteur Lire sur. Si cela se produisait, l’image actuelle serait détruite et il nous faudrait transmettre une référence Null au code Lire sur. À la place, nous transmettons au code Lire sur une référence à un objet image qui n’est jamais détruit et mettons à jour la source de l’image conformément à l’image actuellement affichée dès que l’utilisateur sélectionne un récepteur Lire sur. Nous savons que cela est fait lorsque l’état de l’image change et devient connected.
Dans le fichier Default.js, ajoutez le code suivant après le code de l’étape précédente.
// 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.
var initialImage = null;
var ptm = Windows.Media.PlayTo.PlayToManager.getForCurrentView();
ptm.addEventListener("sourcerequested", function (e) {
initialImage = document.createElement("img");
// 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.msPlayToSource.connection.addEventListener("statechanged", function (e) {
if (e.currentState === states.connected) {
// Clear any existing timeout.
if (cancel) {
clearTimeout(cancel);
cancel = 0;
}
// Clear the slide show div.
while (id("slideshowDiv").firstChild) {
id("slideshowDiv").removeChild(id("slideshowDiv").firstChild);
}
// Set the slide show objects and values to show that we are streaming.
streaming = true;
id("disconnectButton").style.display = "block";
id("instructionsDiv").style.display = "none";
// Queue and display the next image.
var image = queueImage(currentImage, true);
initialImage.msPlayToSource.next = image.msPlayToSource;
initialImage.msPlayToSource.playNext();
}
}, false);
// Provide Play To with the first image to stream.
e.sourceRequest.setSource(initialImage.msPlayToSource);
}, false);
// Update the once the user has selected a device to stream to.
ptm.addEventListener("sourceselected", function (e) {
disconnectButton.addEventListener("click", disconnectButtonClick, false);
id("messageDiv").innerHTML = "Streaming to " + e.friendlyName + "...";
id("deviceSpan").innerHTML = e.friendlyName + ".<br/>Click here to disconnect.";
id("iconImage").src = URL.createObjectURL(e.icon, { oneTimeOnly: true });
}, false);
6. Créer une cible Lire sur (facultatif)
Pour exécuter l’application, vous avez besoin d’un périphérique cible capable de diffuser le contenu multimédia via la fonctionnalité Lire sur. Si vous ne disposez pas d’un récepteur Lire sur certifié, vous pouvez utiliser le Lecteur Windows Media comme périphérique cible. Pour utiliser le Lecteur Windows Media comme périphérique cible, votre ordinateur doit être connecté à un réseau privé. Le Lecteur Windows Media doit être exécuté sur un autre ordinateur que celui de votre application Lire sur source.
- Démarrez le Lecteur Windows Media.
- Développez le menu Diffuser en continu et activez l’option Autoriser le contrôle à distance de mon Lecteur.... Laissez le Lecteur Windows Media ouvert, car il doit être en cours d’exécution pour être disponible en tant que cible Lire sur.
- Ouvrez le Panneau de configuration Périphériques et imprimantes. Cliquez sur Ajouter des périphériques et des imprimantes. Dans l’Assistant Ajouter des périphériques et des imprimantes, dans la fenêtre Choisir un périphérique ou une imprimante à ajouter à cet ordinateur, repérez le Périphérique multimédia de rendu numérique de votre PC. Il s’agit du Lecteur Windows Media de votre ordinateur. Sélectionnez-le et cliquez sur Suivant. À la fin de l’Assistant, l’instance du Lecteur Windows Media figure dans la liste Périphériques multimédias.
7. Exécuter l’application
- Dans Visual Studio, appuyez sur la touche F5 (débogage) pour exécuter l’application. Vous pouvez sélectionner n’importe quel bouton pour lire ou afficher le premier élément multimédia des différentes bibliothèques multimédias. Pendant la lecture du média, ouvrez l’icône Périphériques et sélectionnez la cible Lire sur pour diffuser le contenu multimédia sur le périphérique cible.
Récapitulatif
Dans ce guide de démarrage rapide, vous avez ajouté la fonctionnalité Lire sur à une application qui affiche des images sous forme de diaporama sur un périphérique cible. La fonctionnalité Lire sur permet aux utilisateurs de diffuser du contenu de l’application vers un récepteur Lire sur certifié sur leur réseau.
Rubriques associées
Diffusion multimédia en continu sur des périphériques à l’aide de la fonctionnalité Lire sur
Exemples