«

»

jan 13 2013

Imprimer ceci Article

Intégrer un module VLC (RTSP) dans une page web

EDIT : par ici la liste des chaines avec le flux RTSP correspondant

Après avoir bien galéré pour trouver comment intégrer un bloc VLC dans un bout de page web me suis dit que ça pourrais servir à quelqu’un …

Le but était de créer un système de « publicité » qui passe sur des écrans dans un restaurant, et d’avoir un encart qui diffusait une chaîne de TV dans cette page histoire que les télévisions servent à regarder la télévision (en même temps c’est le but) mais aussi à faire passer le message publicitaire.

Le procédé fonctionne sous Firefox, pas testé sur d’autres navigateurs, à voir.

La page est assez sommaire et demande quelques améliorations mais c’est un début.

Le code est fait pour être utilisé derrière une Freebox ayant l’option TV (il fonctionne avec les V5 et les V6) mais après on peux aussi lire n’importe quelle vidéo ou flux.

Les télévisions sont utilisées en écran secondaire pour un PC et ont une résolution réglée sur 1024*768.

La méthode (qui reste grandement améliorable) :

– Un coup de Gimp pour créer une image à la taille voulue comportant les éléments que le client voulait promouvoir ainsi qu’un carré blanc de 640 par 480 qui délimite l’endroit où sera affiché le carré de télévision.

trame vidéo VLC page web

 

– Un fichier HTML pour créer la page : testvid (source inspirée de nombreuses recherches Google mixées entre elles, si quelqu’un retrouve d’où le code vient merci de me mettre une url en commentaire que je la rajoute ici même).

Dans ce fichier on met en fond de page (tramevid.png) l’image crée précédemment, on ajoute le bloc VLC en le calant à l’aide de Margin par dessus le carré blanc.

La ligne codebase correspond à l’adresse à laquelle télécharger la dernière version du plugin VLC qui va bien pour le navigateur (pas à jour dans le fichier, aller sur http://downloads.videolan.org/pub/videolan/vlc/last/).

On règle ensuite la taille de la fenêtre VLC (même taille que le carré blanc crée précédemment sous Gimp).

Pour la récupération du flux vidéo c’est à la ligne « Target », le 192.168.1.254 est l’adresse IP de la freebox derrière laquelle l’ordinateur est placé.

Pour choisir la chaîne à afficher c’est le champ « service », ça ne correspond pas au numéro de chaîne, pour connaitre le numéro à donner vous lancez VLC sur un PC, affichage de la liste de lecture, internet\Freebox TV, vous trouvez la chaîne puis clic droit dessus et « information », tout en bas de la fenêtre qui s’affiche vous aurez le numéro à indiquer.

Liste de lecture Freebox depuis VLC

Liste de lecture Freebox dans VLC

VLC emplacement de la chaine

VLC emplacement de la chaîne pour récupérer le numéro à insérer dans le code

– Une fois que vous avez adapté le fichier HTML à votre installation et à la chaîne que vous souhaitez afficher vous placez ce fichier et le fichier image dans le même dossier, vous ouvrez dans le navigateur et ça tourne.

 

Ce procédé a été fait à la va vite mais ça fonctionne donc si ça peux dépanner tant mieux, après il serait pas mal d’ajouter les contrôles pour changer de chaîne (ici c’est carrément dans le code qu’elle est paramétrée, pas le top) et surtout de mettre les infos à afficher autrement qu’en faisant un montage boiteux sous Gimp, tout bête à faire faut juste prendre le temps…

 

Edit : Un petit zip dispo ici avec le fichier html, le fichier image ainsi que sa source en xcf (gimp) pour tout télécharger d’un coup…


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/dvienfkk/www/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273