Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Diffuser de la vidéo en streaming avec Adobe Flash Media Server

Compatible ActionScript 2. Cliquer pour en savoir plus sur les compatibilités.Compatible Flash 8. Cliquer pour en savoir plus sur les compatibilités.

Vous pouvez commander un serveur de streaming sur Streamedia!

Dans cette étape, nous allons mettre au point une application qui vous permettra de diffuser une vidéo dans une animation Adobe Flash. Comment ? Grâce à Flash Media Server. Ce serveur, destiné à la communication de données telles que l’audio ou la vidéo nous sera fort utile. Son principal atout est qu’il fonctionne avec Adobe Flash: Vous pourrez donc présenter votre projet dans un format SWF, consultable par la quasi majorité des internautes !

Notez que Flash Media Server peut être utilisé à d’autre fins que la diffusion vidéo sur Internet : création de jeux multi joueurs en ligne, module de visioconférence, tout type d’application qui nécessiterai un échange de données en temps réel.

Notre principal but ici, sera de concevoir une application Flash dans laquelle nous intégrerons de la vidéo, outrepassant les limites techniques habituelles du média sur Internet.

On commence !

Notez ici qu'on utilise la version “Développeur” gratuite de Flash Media Server 2. L'arborescence est strictement la même dans un compte Flash Media loué chez Mediabox ou un autre prestataire.

Une fois le répertoire « applications » ouvert, créez un nouveau répertoire « monApplicationVideo » pour votre nouvelle application vidéo. Vous pouvez constater qu’il existe déjà beaucoup de répertoires aux cotés du notre. Ce sont les exemples fournis par Adobe avec le serveur. Ces exemples sont très intéressants à la consultation et vous pouvez acquérir de très bonnes bases en les examinant.

Dans le répertoire que nous venons de créer, créez un nouveau répertoire nommé « streams ». Dans le répertoire « streams », créez un répertoire nommé « _definst_ » en prenant soin de respecter la casse de chaque caractère. La création de votre compte est maintenant finie ! Dès lors que nous aurons fini de concevoir la vidéo à diffuser, nous pourrons la copier dans ce répertoire.

Intéressons-nous maintenant à la vidéo que nous désirons diffuser dans notre animation Flash. Flash Media Server accepte pour l’instant un seul format de vidéo : le format FLV. Il faut donc vous équiper d’un logiciel libre d’utilisation appelé « Riva FLV Encoder » pour convertir votre vidéo au bon format. Connectez-vous pour cela à http://www.rivavx.com/index.php?encoder&L=3

Une fois le fichier téléchargé et installé, ouvrez « Riva FLV Encoder ». La partie « Input » vous sert à indiquer le chemin d’accès de votre vidéo d’origine. Définissez le chemin de votre vidéo convertie et son nom dans la partie « Output ». Par défaut, votre vidéo sera placée sur votre bureau.

A l’aide de l’onglet « Video », nous pouvons définir la résolution de notre vidéo FLV. Si votre vidéo ne contient pas de piste audio, n’hésitez pas à désélectionner la case « Enable Audio ». Votre fichier en sera d’autant plus réduit. Notez que l’onglet « Encoder Settings » vous permet d’avoir des configurations prédéfinies pour l’encodage de vos vidéos.

Une fois que vous avez configuré Riva FLV Encoder, vous pouvez alors encoder votre vidéo dans un format FLV en cliquant sur « Encode ». Cette opération prend parfois un peu de temps et provoque parfois des ralentissements sur certaines machines. Un peu de patience et votre vidéo sera prête pour la diffusion sur Internet !

Une fois votre vidéo convertie, vous pouvez alors la copier dans le dossier de votre compte Flash Media Server. Ré ouvrez donc « _definst_ » créé précédemment et copiez-y la vidéo. Vous avez la possibilité de placer plusieurs fichiers FLV dans ce répertoire : Vous pourrez ainsi jongler entre différentes vidéos.

Nous passons maintenant à la conception de votre animation Adobe Flash. Démarrer pour cela votre logiciel préféré et ouvrez le fichier fourni sur le CD-ROM « pageflip_debut.fla ». Il s’agit d'un fichier Flash OpenSource développée par http://www.iparigrafika.hu qui met en scène un livre interactif ou le lecteur tourne lui-même les pages à l’aide de sa souris.

Vous pouvez dors et déjà tester l’animation pour voir comment la source fonctionne. Afin de modifier l’aspect des pages et d’y insérer nos flux vidéo, ouvrez la bibliothèque (Control+L) et ouvrez le dossier «PageElements». Ce dossier contient toutes les pages du livre et vous permet de les éditer une à une. Double-cliquez sur « page3 ».

Afin d’inclure votre vidéo dans cette page du livre, il nous faut créer un objet vidéo. Cet objet nous permettra de diffuser le flux vidéo puisé sur le serveur Flash Communication. Cliquez sur le bouton supérieur droit du panneau «Bibliothèque» et choisissez «Nouvelle vidéo». Ceci aura pour effet de créer un nouvel élément dans la bibliothèque.

Une fois cet objet vidéo crée, il vous faudra en déplacer une occurrence sur la scène. Placez l’occurrence à un endroit opportun de votre page pour que cette vidéo soit visible. La déformation de l’objet vidéo est possible mais est une opération relativement complexe. Cela aura le plus souvent pour effet de détériorer sa qualité visuelle.

Nous allons ensuite placer un bouton pour déclancher la lecture du document vidéo lorsque l’utilisateur cliquera dessus avec sa souris. N’oubliez pas de nommer votre bouton à l’aide du panneau propriété afin que vous puissiez y faire référence plus tard dans le code Actionscript. Dans notre exemple, le bouton est nommé «bntPlay».

Passons au code Actionscript. Afin de diffuser un flux vidéo stocké sur un serveur, il vous faut créer une connexion. nc = new NetConnection(); sert à créer un objet NetConnection afin de se connecter à un serveur FCS et nc.connect(); connecte l’application au serveur installé précédemment. Utilisez ici la chaîne de connexion «rtmp:localhost/monApplicationVideo». Notez que localhost est utilisé si vous utilisez la version gratuite de FLash Media Server sur votre propre machine. Si vous utilisez un hébergement de streaming en production, il vous faudra renseigner le host de votre serveur. Ex. rtmp:fc999.streamedia.info/monApplicationVideo.

new NetStream(); crée un flux pour pouvoir y diffuser votre vidéo. Afin d’attacher l’objet vidéo que nous avons crée plus haut à ce flux, utilisez la commande «attachVideo». Enfin, la commande play() vous permettra de déclancher sa lecture en précisant le nom du fichier copié sur le serveur.

Votre application est maintenant finie ! Vous pouvez tester l’animation. Libre à vous ensuite d’agrémenter votre création d’effets de masque divers. En effet, vous pouvez très bien « masquer » le calque où est situé la vidéo et dessiner un masque fantaisiste sur le calque «masque» qui personnalisera les contours de votre vidéo !

Téléchargez la source FLA de l'article

Et la source d'une vidéo FLV