Webcam+ microserveur http = webcam ip (indy 9 et indy 10)
Description
Quoi de plus sympa de visualiser ce qui ce passe chez soi quand on est à l'autre bout du monde d?intégrer des images de sa caméra sur son site ou d?agir sur son ordinateur à distance ! !
Cette application a été réalisée en collaboration avec francky23012301.
Elle est destinée à être intégré au MODULE VIDEOSURVEILLANCE et si je la poste séparément du module c'est pour montrer combien il est facile d'intégrer quelques fonctionnalités WEB dans une application DELPHI en utilisant INDY.
Le principe est simple on met un petit serveur HTTP dans le PC quelques pages HTLM et il suffit de se connecter avec un navigateur (I.E ou FF) pour les visualiser en cliquant sur le lien du mail, ou en ouvrant son site ou encore en tapant l'adresse IP du PC (http://XX.XX.XX.XX/)
Le gros avantage du protocole HTTP c?est de ne pas nécessiter l?installation d?une application sur la machine cliente : le navigateur suffit.
C?est le script de la page qui assure le rafraîchissement de la page (1 fois/s à 1 fois/30s) pour la caméra en « live » on peut aller jusqu?à 10 images/s (attention à la bande passante de votre connexion internet).
En commande process on a une inter-activité entre le navigateur et le PC. Je n?ai mis que quelques commandes pour l?exemple mais vu la simplicité du procédé on peut imaginer bien d?autres applications.
La désactivation du compte est automatique.
j'ai rajouté la version INDY 10 elle est dans le répertoire INDY 10
Comme généralement les adresses IP sont dynamiques nous y avons intégré la détection automatique, la transmission de l'adresse par mail la mise à jour des liens dans les pages WEB
Le composant IDHTTPserver gérant la connexion, le protocole et les comptes utilisateur la programmation du serveur est très particulièrement simple.
Il suffit de définir un petit interpréteur pour charger les pages ou les fichiers ainsi que les images dynamiques.
Comme j'utilise le composant Videocapture vous le trouverez dans la source : http://www.delphifr.com/codes/VIDEOSURVEILLANCE-CAMERAS-ENVOI-EMAIL-APPEL-TELEPHONIQUE_37687.aspx dans le répertoire composant
Il faut bien sur avoir INDY 9 installé. (ou INDY 10 pour la version indy10)
Par défaut utilisateur : 'moi' et mot de passe : '123456'.
Nota comme j'envoie des images issues de bitmap ce n'est pas de la vidéo qui est trop lourde en termes de flux (le débit montant « upload » étant généralement limité à 128k et cela même si vous avez une connexion à 10M )
Pour la version INDY 10 c'est comme d'habitude : unités manquantes ou renommées, propriétés introuvables et il a fallu également recréer la fonction ServeFile...
Par contre ceux qui disposent de la version DELPHI 2005 pourront créer les pages HTML directement avec DELPHI.
J?ai inclus 3 pages HTML :
1) Une page test.htm qui montre comment inclure des images dans un site ainsi que le lien sur la page privée
2) Une page Zoomlive.htm qui est PopUp qui est appelé quand on clique sur l?image il montre la façon de faire pour récupérer des images « vidéo »
3) Une page default.htm qui donne la caméra en live et montre comment accéder aux fonctions process
Pour pouvoir transmettre les images à un site WEB public tout en conservant la confidentialité des autre données j?ai défini 2 espaces :
1) une zone publique ou seule les images sont accessibles depuis la toile (on peut désactiver cette possibilité en décochant l'option "toujours transmettre les images"
2)Une zone privée accessible uniquement par mot de passe qui permet d'agir sur le PC il suffit de mettre une page sur le site ayant un lien sur le serveur et que cette page soit présente dans la liste "serveur distant" onglet 'options internet (c?est la page "test.htm" de la démo) après saisie et validation du mot de passe le serveur envoie la page définie dans "Nom de la 1ère page" onglet Page WEB" elle doit être également dans la liste "serveur local" (double cliquer sur le nom) pour mise à jour.
Pour la zone publique toutes les pages faisant référence aux images ou à un lien sur le serveur local doivent être déclarées dans la liste "serveur distant".
Ces listes servent à mettre à jour les références images et les liens lors de la connexion du serveur après mise à jour ces fiches sont uplaodées sur le site par connexion FTP elles sont également sauvegardées en local pour permettre les tests sans avoir de site.
listes des variables JAVASCRIPT (à mettre en début de ligne)
var Host= --->pour les références images
var cadence= ---->pour le nombre d'images par secondes
Pour le lien il faut qu'il soit de la forme :
href=
C?est à dire pour un lien complet :
<a
href= "";---> il faut que href soit seul sur la ligne!!
target="_blank">Serveur</a>
si on veut que le rafraîchissement de la page soit réglé par le programme il faut mettre <meta http-equiv="Refresh" content="20"> en début de ligne
pour que les images soient rafraîchies en même temps que la page il faille mettre une fonction JAVASCRIPT:
function StartPage(){
//mette ici toutes les images de la page à rafraîchir
document.camera1.src="http://"+Host+"/"+"ImageCamera1";
Start();//uniquement si caméra live
}
et juste avant </body>
<script>StartPage();</script><!--doit être placé juste avant</body> -->
pour avoir des images "live"
if faut la fonction JAVASCRIPT
function NextImage()
{
indice = indice+1; // les navigateurs ne tenant pas compte des commandes meta no store et autres on est obligé de demander une image différente à chaque image ! ! ! ! !
//ici on met toute les images live
document.form1.sta.src="http://"+Host+"/"+indice+"ImageCamera"+NumCam;
}
function Start()
{
temps = temps+1;
if (temps < 2 ) {
setTimeout("Start()",1000/cadence);
} else
{
temps = 0;
NextImage();
Start(); //la boucle démarre !
}
}
J?ai préféré utiliser une fonction JAVASCRIPT Start() ; pour initialiser la page plutôt que la directive Onload dans le body qui présente des différences de fonctionnement entre les navigateurs.
Pour les commandes process il suffit de mettre une action dans onclick d?un bouton
onclick="document.location.href='?action=Nom_de_l'action" le fait de ne pas mettre la page ni l'IP rappellera la page en cours.
pour renvoyer une valeur au navigateur il y a 2 solutions:
soit utiliser le php (je n'ai pas encore testé).
soit modifier des variables JAVASCRIPT dans la page HTML avant de la renvoyer.
C'est la solution que j'ai retenue pour l'instant. il suffit de déclarer la variable dans le script , de la mettre à jour dans le programme ensuite on l'affecte à la zone dans la fonction StartPage (voir la fiche default.htm pour la variable NumCam)
Attention quand on utilise une caméra « live » il est impératif de demander régulièrement un rafraîchissement de la page pour vider le cache.
Ne pas oublier de mettre le fichier inpout32.dll dans le répertoire de l?application
Cette application a été réalisée en collaboration avec francky23012301.
Elle est destinée à être intégré au MODULE VIDEOSURVEILLANCE et si je la poste séparément du module c'est pour montrer combien il est facile d'intégrer quelques fonctionnalités WEB dans une application DELPHI en utilisant INDY.
Le principe est simple on met un petit serveur HTTP dans le PC quelques pages HTLM et il suffit de se connecter avec un navigateur (I.E ou FF) pour les visualiser en cliquant sur le lien du mail, ou en ouvrant son site ou encore en tapant l'adresse IP du PC (http://XX.XX.XX.XX/)
Le gros avantage du protocole HTTP c?est de ne pas nécessiter l?installation d?une application sur la machine cliente : le navigateur suffit.
C?est le script de la page qui assure le rafraîchissement de la page (1 fois/s à 1 fois/30s) pour la caméra en « live » on peut aller jusqu?à 10 images/s (attention à la bande passante de votre connexion internet).
En commande process on a une inter-activité entre le navigateur et le PC. Je n?ai mis que quelques commandes pour l?exemple mais vu la simplicité du procédé on peut imaginer bien d?autres applications.
La désactivation du compte est automatique.
j'ai rajouté la version INDY 10 elle est dans le répertoire INDY 10
Source / Exemple :
voir le zip
Conclusion :
Comme généralement les adresses IP sont dynamiques nous y avons intégré la détection automatique, la transmission de l'adresse par mail la mise à jour des liens dans les pages WEB
Le composant IDHTTPserver gérant la connexion, le protocole et les comptes utilisateur la programmation du serveur est très particulièrement simple.
Il suffit de définir un petit interpréteur pour charger les pages ou les fichiers ainsi que les images dynamiques.
Comme j'utilise le composant Videocapture vous le trouverez dans la source : http://www.delphifr.com/codes/VIDEOSURVEILLANCE-CAMERAS-ENVOI-EMAIL-APPEL-TELEPHONIQUE_37687.aspx dans le répertoire composant
Il faut bien sur avoir INDY 9 installé. (ou INDY 10 pour la version indy10)
Par défaut utilisateur : 'moi' et mot de passe : '123456'.
Nota comme j'envoie des images issues de bitmap ce n'est pas de la vidéo qui est trop lourde en termes de flux (le débit montant « upload » étant généralement limité à 128k et cela même si vous avez une connexion à 10M )
Pour la version INDY 10 c'est comme d'habitude : unités manquantes ou renommées, propriétés introuvables et il a fallu également recréer la fonction ServeFile...
Par contre ceux qui disposent de la version DELPHI 2005 pourront créer les pages HTML directement avec DELPHI.
J?ai inclus 3 pages HTML :
1) Une page test.htm qui montre comment inclure des images dans un site ainsi que le lien sur la page privée
2) Une page Zoomlive.htm qui est PopUp qui est appelé quand on clique sur l?image il montre la façon de faire pour récupérer des images « vidéo »
3) Une page default.htm qui donne la caméra en live et montre comment accéder aux fonctions process
Pour pouvoir transmettre les images à un site WEB public tout en conservant la confidentialité des autre données j?ai défini 2 espaces :
1) une zone publique ou seule les images sont accessibles depuis la toile (on peut désactiver cette possibilité en décochant l'option "toujours transmettre les images"
2)Une zone privée accessible uniquement par mot de passe qui permet d'agir sur le PC il suffit de mettre une page sur le site ayant un lien sur le serveur et que cette page soit présente dans la liste "serveur distant" onglet 'options internet (c?est la page "test.htm" de la démo) après saisie et validation du mot de passe le serveur envoie la page définie dans "Nom de la 1ère page" onglet Page WEB" elle doit être également dans la liste "serveur local" (double cliquer sur le nom) pour mise à jour.
Pour la zone publique toutes les pages faisant référence aux images ou à un lien sur le serveur local doivent être déclarées dans la liste "serveur distant".
Ces listes servent à mettre à jour les références images et les liens lors de la connexion du serveur après mise à jour ces fiches sont uplaodées sur le site par connexion FTP elles sont également sauvegardées en local pour permettre les tests sans avoir de site.
listes des variables JAVASCRIPT (à mettre en début de ligne)
var Host= --->pour les références images
var cadence= ---->pour le nombre d'images par secondes
Pour le lien il faut qu'il soit de la forme :
href=
C?est à dire pour un lien complet :
<a
href= "";---> il faut que href soit seul sur la ligne!!
target="_blank">Serveur</a>
si on veut que le rafraîchissement de la page soit réglé par le programme il faut mettre <meta http-equiv="Refresh" content="20"> en début de ligne
pour que les images soient rafraîchies en même temps que la page il faille mettre une fonction JAVASCRIPT:
function StartPage(){
//mette ici toutes les images de la page à rafraîchir
document.camera1.src="http://"+Host+"/"+"ImageCamera1";
Start();//uniquement si caméra live
}
et juste avant </body>
<script>StartPage();</script><!--doit être placé juste avant</body> -->
pour avoir des images "live"
if faut la fonction JAVASCRIPT
function NextImage()
{
indice = indice+1; // les navigateurs ne tenant pas compte des commandes meta no store et autres on est obligé de demander une image différente à chaque image ! ! ! ! !
//ici on met toute les images live
document.form1.sta.src="http://"+Host+"/"+indice+"ImageCamera"+NumCam;
}
function Start()
{
temps = temps+1;
if (temps < 2 ) {
setTimeout("Start()",1000/cadence);
} else
{
temps = 0;
NextImage();
Start(); //la boucle démarre !
}
}
J?ai préféré utiliser une fonction JAVASCRIPT Start() ; pour initialiser la page plutôt que la directive Onload dans le body qui présente des différences de fonctionnement entre les navigateurs.
Pour les commandes process il suffit de mettre une action dans onclick d?un bouton
onclick="document.location.href='?action=Nom_de_l'action" le fait de ne pas mettre la page ni l'IP rappellera la page en cours.
pour renvoyer une valeur au navigateur il y a 2 solutions:
soit utiliser le php (je n'ai pas encore testé).
soit modifier des variables JAVASCRIPT dans la page HTML avant de la renvoyer.
C'est la solution que j'ai retenue pour l'instant. il suffit de déclarer la variable dans le script , de la mettre à jour dans le programme ensuite on l'affecte à la zone dans la fonction StartPage (voir la fiche default.htm pour la variable NumCam)
Attention quand on utilise une caméra « live » il est impératif de demander régulièrement un rafraîchissement de la page pour vider le cache.
Ne pas oublier de mettre le fichier inpout32.dll dans le répertoire de l?application
Codes Sources
A voir également
- Webcam+ microserveur http = webcam ip (indy 9 et indy 10)
- Webcam chat - Forum PHP
- Voyance par webcam - Forum Javascript / DHTML
- Debuter webcam - Forum C++ & C++ .NET
- Flux webcam sur page web ✓ - Forum PHP
- Webcam show - Conseils pratiques -Javascript
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.