Pour suivre cette troisième leçon, vous devez avoir de bonnes notions de delphi, avoir installé DSPack et connaître les concepts évoqués dans les deux leçons précédentes. Si nécessaire, retournez à la leçon1 sur GraphEdit, ou à la leçon 2 sur DSPack. Notre projet s'appuie sur le projet commencé à la leçon2 que nous améliorons ici.

1. Un écran intégré au projet et une visualisation en plein écran

Réouvrez donc le projet commencé à la leçon2, ou téléchargez ma version du projet pour delphi 7. Le premier point que nous souhaitons améliorer est l'écran de visualisation. Si on laisse faire directshow on obtient un écran Actimovie qui marche bien, mais qui fait un peu désordre en apparaissant en-dehors des forms du projet. Classiquement nous voulons voir la vidéo dans une fenêtre de notre application, ou alors en plein écran.

Pour cela, on place simplement un composant VideoWindow (le 2ème composant dans l'onglet DsPack) sur la form de notre projet et on définit sa propriété fitergraph comme égale à FilterGraph1. De façon générale, définir la propriété filtergraph d'un filtre revient à placer le filtre dans le graphe indiqué. Ici il faut bien comprendre que VideoWindow est un filtre, celui qui donne une sortie dans une fenêtre sur l'écran. A ce stade, il n'y a besoin d'aucune ligne de code pour voir un beau résultat. Compilez et cliquez sur play. Votre projet devrait afficher quelque chose comme cela:

Encore une fois, l'intelligence inhérente à Directshow a fait tout le travail. Il suffit de placer un filtre dans le graphe, pour que directshow comprenne que c'est lui qui doit être utilisé en priorité. Notez que vous pouvez donner à VideoWindow1 la dimension que vous voulez. La vidéo sera déformée pour remplir la fenêtre. Du coup, je vous conseille évidemment de garder une proportion de 4x3 si vous partez d'une vidéo de ce format d'image. Dans mon projet j'ai pris 240x180. Cette caractéristique est d'ailleurs précieuse si vous voulez lire un mpeg2 issu d'un SVCD qui est au départ au format 480x576, et que votre programme remet automatiquement aux bonnes proportions. En revanche, si votre vidéo doit être visualisée dans un format autre, par exemple 16x9, cela vous créera des déformations si vous n'adaptez pas les dimensions de VideoWindow1 en lui mettant les bonnes propriétés width et height.

Vous avez sûrement remarqué que VideoWindow présente une propriété Fullscreen. En la mettant à True nous avons maintenant une visualisation en plein écran. Essayez, mais vous verrez que le retour peut être difficile. Vous taperez Alt-F4 puis encore Stop pour cela. Compilez donc le programme avec la propriété Fullscreen de VideoWindow1 à True, puis cliquez sur Play et vous pouvez admirer votre film.

Nous allons implémenter cela dans le programme en plaçant un bouton Plein Ecran qui lance la visualisation en plein écran. Mais d'abord remettez la propriété Fullscreen à False pour pouvoir accéder à votre application au démarrage. Pour ne pas rester bloqués en plein écran, nous allons utiliser un menu popup, qui par un clic droit sur l'écran permet non seulement de basculer entre le mode fenêtre et le mode plein écran, mais aussi de reporter dans le menu contextuel les autres fonctions déjà implémentées; play, pause, stop et quitter qui resteront ainsi accessibles. Voici le code de cette partie, qui suppose que vous avez créé le menu popup et les items de menu play1, pause1, stop1, quitter1 et pleinecran1 sur votre Form1 et que la propriété popup de VideoWindow1 ait été affectée au menu en question.

procedure TForm1.PleinEcranBtnClick(Sender: TObject);

begin

videowindow1.FullScreen:=true;

pleinEcran1.Checked:=videoWindow1.fullscreen;

end;

Lorsqu'on clique sur le bouton PleinEcran alors on met la propriété Fullscreen à True, et on met une coche dans l'item de menu correspondant.

procedure TForm1.Play1Click(Sender: TObject);

begin

playBtnClick(sender);

end;

Voyez comme on reporte simplement la méthode du bouton Play, en notant au passage qu'on a renommé ce bouton playBtn.

procedure TForm1.Pause1Click(Sender: TObject);

begin

PauseBtnClick(Sender);

end;

Idem pour Pause

procedure TForm1.Stop1Click(Sender: TObject);

begin

StopBtnClick(Sender);

end;

Idem pour Stop

procedure TForm1.PleinEcran1Click(Sender: TObject);

begin

videoWindow1.FullScreen:=not videowindow1.FullScreen;

pleinEcran1.Checked:=videoWindow1.fullscreen;

end;

L'item de menu PleinEcran1 donne une bascule entre le mode fenêtre et le mode Plein Ecran, bascule qui concerne aussi la coche dans le menu.

procedure TForm1.Quitter1Click(Sender: TObject);

begin

quitterBtnClick(Sender);

end;

On reproduit aussi la fonction Quitter, dont il faut se rappeler qu'elle appellera l'évènement Onclosequery qui permet de fermer proprement le filtergraph.

2) Implanter une trackbar

Pour faire défiler votre vidéo, un outil très performant de DSPack s'impose: la trackbar. Il suffit de placer un composant DSTrackbar (l'avant dernier de l'onglet) sur votre Form, de donner à sa propriété filtergraph le nom du graphe qu'elle doit piloter, ici FilterGraph1, de lui donner la taille et la longueur souhaitée, et déjà on peut profiter de toutes ses facilités pour faire défiler la vidéo.

3) Ouvrir un nouveau fichier vidéo

L'une des améliorations qu'il reste à apporter à notre Lecteur Multimédia, c'est de pouvoir changer le fichier vidéo que nous souhaitons visualiser. La méthode la plus simple est de transformer notre constante Fichier en une variable, et d'ajouter un bouton qui appelle une boîte de dialogue d'ouverture d'un fichier pour fixer sa valeur. Là aussi ce devrait être maintenant facile à faire si vous avez des notions de delphi. Voici la partie de code source correspondante:

Dans la partie interface:

var

  Fichier:string;

On crée une variable "string" pour recevoir le nom du fichier à la place de la constante prévue jusqu'ici.

Dans la partie implementation, dans l'évènement Onclick du nouveau bouton qu'on a appelé OuvrirBtn:

procedure TForm1.OuvrirBtnClick(Sender: TObject);

begin

// Attention: prévoir une gestion des erreurs

if opendialog1.execute then begin

stopBtnclick(sender);

fichier:=opendialog1.filename;

playBtnClick(sender);

pauseBtnClick(sender);

end;//if opendialog1

end;

On lance la boîte de dialogue. Si la méthode execute retourne avec True, c'est-à-dire qu'on a bien chargé un fichier, alors on arrête le graphe, on modifie la variable Fichier et on rejoue le graphe avec le nouveau fichier, mais en le mettant tout de suite sur Pause de manière à ce que l'utilisateur puisse décider du moment où la vidéo doit démarrer. Le commentaire rappelle qu'il faudra mettre une gestion d'erreurs pour sécuriser cette partie, par exemple au cas où l'utilisateur ouvrirait un fichier qui n'est pas lisible. Il faudra d'ailleurs aussi sécuriser la fonction Play, qui risque maintenant d'être appelée alors qu'aucun fichier correct n'a été chargé. Ici encore, appeler les méthodes déjà créées pour les boutons réduit le travail, mais apporte aussi de la cohérence, pour le jour où on veut changer quelque chose, en l'occurrence ici mettre une gestion d'erreurs.

Vous noterez que ma boîte de dialogue a été paramétrée en mode design pour qu'elle n'ouvre que les fichiers avi, mpeg ou wmv, les mêmes que ceux que j'ai utilisés dans mon freeware ImageGrab , ce qui est déjà pas mal. Si vous voulez aussi en faire un lecteur audio, ce n'est pas très difficile, rajoutez les extensions wav, mp3, mid. Dans ce cas vous mettrez sans doute la propriété visible de VideoWindow1 à False, mais aussi la propriété filtergraph de VideoWindow1 à rien, de manière à sortir VideoWindow1 du graphe, lorsque l'extension concerne un fichier audio seul. Essayez de faire cette amélioration par vous-même.

4) Utiliser GraphEdit pour vérifier comment fonctionne l'application

Dans la leçon1, je vous avais dit que GraphEdit servirait pour déboguer nos projets. Voyons comment cela marche ici. La première étape est de mettre la propriété GraphEdit de notre filtergraph à True. C'est cette propriété qui permettra à GraphEdit de communiquer avec votre application pour voir ce qui s'y joue. Recompilez ensuite et lancez votre application.

Ensuite il faut lancer GraphEdit. Quand vous avez devant les yeux sa fenêtre vide, tapez CTRL-G et GraphEdit vous signalera la liste des filtergraphs actifs dans votre système, du moins ceux auxquels il peut accéder. Dans certains cas vous pourrez en trouver plusieurs, et il faudra tâtonner pour savoir lequel vous intéresse. Si GraphEdit se plante et se referme, n'hésitez pas à recommencer la manip, toutes ces bestioles s'avèrent parfois capricieuses...

Si à ce stade vous aviez simplement lancé votre application, sans cliquer sur Play, aucun filtergraph n'apparaît. C'est normal, car dans notre projet, tant que l'on n'a pas cliqué sur play, le filtergraph n'est pas été activé. Ouvrez donc un fichier multimedia, cliquez sur play puis sur pause, de manière à avoir le filtergraph actif. Un nouveau CTRL-G (ou un Refresh ) fait alors apparaître une boîte de dialogue de ce genre:

Une fois sélectionné le graphe qui vous intéresse, ce qui est facile quand il y en a un seul, vous avez devant les yeux le graphe de votre projet:

Il ressemble beaucoup à celui de la leçon1, mais avec la grande différence que le flux vidéo n'aboutit plus dans le video renderer par défaut, mais dans la videowindow1 que vous avez créée dans le projet.

Avant de quitter votre projet, ou même de taper Stop, ce qui aurait pour effet de rendre votre graphe inactif et donc de planter GraphEdit, il faut taper CTRL-H sur la fenêtre de GraphEdit pour mettre fin à la liaison qui s'était établie entre GraphEdit et notre filtergraph. Essayez maintenant  de refaire tout cela avec différents type de fichiers avi, avec des mpg ou des wmv.

5) Conclusion

Au terme de cette leçon, vous avez découvert le composant TVideoWindow ainsi que le composant TDSTrackbar de DSPack. Pour le premier vous avez réussi à le placer dans un graphe, à le redimensionner et à activer sa propriété Fullscreen. Pour le second, vous avez appris à en maîtriser l'emploi. Vous avez pu combiner ces premiers éléments pour faire un Lecteur Multimedia tout à fait honorable, et vous avez vu comment contrôler le filtergraph de votre application delphi grâce à la connexion avec GraphEdit.

Ici on peut élécharger le code source de cette leçon (dans une version delphi 7).

Leçon 2    Leçon 4  

retour vers le haut de la page