Diffuser des images webcam sur son site internet

Bonjour,
je présente un mini-howto (traduction et résumé d’un document plus complet cité en bas de page) qui va permettre de diffuser les images provenant de la webcam sur votre site internet.
Prérequis :

  • un serveur web
  • une webcam reconnue et fonctionnelle

[size=117]1/ Installation logiciel : webcam[/size] : apt-get install webcam

[size=117]2/ Configuration logicielle : webcam[/size] :

Et copier coller ceci dedans :

[quote][ftp]
host = localhost
user = nobody
pass = xxxxxx
dir = /DocumentRoot/repertoirewebcam
file = webcam.jpg
tmp = imageup.jpg
local = 1

[grab]
device = Votre périphérique (ex: /dev/video0)
width = 352
height = 288
delay = 0
input = Votre input (ex : SC314-2)
norm = pal
quality = 100[/quote]
Ce qu’il faut modifier :
user et pass ne seront pas pris en compte, (cf. lien vers la fin pour plus d’explication)
delay c’est le delai de raffraichissement, une valeur 1 signifie une image/seconde
width et height sont modifiables dans une certaine mesure, selon ce tableau :

[quote]160x120
176x144
320x240
352x288
640x480[/quote]et sans doute les capacités de votre webcam …
input, si vous ne vous souvenez plus, amsn, dans préférences - paramètres webcam - modifier les paramètres, vous donne sa valeur, par exemple.
norm: en europe, c’est pal je crois.

[size=117]3/ Création de la page webcam.html[/size] :

Copier coller ceci : [quote]

My Web Cam

[/quote] [color=darkblue][size=117]4/ Lancement du processus : [b]webcam[/b][/size][/color] : [code]webcam /etc/webcam.conf &[/code]

[size=117]5/ S’admirer mais pas trop[/size] : Oui, un délai de 0, le seul interessant, pompe le cpu.

Ceci est un résumé de ce que j’ai lu ici : http://www.aboutdebian.com/webcam.htm

Pour aller plus loin, on sera interessé par ceci (malgré les pubs) :

  • Standard template
  • Standard Plus template
  • Advanced template
  • JavaScript template
    sur la page : http://developers.webcamworld.com/templates.html
    Pour ce qui est de la 5 ième solution, l’applet java, de loin la plus séduisante, bien entendu, elle ne marche pas, le code utilisé faisant des appels à des méthodes obsolètes de la classe Thread.
    (J’ai fais une correction pour qui veut faire par applet).

[size=117]6/ Conclusion :[/size] :
C’est amusant, c’est sympa, mais ça mange beaucoup de ressource (car comme on a envie de voir l’image perçue par le visiteur, le cpu alimente votre navigateur qui lui raffraichit l’image en continu, en même temps qu’il sert l’image au visiteur), alors si quelqu’un voulait apporter à la suite de cette astuce l’équivalent en utilisant la version webcam-server qui semble faite exprés pour ça (évidemment ça fait un serveur de plus qui tourne), ça serait trés bien venu.

Petite page HTML qui affiche une image Jpeg avec un raffraichissement toutes les 10 secondes (cela se règle dans var x=…). Ça complète ce qui précède.

<html>
<head>
<title>Webcam</title>
<script LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
    var x = 11
    var y = 1
    function startClock()
    { x = x-y
    document.forms[0].clock.value = x
    timerID = setTimeout("startClock()", 1000)
    }
  // -->
</SCRIPT>
</head>

<body bgcolor="#000000" text="#FFFFFF" link=red vlink="#c0c0c0" ONLOAD="startClock()">
<form action="#FFFFFF">
<center>
<img SRC="webcam.jpeg" width="80%" alt="Chargement...">
<br>
<kbd>
<strong>Mise à jour dans <input type=text name="clock" size=2 value=""> secondes.</strong>
</kbd>
<br><br>
</center>
</form>

</body>
</html>

2 scripts personnels que j’avais fait pour une élève qui étudiait le déplacement du soleil (calcul exact du midi). Je les propose au cas où…
Script qui prend une image régulièrement (durée donnée en paramètre), qui tague l’image avec la date et qui envoit via FTP l’image sur une serveur (nom donné en 2ième paramètre) si le fichier .www existe. .ftp contient les paramètres nécessaires pour la session ftp:

#!/bin/sh DELAI=$1 SERVEURFTP=$2 for I in `seq 100000 $[$2+100000]` { cd ~/Camera vgrabbj -i vga -o jpeg -f temp.jpg > /dev/null 2> /dev/null convert -rotate 90 temp.jpg temp2.jpg date '+Pris le %H:%M:%S le %A %d %B %Y' > /tmp/grep; -pointsize 20 -draw 'text 10,20 "@/tmp/grep"' temp2.jpg c$I.jpg cp c$I.jpg salle.jpg if [ -e ".www" ]; then ftp -n $SERVEURFTP < .ftp > /dev/null fi sleep $DELAI }
Fichier .ftp

user nom mot_de_passe cd /var/www binary put salle.jpg chmod 666 salle.jpg quit

Les images du répertoires peuvent être converti en film par le script suivant:

#!/bin/sh
jpegtoavi -f 10 480 640 c*.jpg > tmp.avi
date '+mencoder -oac copy  -ovc lavc  -lavcopts vcodec=mpeg4:vbitrate=1055:vhq:v4mv:trell -o CAM-%A%d%B%Y-%Hh%M.avi tmp.avi' | sh
rm tmp.avi
#rm c*.jpg

Autre solution : envoi du flux direct (pas de capture mais en vidéo) avec Motion (package Debian).

Fluidité garantie (n’est-ce pas Ash ?) et pas besoin d’avoir une machine de brute (mon PIII-600 s’en sort très bien)

Pas d’écriture sur le disque du serveur.

Possibilité d’encodage du flux à la volée avec ffmpeg.

Configuration : /etc/motion/motion.conf

dont :

ffmpeg_cap_new on (encodage en live)
ffmpeg_video_codec [msmpeg4 | mpeg4] (codec vidéo)
webcam_port [port] (port d’écoute, mini-serveur)
webcam_localhost off (accès aux clients depuis internet)
output_normal off (pas d’écriture de fichiers)
control_port [port_contrôle] (port de configuration à distance)
netcam_userpass [user:pass] (si la webcam est protégée)

(man motion)

Connexion des clients à un mini-serveur intégré : http://[Ip_serveur]:[port]

Contrôle par un client (configuration à distance): http://[Ip_serveur]:[port_controle]

Côté page web, j’ai juste testé ça (pas besoin de raffraichissement évidement) :

<html>
<head>
<title>Bluenote - Connexion webcam</title>
<META NAME="description" CONTENT="">
<META name="keywords" CONTENT="">
</head>

<body lang="fr">

<!-- avec Konqueror/Explorer :<embed src="http://[Ip_serveur]:8080/" width=350 height=270 autoload="true" autostart="false" loop=1>-->

<!-- avec Mozilla et apparentés :<object data="http://[Ip_serveur]:8080/" type="text/html" width="350" height="270">
  alt : <a href="http://[Ip_serveur]:8080/">Caméra</a>
</object>-->


</body>
</html>

Avec ma machine peu puissante, j’ai testé l’option précédente (package webcam + applet javascript sur la page) avec l’aide d’usinagaz :wink: et l’option Motion : c’est sans comparaison, ça ne marche vraiment bien qu’avec Motion.

Si vous voulez faire un test pour juger, faîtes-moi signe :wink:

ps : le micro de ma cam n’est pas reconnu par Motion et l’entrée micro de ma carte son est HS donc je n’ai pas envoyé de son… un retour d’exp serait bienvenu.

[quote=“Bluenote”]Fluidité garantie (n’est-ce pas Ash ?) et pas besoin d’avoir une machine de brute (mon PIII-600 s’en sort très bien)
[/quote]Tester et approuvé :wink: De chez moi c’est fluide

Webcam était pas mal, mais gourmant en ressource. J’ai donc testé webcam-server. version 0.50.

1/ Installation :

2/ Placer le paquet dans l’arborescence d’apache :

[quote]$ sudo updatedb
$ locate webcam-server

/usr/bin/webcam-server
/usr/share/doc/webcam-server
/usr/share/doc/webcam-server/applet
/usr/share/doc/webcam-server/applet/applet.jar
/usr/share/doc/webcam-server/applet/error.jpg
/usr/share/doc/webcam-server/applet/ImageCanvas.java.gz
/usr/share/doc/webcam-server/applet/ImageDownloader.java.gz
/usr/share/doc/webcam-server/applet/init.jpg
/usr/share/doc/webcam-server/applet/WebCamApplet.java
/usr/share/doc/webcam-server/applet/webcam.html
/usr/share/doc/webcam-server/applet/WebCam.java
/usr/share/doc/webcam-server/changelog.Debian.gz
/usr/share/doc/webcam-server/changelog.gz
/usr/share/doc/webcam-server/copyright
/usr/share/doc/webcam-server/README
/usr/share/doc/webcam-server/README.Debian[/quote]

NB: les chemins si dessous sont donnés à titre d’exemple, à adapter donc.

$ cd /home/DocumentRoot $ mkdir webcam-server && chgrp www-data webcam-server $ cd webcam-server && cp -R /usr/share/doc/webcam-server/applet .
3/ Préparatifs :

[code]$ cd applet
$ mv webcam.html webcam.php

## Compilation des classes :

$ gunzip Image*[/code]

NB: il est important que webcam.php ou webcam.html soit dans le répertoire de l’applet (du moins, ça m’a semblé).
les soucis commencent, pas étonnant, quand on lit dans README.Debian que :

[quote]Depending on your Java installation, you might need to provide the classpath to
the standard Java classes. On my system this is
’/usr/lib/jdk1.1/lib/classes.zip’. [/quote]
0.50 est la dernière version (?), le jdk, c’est une autre histoire …

[code]$ javac -Xlint *.java
ImageCanvas.java:292: warning: [deprecation] show() in java.awt.Window has been deprecated
f.show();
^
ImageCanvas.java:312: warning: [deprecation] hide() in java.awt.Window has been deprecated
about.hide();
^
ImageCanvas.java:450: warning: [deprecation] show() in java.awt.Window has been deprecated
about.show();
^
ImageCanvas.java:18: wB/ ça se corse … :arning: [serial] serializable class ImageCanvas has no definition of s erialVersionUID
public class ImageCanvas extends Canvas
^
ImageDownloader.java:40: warning: [unchecked] unchecked call to addElement(E) as a member of the raw type java.util.Vector
chatQueue.addElement(message);
^
WebCamApplet.java:16: warning: [serial] serializable class WebCamApplet has no definition of serialVersionUID
public class WebCamApplet extends Applet {
^
WebCam.java:31: warning: [deprecation] show() in java.awt.Window has been deprecated
f.show ();
^5/ Et iptables ?
WebCam.java:15: warning: [serial] serializable class WebCam has no definition of serialVersi onUID
public class WebCam extends Frame
^
8 warnings

[/code]
4/ Résolution des problèmes :
A/ definition of serialVersionUID : ydisanto.developpez.com/tutoriel … n/partie1/
Ajout de la ligne : static private final long serialVersionUID = 1L;
dans la définition de la classe WebCam.java, ce qui donne :

public class WebCam extends Frame { static private final long serialVersionUID = 1L; private Applet applet; private Frame f; private ImageCanvas imageCanvas; private TextField input; public WebCam (Applet a, String host, int port) ( .......................................................................) }
Même manipulation pour les classes : ImageCanvas et WebCamApplet.
B/ ça se corse … :
1/ dans la classe WebCam.java remplacer l’appel à show() par setVisible(true) ce qui
donne : f.setVisible(true); (approx. ligne 32).
2/ dans la classe ImageCanvas, de même (2 occurences).
NB: gardez vous de remplacer la méthode show(a, b, c), celle là n’est pas deprecated.
Et puisqu’on y est, on remplace l’appel à hide() pas un setVisible(false).
3/ dans ImageDownloader, remplacer la déclaration du vector chatQueue par :
private Vector chatQueue = new Vector();
ce qui nécessite de supprimer les cast lignes 101 et 102 pour obtenir enfin :
System.out.println(chatQueue.elementAt(0));
printWriter.println(chatQueue.elementAt(0));

Voilà, on peut compiler tranquille maintenant …
NB: ça n’était que des warning, si vous compiler avec un 1.4 voir inférieur, vous en
aurez moins. J’ai fait ces modifs pour compiler avec le 1.6.

On devrait obtenir une chose comme ça :

[code]$ javac -Xlint *.java
$ jar cvf applet.jar *.class *.jpg
adding: META-INF/ (in=0) (out=0) (stored 0%)
adding: META-INF/MANIFEST.MF (in=56) (out=56) (stored 0%)
adding: ImageCanvas$10.class (in=805) (out=513) (deflated 36%)
adding: ImageCanvas$11.class (in=805) (out=514) (deflated 36%)
adding: ImageCanvas$12.class (in=805) (out=513) (deflated 36%)
adding: ImageCanvas$13.class (in=805) (out=510) (deflated 36%)
adding: ImageCanvas$14.class (in=638) (out=423) (deflated 33%)
adding: ImageCanvas$1.class (in=1442) (out=762) (deflated 47%)
adding: ImageCanvas$2.class (in=1414) (out=777) (deflated 45%)
adding: ImageCanvas$3.class (in=1046) (out=513) (deflated 50%)
adding: ImageCanvas$4.class (in=634) (out=414) (deflated 34%)
adding: ImageCanvas$5.class (in=1281) (out=725) (deflated 43%)
adding: ImageCanvas$6.class (in=804) (out=510) (deflated 36%)
adding: ImageCanvas$7.class (in=804) (out=509) (deflated 36%)
adding: ImageCanvas$8.class (in=804) (out=513) (deflated 36%)
adding: ImageCanvas$9.class (in=791) (out=504) (deflated 36%)
adding: ImageCanvas.class (in=9784) (out=4780) (deflated 51%)
adding: ImageDownloader.class (in=4635) (out=2699) (deflated 41%)
adding: WebCam$1.class (in=965) (out=531) (deflated 44%)
adding: WebCam$2.class (in=885) (out=457) (deflated 48%)
adding: WebCamApplet.class (in=1318) (out=804) (deflated 38%)
adding: WebCam.class (in=1620) (out=888) (deflated 45%)
adding: error.jpg (in=3071) (out=2486) (deflated 19%)
adding: init.jpg (in=3169) (out=2560) (deflated 19%)
Total:

(in = 38373) (out = 25625) (deflated 33%)[/code]

Ensuite, On édite le fichier webcam.php (ou html, si vous n’utilisez pas php).
On va indiquer le chemin vers l’archive applet.jar. Simplement, et provisoirement,
voici ce que je mets dans ce fichier en l’éditant :

[code]<?php
/** inclusion d’un fichier qui teste si l’utilisateur est autorisé à acceder à ce fichier
** pour exemple, son code peut être simplement un :
** <?php
** if($_SESSION[‘login’] == “”){
** Header(“Location: /pagedelogin”);
** }
** ?> Ce qui sous entend d’utiliser les sessions php.
**/
include ‘/scriptsPHP/protected.php’;
?>

WebCam [/code] NB: dans mon include de début, un simple fichier contenant à peu prés ce que j'ai commenté avant l'include.

5/ Et iptables ?
J’utilise le port 6012 en exemple parce que le port 8888 est déjà utilisé par un
serveur (gnump3d).
Ouverture des ports et sauvegarde de la config: et on vérifie …

[code]$ su
password

iptables -A INPUT -p tcp --dport 6012 -j ACCEPT

iptables -A INPUT -p udp --dport 6012 -j ACCEPT

iptables -L | grep 6012

-A INPUT -p tcp -m tcp --dport 6012 -j ACCEPT
-A INPUT -p udp -m udp --dport 6012 -j ACCEPT[/code]

5/ Et apache dans tout ça ?
Rien à faire dans httpd.conf …

6/ Un petit alias :

$ nano ~/.bash_aliases alias webcam='webcam-server -vs -p 6012 -l /home/www-logs/webcam_server.logs 1> /home/www-logs/webcam_server.logs'
On sauvegarde, on vérifie :

$ alias | grep webcam alias webcam='webcam-server -vs -p 6012 -l /home/www-logs/webcam_server.logs 1> /home/www-logs/webcam_server.logs'
NB: On a crée un fichier de logs soit même, je me souviens plus là …
7/ Lancement :

$ webcam &

Relativement facile, il n’y a pas de fichier de conf, on passe les arguement en ligne de commande (cf. l’alias et webcam-server -help) .ça marche bien :wink:

My god ! Tu as une adresse que l’on puisse juger de la chose ?

C’est très bien ça, et ses logiciels fonctionne t’ils pour deux trois webcam branché sur le même pc?

bonjour,
je ne sais pas, mais webcam-server devrait pouvoir être lancé en plusieurs instances, en précisant chaque fois le device visé dans la ligne de commande, à l’aide de l’option -d /dev/video[0-9] (?). C’est à voir.

J’ai essayé motion ce matin, c’est impécable. Par contre, deux webcam sa ne passe pas.

Je vais essayer webcam-server.

Normalement motion doit pouvoir fonctionner jusqu’à 4 webcam étrange que tu n’ai pas réussi avec 2.

Ah motion est toujours installé, je vais revoir la doc. Moi et mon anglais aussi !

[quote] How do I get Motion to work with two or more camera at a time?
If I run with one camera Motion works but when I add one more only the first is working. There are two common reasons for this.

config files
When you have only one camera you only need one config file: motion.conf. The minute you have more than one you need one thread config file per camera. So if you have two camera you need 3 config files: motion.conf and two thread config files. motion.conf will normally contain all the common or default options. Each thread file will contain the options unique to each camera. See the config file section in the Motion Guide.

USB cameras
A USB camera uses all the bandwidth a USB1.1 controller can give. Even at low framerates the camera reserves more than half the 11 Mb/s. This means that the 2nd camera gets rejected. Few motherboards have more than one controller. Often 2 or 4 physical connections on a motherboard shares one and the same USB controller. To add more cameras you need to put USB adapter cards. One per camera. There exists cards with full bandwidth per USB socket. These present themselves as for example 4 USB controllers to Linux and they work fine with 4 cameras. [/quote]