Mini tutoriel : Comment utiliser sa webcam en caméra de surveillance

Bonjour les gens !

Il existe une multitude de façons pour utiliser sa webcam en caméra de surveillance, d’en ce mini tutoriel, je vais vous montrer une des solutions les plus simples.

Pourquoi cette solution et pas une autre ? Celle-ci est compatible avec tout, vous pourrez par exemple à partir de n’importe quel mobile voir votre « chez vous ».

Vous pourrez par la suite vous même faire les réglages nécessaires pour diffuser en direct, utiliser la détection de mouvement …

Article également disponible sur www.smallblogue.fr

MAC OSX :

Ce qu’il vous faut :

– Un hébergement (par exemple gratuit chez IFrance)

– Une adresse mail (par exemple gratuit chez Hotmail)

– Le logiciel Evocam (disponible ici)

 

1 ) Allez dans l’onglet « Server » :

– Dans le menu déroulant « Configure » choisissez « FTP Server »

– Dans « Location » indiquez le chemin de votre ftp, par exemple ftp://ftp.votresite/votredossier/lenomdelimage.jpg (ftp://ftp.smallblogue.com/Webcam/Capture.jpg)

– Rentrez ensuite les identifiants de connexion de votre compte FTP.

2 ) Allez dans l’onglet « Refresh » :

– Cochez « Every » et indiquez par exemple 5 (temps de rafraichissement), cela ne sert à rien de mettre moins, car l’image n’aura même pas le temps d’apparaître…

– Cochez « Upload image to server »

Voilà pour les paramétrages, simple non ?

3) Création du fichier affichant l’image :

Ouvrer TextEdit et rentrez ces lignes :
( Attention c’est vraiment un fichier de base, l’article n’est pas sur comment faire du css/html propre…)

<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="5">
<META HTTP-EQUIV="expires" CONTENT="0">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
 <TITLE>EvoCam Example Page</TITLE>
</HEAD>
 <BODY>
<CENTER>
<IMG SRC="webcam.jpg" /> <BR />
<SMALL> Surveillance de ma salle </SMALL>
</CENTER>
 </BODY>
 </HTML>

L’image ici s’appelle « webcam.jpg » elle doit porter le même nom que celle que vous avez mis dans « Location » plus haut, celle-ci est rafraichie toutes les 5 secondes (même valeur que dans EvoCam).

Enregistrez ce fichier en « MaWebCam.html » et transférez le au même endroit que vous avez mis dans « Location » plus haut. Dans mon exemple, moi je dois le mettre ici:  ftp://ftp.smallblogue.com/Webcam/

Dons dans mon dossier Webcam, j’ai deux fichiers : MaWebCam.html et webcam.jpg (qui va être mis par EvoCam)

Voilà, il ne vous reste plus qu’à décocher « Work Offline » dans le menu « File »  (Décoché par défaut) et de cliquer sur le bouton « now » pour envoyer la première photo…

Rendez-vous ensuite avec votre navigateur internet à l’adresse de votre page html, par exemple pour moi ici : http://www.smallblogue.com/Webcam/MaWebCam.html, et comme par magie, je vois bien ce qu’il se passe chez moi…

Comme c’est juste une image transférée à intervalle régulier, que nous n’utilisons pas de flash ou autre chose, vous pouvez très bien voir à partir de vos Idevices ce qu’il se passe chez vous !

4) Plus, plus …

Vous pouvez également choisir de recevoir les photos sur votre adresse mail, pour cela dans l’onglet « Server » :

– Dans le menu déroulant « Configure » choisissez « Email Server »

– Dans « Server » indiquez le serveur de votre messagerie (par exemple mail.noos.fr)

– Rentrez ensuite les identifiants de connexion de votre compte Email si nécessaire en cliquant sur le bouton « Advanced… »

– Complétez les différents champs (expéditeur, destinataire, sujet)

Pensez à augmenter l’intervalle, car sinon votre boite va vite être saturée !

Vous pouvez également diffuser en vidéo :

pour cela dans l’onglet « Server » :

– Dans le menu déroulant « Configure » choisissez « Built-in Web

Server »

– Cliquez sur le bouton « Advanced », une autre fenêtre s’ouvre

– Cochez « Require username and password to vie wdbcam » et rentrez un mot de passe/login si vous voulez protéger l’accès à la visualisation de votre webcam.

Dans le deuxième onglet

– Cochez « Play sound when webcam is accessed » et choisissez un fichier audio, comme cela un avertissement sonore vous avertira dès que quelqu’un visualisera votre webcam

Dans le troisième onglet

– Choisissez « Java Applet »

– Et enfin valider en cliquant sur le bouton OK

Dans la fenêtre principale, cochez « Enable built-in web server »

En cliquant sur « View in Browser », votre navigateur par défaut va s’ouvrir et afficher votre webcam, vous pouvez la visualiser de n’importe où (Java doit être supporté) avec l’url donnée par EvoCam dans « Address » (du style http://190.154.10.20:8080/webcam.html)

N’oubliez pas d’activer le mode nuit :

 

 

Voilà, comme vous pouvez le constater, c’est assez simple à mettre en oeuvre. Je n’ai fait que de survoler toutes les options de EvoCam, et je vous laisse le soin d’optimiser ces réglages.

Il existe plein d’autres logiciels comme EvoCam, des mieux, des moins bons, mais je me suis aperçu que je me servais essentiellement que de lui, d’où mon choix pour ce mini tutoriel.

Si vous avez des questions, n’hésitez pas !

 

Windows :

Ce qu’il vous faut :

– Un hébergement (par exemple gratuit chez IFrance)

– Une adresse mail (par exemple gratuit chez Hotmail)

– Le logiciel Yawcam (disponible ici)

 

Dans un premier temps faites « Paramètres » –> « Détecter la webcam » si votre webcam n’est pas affichée…

1 ) Diffusion via FTP :

Voici les 2 fenêtres principales de YawCam :

Dans un premier temps, alles dans le menu « Paramètres » –> « Editer les paramètres » :

Ceci permet d’afficher la fenêtre qui vous permettra de régler différents paramètrages. Allez dans la partie FTP et rentrez vos identifiants de connexion :

1,2,3 ->  Vos identifiants

Dans 4 et 5 rentrez les infos suivant le chemin sur votre FTP, par exemple:  ftp://ftp.votresite/votredossier/lenomdelimage.jpg (ftp://ftp.smallblogue.com/HTML/webcam.jpg)

Vous pouvez également lancer l’Assistant en appuyant sur le bouton « Assistants images multiples », pour la capture d’images en série.

Choisissez le taux de rafraîchissement, 5 secondes est un bon compromis.

 

2) Création du fichier affichant l’image :

Ouvrer TextEdit et rentrez ces lignes :
( Attention c’est vraiment un fichier de base, l’article n’est pas sur comment faire du css/html propre… Euh je me répète là…)

<HTML>
<HEAD>
<META HTTP-EQUIV="refresh" CONTENT="5">
<META HTTP-EQUIV="expires" CONTENT="0">
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
 <TITLE>YawCam Example Page</TITLE>
</HEAD>
 <BODY>
<CENTER>
<IMG SRC="webcam.jpg" /> <BR />
<SMALL> Surveillance de ma cuisine </SMALL>
</CENTER>
 </BODY>
 </HTML>

L’image ici s’appelle « webcam.jpg » elle doit porter le même nom que celle que vous avez mis dans « Nom du fichier » plus haut, celle-ci est rafraichie toutes les 5 secondes (même valeur que dans YawCam).

Enregistrez ce fichier en « MaWebCam.html » et transférez le au même endroit que vous avez mis dans « Dossier » plus haut. Dans mon exemple, moi je dois le mettre ici:  ftp://ftp.smallblogue.com/HTML/

Dons dans mon dossier HTML, j’ai deux fichiers : MaWebCam.html et webcam.jpg (qui va être mis par YawCam)

 

Voilà, il ne vous reste plus qu’à cliquer sur le bouton « Activer » pour que les captures commencent :

Rendez-vous ensuite avec votre navigateur internet à l’adresse de votre page html, par exemple pour moi ici : http://www.smallblogue.com/HTML/MaWebCam.html, et comme par magie, je vois bien ce qu’il se passe chez moi…

Comme c’est juste une image transférée à intervalle régulier, que nous n’utilisons pas de flash ou autre chose, vous pouvez très bien voir à partir de vos Idevices ce qu’il se passe chez vous !

 

1 ) Diffusion via HTTP :

C’est encore plus simple car vous n’avez pas besoin de compte FTP.

Dans un premier temps, récupérer l’adresse de diffusion dans les paramètres HTTP :

Il vous suffit de rentrer cette URL dans votre navigateur pour visualiser votre webcam, c’est tout…

Une autre indication en dessous vous donne le chemin du fichier « update.html », que vous pouvez modifier pour le personnaliser.

Exemple de fichier update.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv=Refresh content="5">
</head>
<body>
<div align="center">
<p><font size="2" face="Verdana, Arial, Helvetica, sans-serif">
(Rafraichit toutes les 5 secondes)</font></p>
<p><img border="0" src="out.jpg"></p>
<p><font face="Verdana, Arial, Helvetica, sans-serif">Ma webcam</font></p>
</div>
</body>
</html>

En rentrant l’URL on a bien notre webcam en visu :

 

3) Plus, plus …

Avec YawCam, vous pouvez diffuser en streaming, pour cela c’est encore aussi très simple, il vous suffit juste de l’activer, et de faire appelle à l’applet java qui se trouve ici :

Le code que vous devez insérer dans vos pages est :

<APPLET CODE="YawApplet.class" ARCHIVE="YawApplet.jar"
WIDTH="@WIDTH" HEIGHT="@HEIGHT">
<param name="Host" value="@HOST">
<param name="Port" value="@PORT">
<param name="Zoom" value="true">
</APPLET>

Par exemple

<APPLET CODE="YawApplet.class" ARCHIVE="YawApplet.jar"
WIDTH="640" HEIGHT="480">
<param name="Host" value="172.16.195.129">
<param name="Port" value="8081">
<param name="Zoom" value="true">
</APPLET>

Vous pouvez facilement apporter quelques réglages esthétiques et visualiser le résultat en appuyant sur le bouton « Concepteur de pages… »

Comme la plupart des logiciels YawCam vous propose la détection de mouvement et pleins d’autres options que je vous laisse le soin de découvrir par vous même (Définir des plages horaires, afficher des messages, accès par mot de passe à votre stream…)

YawCam est un excellent logiciel et gratuit en plus, avec une fonction d’envoie par mail, il serait parfait !

 

N’hésitez pas à me contacter en cas de difficulté !

 

14 commentaires
  1. c est quoi textedite je ne le trouve jai windows 7 et j’aimerai pouvoir regarder la cam de mon pc sur mon ipad merci

    • C’est l’éditeur de texte par défaut sur OSX, « l’équivalent » en quelque sorte du Notepad sur Windows.
      En gros tu peux faire la même manip avec n’importe quel éditeur de texte (Wordpad, Word, Writer …)

      @+

      • Bonjour José,

        Pour modifier la page Web en streaming avec Yawcam, vous avez marqué qu’il faut insérer votre code dans les pages. Lesquelles ? D’autre part, je ne vois pas ce qu’il faut faire avec le fichier YawApplet.jar. Ce dernier est un fichier Java archivé. Pouvez me donner plus d’explications afin que je puisse modifier la page web en streaming ?

        merci beaucoup pour ces explications.

        Séb

        • Bonsoir

          En fait vous devez modifier votre page html (dans l’exemple : MaWebCam.html)

          Il faut que vous placiez ce code dans votre page tel quel sans code en plus.

  2. Bonjour, merci pour cet excellent tutorial
    Je n’arrive pas à faire marcher le server FTP : j’ai le message d’erreur suivant :
    Ftp: Could not upload file! FTP Error: 500 REST not understood
    Je me demande si le logiciel est compatible du FTP fourni par FREE car cela marche avec d’autre logiciel
    Merci d’avance pour vos suggestions
    Cordialement

  3. Effectivement cela indique que Free (FTP) ne supporte pas la commande REST.

    Voyez avec eux pour qu’ils changent cela, essayez également de changer le mode « actif »/ »Passif » dans votre client FTP

    @+

  4. Et erreur durant la détection de l’ip ça veut dire quoi?

    • J’ai transféré votre message à José, il reviendra vers vous, merci pour votre patience!

  5. Salut José !

    Merci pour cet excellent tuto. Cependant crois tu qu’il y ai moyen de parler en Mp ( pour plus de simplicité et surtout pour ne pas envahir l’espace commentaire avec mes questions)

    je n’arrive pas a comprendre certain ( sur la version Mac )

    merci

    will

  6. Bonjour,
    je n’arrive pas à avoir les images du tutoriel (ni avec IE, ni avec Firefox :-) )
    J’ai réussi à configurer l’envoi de photos sur mon espace utilisateur chez free, la photos est récupérable sans problème.
    Est-il possible de stocker toutes les photos sur une période donnée ?
    Je ne comprends pas la configuration du streaming. J’ai inséré le code dans le fichier mawebcam.html, mais je ne trouve pas de fichier vidéo, et je ne sais pas comment lire le streaming ?
    Merci

    • Bonsoir,

      Je transmets à José (l’auteur de l’article) et vous tiens au courant.

      Bonne continuation.

Laisser une réponse