a

 
Nous vous rappelons que tous les documents qui suivent sont sous copyright. Il est strictement interdit de copier ou de reproduire, même partiellement, tout contenu situé ci-après. Art. L 111 et suivants du code de la Propriété Intellectuelle.

Votre webcam en streaming :

Comment installer votre webcam sur votre site et comment la faire fonctionner :
Quelle est la proportion de sites personnels comportant une page ou une simple fenêtre affichant une webcam ? Et d'après vous, combien y a-t'il de sites perso à travers le monde ? Et pourtant, il se vend plusieurs centaines de milliers de webcams à travers le Monde chaque jour, dont beaucoup d'acquéreurs possèdent un site internet, mais très peu réussissent à y faire fonctionner correctement une webcam pour pouvoir ainsi montrer à leurs visiteurs leur travail, leur environnement, leur jardin, leur chien, leur chat, leur python, leur lieu de travail, leurs enfants, leur famille, leurs poissons ou leur perroquet, leur femme, ou plus simplement leur trombine, etc...
Si vous désirez réellement installer une webcam sur votre site, ou créer un site pour diffuser une webcam, mais que vous ne savez pas comment vous y prendre, vous aller trouver ci-dessous tous les conseils pour réussir à le faire.

Ne vous laissez pas impressionner par la longueur des explications, nous les avons
Live Stream
voulues le plus détaillées possible, afin de ne rien laisser au hasard et permettre ainsi à toute personne qui ne l'a jamais fait ou qui n'est pas totalement familiarisée avec le langage html d'arriver à réaliser son but.

Ce n'est pas trop difficile, et nous avons essayé de le rendre encore plus facile pour vous.
Pour faire fonctionner votre webcam en streaming, vous allez devoir passer par 4 étapes :
1 - Déterminer quelle est votre adresse IP locale (LAN)
2 - Ouvrir un port sur votre routeur (Livebox, Freebox, etc...),
3 - Votre IP change régulièrement, nous allons donner à votre webcam une adresse fixe (NO IP),
4 - Utilisation de WebcamXP pour faire fonctionner votre webcam en mode serveur.

  

1/ Déterminer votre IP LAN (IP de votre ordinateur) :
A moins que vous ne soyez déjà un utlisateur averti et que vous sachiez facilement comment trouver l'IP LAN de votre ordinateur sans risquer de planter quelque-chose sur votre machine, nous vous invitons à télécharger un petit soft très utile qui vous permettra en même temps de connaître votre adresse IP de connexion.
Allez directement sur le site du développeur et téléchargez le zip en cliquant ici.
Une fois le soft dézippé, faites le s'installer. Une icone apparaitra sur votre bureau et vous ouvrira une boite en cliquant dessus. Cliquez alors sur "Trouver mon adresse IP" et vous connaîtrez ainsi votre IP LAN. Généralement, celle-ci est par défaut 192.168.1.10, mais elle peut varier en fonction du nombre d'ordinateurs reliés à votre routeur ; chaque PC ayant alors sa propre IP LAN (192.168.1.10, 192.168.1.11, 192.168.1.12, etc...)

Dans le cas qui nous concerne ici, nous avons 192.168.1.10, retenez-le, nous allons en avoir besoin maintenant.




2 / Ouverture d'un port de votre routeur pour autoriser la lecture de votre webcam :
Contrairement aux anciens procédés des pages webcam, où il fallait envoyer une image régulièrement actualisée par un protocole ftp à une adresse sur votre site web, avec tous les défauts et les inconvénients que l'on connait de ce système de fonctionnement, nous allons fonctionner ici à la manière du streaming, c'est à dire que ce sont les usagers qui viendront lire les images de votre webcam directement sur votre ordinateur. Votre ordinateur va donc fonctionner comme un serveur. C'est ce qui permet d'avoir un flux régulier, rapide (jusqu'à plusieurs images par secondes), et sans images noires ou à moitié chargées.
Rassurez-vous, c'est sans danger, puisque comme tout le monde, vous êtes équipé d'un anti-virus et d'un pare-feu. Et puis, nous sommes des millions à fonctionner de cette manière, s'il y avait un risque accru, ça se saurait.

Il va falloir donc ouvrir une porte sur votre routeur ou box pour pouvoir lire votre webcam.

Connectez-vous au panneau d'administration de votre routeur à l'aide de votre navigateur web habituel en tapant l'adresse http://192.168.1.1 dans la barre d'adresse et validez. Les login et mot de passe sont par défaut tous les deux "admin" à moins que vous ne les ayez changés auparavant.
Cherchez un lien intitulé "Serveurs LAN" et cliquez dessus. (Notre exemple est celui d'une Livebox Orange, mais en principe tous les routeurs fonctionnent de la même manière, seule la présentation peut changer).
Vous allez arriver sur une interface qui se présente de cette manière.

Nous allons créer une nouvelle entrée. Cliquez sur le logo situé dans la colonne "Action" pour créer cette nouvelle entrée, et remplissez
les champs comme indiqué ci-dessous. (souvenez-vous, 192.168.1.10)

Une fois ces champs remplis, cliquez sur OK.

Le port 8080 est le port généralement utilisé pour ce genre d'application.

A présent, fermez le panneau d'administration de votre box ou routeur, nous sommes presque prêts.




3/ NO IP. Donner une adresse fixe à votre webcam :
A moins que vous ne soyez reliés à un serveur ayant une IP fixe, si vous êtes abonné à Internet comme la plupart d'entre-nous, votre IP change régulièrement. A chaque connexion (si vous débranchez votre box et la remettez en service), vous serez connecté avec une autre IP. De même, lorsque vous êtes connecté en permanence, cette IP peut changer 1 à plusieurs fois dans un cycle de 24 heures, idem, si vous avez une coupure intempestive, ou êtes relié à un service de télé-surveillance qui coupe votre connexion internet pendant la phase de test nocturne de votre système d'alarme. Autant de raisons pour que votre adresse IP de connexion change.

Le problème, c'est que pour que votre webcam soit visible depuis votre page web, il faut qu'elle ait une adresse sous cette forme :

document.images.webcam1.src = "http://votre adresse ip:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;
(ne vous tracassez pas de savoir comment vous allez créer cette ligne, c'est le logiciel WebcamXP qui vous créera automatiquement le code source pour votre webcam, dans lequel cette ligne ou une partie de cette ligne figuera à 3 endroits différents, mais nous vous indiquerons ce qu'il faudra modifier).

Puisque votre adresse ip change souvent, vous l'avez compris, vous seriez obligé de modifier le code source de votre page web à chaque fois que votre ip change, encore faudrait-il que vous soyez averti le plus rapidement possible que votre ip vient de changer, pour que vos visiteurs puissent continuer à regarder ce que vous leur donnez comme spectacle. Vous pouvez toujours afficher votre numéro de téléphone à côté de votre webcam pour qu'ils vous réveillent en pleine nuit dès que ça coupe, mais, vous serez d'accord avec nous si nous vous disons que cette solution n'est pas la meilleure.

Il y a plusieurs manières d'obtenir une ip fixe, la première, c'est en demandant à votre fournisseur d'accès à Internet, la seconde c'est en bricolant les paramétrages de votre box, ce n'est pas très compliqué mais nous déconseillons fortement à toutes personnes inexpérimentées de toucher aux paramétrages de la box, alors qu'un troisième moyen beaucoup plus simple et sans risques existe.

Pour cela, nous utilisons NO-IP depuis plus de 2 ans, et nous en sommes tout à fait satisfaits, et c'est gratuit pour une utilisation non commerciale. Nous vous invitons à vous connecter sur le site en question en cliquant ici, pour le découvrir.
Pour pouvoir bénéficier de ce service, il va vous falloir créer un compte en cliquant sur "créate account", et remplir correctement les champs requis.
Une fois inscrit, loggez-vous sur le site en entrant votre adresse e-mail et votre mot de passe, puis cliquez sur le logo "Add a Host", et remplissez les champs comme ci-dessous :

ATTENTION : Dans la case Hostname, nous avons mis webcamperso c'est pour notre exemple, mettez autre-chose, sinon ça ne fonctionnera pas. Mettez-par exemple le nom de votre site ou les quelques premières lettres de votre site si le nom est trop long.
Laissez no-ip.biz, ou choisissez autre-chose, cela n'a pas d'importance.
Host Type, sélectionnez DNS Host(A).
L'adresse IP indiquée est la votre à cet instant, ne la touchez pas, ainsi que la case Assign to Group.
Ne touchez plus à rien sur cette page, et validez tout ça cliquant en bas de la page, sur le bouton "create host".

Et vous allez arriver sur votre page d'administration de votre host.

En passant, vous pouvez constater que nous sommes des habitués de ce système. La version gratuite de no-ip donne droit à 5 adresses, intéressant si vous possédez plusieurs sites sur chacun desquels vous voulez afficher une webcam différente.

Vous allez donc retrouver ici, votre host qui va vous servir à acheminer les visiteurs sur votre serveur de webcam, par l'intermédiaire du port 8080 que nous avons ouvert précédemment sur le routeur, pour pouvoir lire votre webcam.


Vous l'avez compris, la ligne de code que nous avions précédemment sous cette forme
document.images.webcam1.src = "http://votre adresse ip:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;

va devenir :
document.images.webcam1.src = "http://votrenomdehost.no-ip.biz:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;

en l'occurence pour notre cas :
document.images.webcam1.src = "http://webcamperso.no-ip.biz:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;



Ainsi, chaque fois que votre adresse ip va changer, le serveur de no-ip prendra en compte ce changement et corrigera immédiatement l'acheminement vers votre serveur de webcam. Nous avons crée un tunnel universel par l'intermédiaire de no-ip. Un peu comme si n'importe quelle route que vous empruntiez vous menait à toujours Rome et uniquement qu'à Rome, et que toute nouvelle route qui se créérait pendant votre parcourt irait elle aussi à Rome.

A présent, sur le site no-ip, cliquez sur "Download client" à gauche de l'écran, puis cliquez sur le logo correspondant à votre système, téléchargez l'application, et installez-la de la même manière que vous installez vos autres softs.
Ce petit soft va permettre vous de vous identifier au service pour l'acheminement. Il vous faudra vous en servir à chaque fois que vous voudrez mettre votre webcam en service.

Cliquez sur l'icone qui s'est placée sur votre bureau pour démarrer l'application,

Puis rentrez vos identifiants (les mêmes que pour le site de No-IP : adresse mail + mot de passe). Cochez pour les mémoriser, il n'y a pas de risques.

Vous allez alors être connecté au site No-Ip et vous verrez l'état de votre connection s'afficher dans la fenêtre.

Si vous ne voyez rien sur votre écran, regardez en bas à droite, dans la barre, à côté de l'horloge, une petite icone ressemblant à celle-ci doit y être. Faites un clic droit dessus et cliquez sur Show pour afficher la fenêtre du programme.
Notez qu'en cliquant sur la petite croix rouge en haut à droite de la fenêtre, aura pour action de placer la fenêtre en tâche de fond, mais n'arrêtera pas le programme pour autant. Si vous voulez stopper le programme complètement, faites un clic droit sur la petite icone de la barre des tâches et cliquez sur Exit.


A présent, tout est prêt pour l'étape finale, l'installation de l'interface de gestion et de connection de votre webcam.

Si vous voulez faire une pose, c'est peut-être le moment.





4/ Utilisation de WEBCAMXP :
C'est le logiciel que vous allez utiliser pour faire fonctionner votre webcam. Pourquoi celui-ci ? Parce-qu'il fonctionne très bien, il est un des plus faciles à configurer et à faire fonctionner, nous l'utilisons depuis pas mal de temps et nous saurons mieux vous l'expliquer qu'un autre soft que nous ne connaissons pas.
Nous vous rappelons qu'il fonctionne aussi sous Vista.

Avant toutes choses, nous vous invitons à le télécharger directement sur le site officiel du distributeur en cliquant ici.
Une fois le logiciel téléchargé, installez-le sur votre machine comme vous avez l'habitude d'installer les autres logiciels.

Lorsque celui-ci est installé, double-cliquez sur l'icone qui a du se placer sur votre bureau et démarrez l'application.


Ne vous inquiétez pas, nous allons vous expliquer comment il fonctionne. En plus, la dernière version a été simplifiée et allégée au maximum. Passez votre souris sur l'image ci-dessous pour avoir les premières explications.


Nous vous faisons remarquer en passant, pour confirmer ce que nous vous indiquions plus haut, que le temps nécessaire à l'élaboration de ce document, notre adresse IP a changé, alors que nous ne nous sommes pas déconnectés d'Internet. (voir en bas du tableau à droite http://81.250.121.87:8080)

Nous allons mettre en marche la diffusion de notre webcam.
Pour cela, comme indiqué ci-dessous, allez sur la vignette de votre source N° 1, faites clic-droit, positionnez-vous sur PCI/USB (pilote WDM) et vous devez voir une fenêtre indiquant la liste des sources disponibles et sur laquelle doit apparaître le nom de votre webcam. Peut-être, n'y aura t'il que celle-ci, c'est normal si vous ne disposez que de cette source sur votre ordinateur.
Cliquez alors sur celle-ci et à ce moment là, en cliquant une fois sur la vignette de la source, l'image de votre webcam doit apparaitre dans la fenêtre de visualisation. (voir figure suivante).



Avant de commencer, nous vous invitons à enregistrer les deux images ci-dessous à la racine de votre site internet.
Faites un clic droit sur chacune des images, faites enregistrer l'image sous... en conservant leur nom d'origine, et placez ces images à la racine de votre site en utilisant votre éditeur FTP habituel.


Création de votre page web pour afficher votre webcam :
A présent, nous allons commencer à faire notre page webcam.
Avec votre éditeur de pages web habituel, créez une nouvelle page que vous nommerez comme vous le voudrez, sur laquelle vous allez faire afficher votre webcam, ou modifiez une page existante en réservant un espace de 320 pixels de large sur 240 de haut.
Nous avons l'habitude de faire afficher nos webcams dans une fenêtre. Cette méthode est pratique, car elle a le mérite de faciliter le travail de mise en page de notre page web.

Cette étape n'est pas obligatoire, elle ne sert qu'à agrémenter la présentation. Si vous ne voulez pas faire afficher votre webcam dans un cadre, sautez cette étape et rendez-vous directement à l'Assistant générateur de code html.

L'image de la webcam fait 320 x 240 pixels. Nous avons voulu qu'elle s'affiche dans un cadre avec une bordure de 5 pixels d'épaissseur, nous avons donc créé un cadre de 330 x 250 pixels, afin que l'espace réservé à l'affichage de l'image conserve ses dimensions de 320 x 240 pixels.

Une fois que vous avez fait ceci, allez sur l'interface de WebcamXP et cliquez sur "outils", puis sur "Générer le code HTML".

 

Dans l'assistant générateur de code HTML, sélectionnez l'Adresse IP correspondant à l'IP de votre ordinateur, dans notre cas c'est 192.168.1.10.

Type de code à générer, restez sur Flux vidéo.

Type de flux vidéo, gardez Javascript (nous ne sommes pas arrivés à faire fonctionner sous un autre type de flux).

Source vidéo, choisisser 1 si vous installez votre première webcam.

Cliquez ensuite sur Next.

Vous voici à présent devant le code html que vous allez devoir coller sur votre page pour faire afficher votre webcam.

Sélectionnez bien l'ensemble du code, copiez-le dans votre presse-papier et allez le coller à l'endroit voulu sur votre page web. (Pour nous, dans notre cadre)

ATTENTION, collez ce code en utilisant le mode "code source" de votre éditeur de pages, sinon vous colleriez un texte dans votre cadre qui ne fonctionnerait pas.


Voilà, nous venons de coller le code dans le code source de notre page, voilà ce que nous devons obtenir.

A ce stade, en faisant une prévisualisation dans un navigateur web, vous devez voir apparaitre dans cette fenêtre, l'image de votre webcam.
(Si Internet Explorer vous demande quelque-chose, vous devez autoriser le contenu bloqué)

Si à cette étape vous avez bien l'image de votre webcam qui s'affiche, passez à l'étape suivante, sinon, c'est que vous avez loupé quelque-chose avant, nous vous recommandons donc de bien relire et appliquer ce qui est indiqué depuis le début.

Live Stream



A cette étape, nous allons mettre en place notre webcam sur votre site web, pour que celle-ci soit visible par vos visiteurs.
Mais avant, il va falloir faire une petite modification dans le code.
Actuellement, votre webcam est visible uniquement en local, c'est à dire, uniquemenent depuis votre ordinateur, car l'adresse de visualisation est document.images.webcam1.src = "http://192.168.1.10:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;

Or 192.168.1.10 ne peut pas fonctionner pour quelqu'un qui visualise votre site depuis un autre ordinateur que le votre. Nous allons donc remplacer cette adresse par l'adresse fournie par No-IP, rappelez-vous, l'adresse que nous avons obtenue pour notre site : webcamperso.no-ip.biz. Vous allez donc modifier aux endroits voulus le code html de votre webcam pour la rendre visible par vos visiteurs.

<img src="http://www.adressedevotresite.com/loading.jpg" alt="Live Stream" name="webcam1" width="320" height="240" class="webcam" id="webcam1" onmousedown="PTZMouseDown1(event)" />
<script type="text/javascript">
<!--
currentCamera1= 1;
errorimg1= 0;
document.images.webcam1.onload = DoIt1;
document.images.webcam1.onerror = ErrorImage1;
function LoadImage1()
{
uniq1 = Math.random();
document.images.webcam1.src = "http://192.168.1.10:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;
document.images.webcam1.onload = DoIt1;
}
function PTZMouseDown1(e)
{
var IE = document.all?true:false;
var x,y;
var myx,myy;
var myifr = document.getElementById("_iframe-ptz");
tp = getElPos1();
myx = tp[0];
myy = tp[1];
if(IE){
var scrollX = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft;
var scrollY = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
x = event.clientX - myx + scrollX;
y = event.clientY - myy + scrollY;
} else {
x = e.pageX - myx;
y = e.pageY - myy;
}
if (width_array[currentCamera1] > 0) x = Math.round((x * 400) / width_array[currentCamera1]);
if (height_array[currentCamera1] > 0) y = Math.round((y * 300) / height_array[currentCamera1]);
if (x > 400) x = 400;
if (y > 300) y = 300;
if (myifr != null) myifr.src = "http://192.168.1.10:8080/ptz?src=" + currentCamera1 + "&moveto_x=" + x + "&moveto_y=" + y +"";
return true;
}
function getElPos1()
{
el = document.images.webcam1;
x = el.offsetLeft;
y = el.offsetTop;
elp = el.offsetParent;
while(elp!=null)
{ x+=elp.offsetLeft;
y+=elp.offsetTop;
elp=elp.offsetParent;
}
return new Array(x,y);
}
function ErrorImage1()
{
errorimg1++;
if (errorimg1>3){
document.images.webcam1.onload = "";
document.images.webcam1.onerror = "";
document.images.webcam1.src = "offline.jpg";
}else{
uniq1 = Math.random();
document.images.webcam1.src = "http://192.168.1.10:8080/cam_" + currentCamera1 + ".jpg?uniq="+uniq1;
}
}
function DoIt1()
{
errorimg1=0;
window.setTimeout("LoadImage1();", 40);
}
//-->
</script>

La première ligne, sert à appeler l'image qui va s'afficher lorsqu'un visiteur va arriver sur la page de votre webcam, pendant les quelques secondes nécessaires à la connection sur votre serveur.
Indiquez ici simplement l'adresse de votre image "loading.jpg". Si celle-ci se trouve dans un sous-dossier, indiquez le chemin complet. (Par ex : http://www.votresite.com/images/loading.jpg)


Ensuite, vous allez continuer à modifier le code html de votre webcam, et rechercher les endroits où figure l'adresse 192.168.1.10
et la remplacer par
votrenomdehost.no-ip.biz

 

Dans notre cas :

webcamperso.no-ip.biz

Il y a 3 endroits où vous devez faire cette modification, nous les avons signalés en rouge.

Lorsque vous avez modifié le code source de votre webcam, vous pouvez la mettre en ligne à l'aide de votre client FTP habituel.

ATTENTION : A partir de cet instant, vous ne pourrez plus visualiser l'image de votre webcam sur votre page web depuis votre ordinateur. En effet, très peu de routeurs permettent la visualisation d'un serveur depuis lui-même. La seule visualisation se fera depuis la fenêtre de visualisation de WebcamXP. Depuis votre pc, la page de votre webcam affichera l'image d'une webcam offline, alors que celle-ci fonctionnera normalement sur les ordinateurs de vos visiteurs.

Lors de votre premier essai, nous vous conseillons de vous faire aider d'un ami qui pourra vous dire à distance si votre webcam s'affiche correctement sur votre site. Si vous ne connaissez personne pour le faire, mettez votre webcam en marche, tournée de préférence vers un objet animé (fenêtre donnant sur un décor animé, arbres ventés, télévision en marche, etc...), et rendez-vous dans un cyber-café pour contrôler que votre webcam fonctionne correctement sur votre site internet.
Une fois que vous aurez contrôlé que tout fonctionne normalement, vous saurez que votre webcam affiche bien l'image dès que celle-ci sera connectée, par le simple fait de voir des utilisateurs connectés depuis l'onglet "diffusion" sur WebcamXP.

A l'aide de l'onglet "Diffusion" de WebcamXP, vous pourrez visualiser les utilisateurs en ligne sur votre page de webcam.
Cette interface vous indique aussi le nombre d'images par seconde que visualisent les utilisateurs, le nombre d'images qu'ils ont vu défiler depuis le début de leur connection, ainsi que le poids téléchargé.


Sur cette page, on peut constater que tout fonctionne normalement. En effet, si la webcam ne fonctionnait pas normalement les colonnes IPS, Images, et KOctets seraient restées à zéro. Et puis le fait que des utilisateurs restent connectés plusieurs heures sur la webcam, prouve que le contenu diffusé procure un intérêt. (C'est bon signe )
Avec l'habitude, tout cela vous paraîtra beaucoup plus logique dans quelques jours.
Les visiteurs s'affichent en bas de la liste au fur et à mesure de leur arrivée.

Nous vous rappelons que pour mettre votre webcam en service, vous devez activer No-IP et démarrer WebcamXP.
L'idéal étant de placer les icones de commande de ces 2 softs l'un à côté de l'autre sur votre bureau.

Nous attirons l'attention aux utilisateurs, que dans certains pays comme pour la France, le simple fait de pointer une webcam dans une rue, nécessite obligatoirement une autorisation préfectorale, ainsi que la déclaration du site diffusant la webcam auprès de la CNIL.

De même, si vous avez l'intention de diffuser un contenu réservé aux adultes par l'intermédiaire de votre webcam, pensez que vous avez obligation de mettre un avertissement sur votre site, dont l'accès à la page de votre webcam ne sera possible qu'après validation de cet avertissement par l'internaute, ainsi que l'étiquetage de votre site auprès de l'ICRA .
Voir les conseils indiqués sur cette page.

Si vous avez un site internet et que vous êtes intéressé pour y ajouter une webcam, n'hésitez pas à consulter les quelques conseils que nous donnons en vous rendant ici.
 
©2009 artetpassion.net