Construction d une WEBCAM

Dimension: px

Commencer à balayer dès la page:

Download "Construction d une WEBCAM"

Eric Vachon
il y a 8 ans
Total affichages :

1 Construction d une WEBCAM C-HTML-CSS-XML-JAVASCRIPT Serveur WEB embarqué, caméra Série 1

2 Contenu 1. Objectif, Communication 2. Choix les composants 3. Serveur WEB embarqué 4. Interface Camera série 5. Code de capture camera 6. Affichage, Page web, HTML, CSS, XML 7. Essais, première solution 8. Amélioration, utilisation du «cloud» 2 Construction d une WEBCAM

Code de capture camera 6. Affichage, Page web, HTML, CSS, XML 7.

3 Objectif Camera de surveillance WEBCAM Connectée par wifi par routeur wifi local Si possible accessible depuis le web public Sécurité d accès 3

4 Construction d une WEBCAM Communication Point d observation Appartement/bureau Camera System embarqué WIFI System embarqué SD L A N WIFI Routeur Domestique Routeur/DSL Configuration DMZ permet l accès à la WEBCAM depuis le Internet public 4 A D S L - W E B

SD L A N WIFI Routeur Domestique Routeur/DSL Configuration DMZ

5 Choix des composants Flyport Openpicus wifi Camera 640x480 pixels Interface UART (115200baud) Paramètres programmable Capteur de mouvements. Compression JPEG intégrée -Processeur Microchip 16 bits PIC24f256 -module WIFI Microchip -Permet de charger plusieurs pages web simples sans trop de photos. -Environnement de développement Openpicus -Multiples E/S, UART, SPI, I2C, PWM à disposition Origine Linksprite Source Sparkfun/Adafruit 5

Compression JPEG intégrée -Processeur Microchip 16 bits PIC24f256 -module WIFI Microchip -Permet de charger

6 Serveur WEB embarqué Flyport Openpicus 6

7 Camera série Commandée par ligne série Répond à des commandes Vidéo on -> sortie comp. Stop Vidéo Copy image-> série Copie par blocs de grandeur programmable Information mouvements Prends image Lis grandeur du fichier jpeg Lis par paquets Jusqu à la fin du fichier 7

8 WEB Embarqué, logiciel Free RTOS Librairie Openpicus Configurateur Réseau Librairie Utilisateur IDE OPENPICUS Task Flyport Code C utilisateur WF-CONFIG Code utilisateur HTTP-APP Code C utilisateur WEB PAGE Interface Matériel Gestion état du WIFI Interface WEB 8

Flyport Code C utilisateur WF-CONFIG Code utilisateur HTTP-APP

9 Environnement de développement Projet WEB Embarqué logiciel Configuration TCP Charger HTML Compilateur C Bootloader Editeur 9

10 CONFIGURATION TCP-IP /WEB SERVEUR 10

11 Multi-tâches, interaction TaskFlyport.c HTTPApp.c Index.htm Interaction avec les périphériques du module embarqué Interaction HTML dans le module embarqué HTML Chargé dans le client par wifi Peut-être PC Smartphone Tablet Global variables 11

Interaction HTML dans le module embarqué HTML Chargé dans le

12 Code, fonctions TaskFlyport.c HTTPApp.c Index.htm 1.Initiation périphériques -camera -pwm servo -carte SD 2.Activer web 3.Boucle attente - Transfer données camera -Code interraction Boutons (get) -Changement info page web(print) -Lecture SD, envoi vers page WEB -Initiation page web -Détection iphone, Iexplorer -Affichage graphique -Code Javascript 12

Boucle attente - Transfer données camera -Code interraction Boutons (get) -Changement

13 Communication Client-Server Serveur 1. Appel par Adresse IP 2. Envoi page WEB 3. Interaction Client Serveur Client Code HTML CSS Javascript AJAX 4. Réponse Serveur 13

14 Contenu HTML, Client Code HTML CSS Javascript AJAX XML HTML: Contenu statique de la page web Texte, images, boutons, Formatage par défaut CSS: Macro de formatage, grandeur du Texte, largeur des lignes, position des Objets par type d appareil (Iexplorer, iphone, ) JS: Programmation de la page web Animation, Changement de couleurs Envoi d informations vers le serveur Rem: le code étant téléchargé vers le client La performance et compatibilité est donc AJAX: Asynchrone Java-Script and XML Transfert de données 9-Feb-13 dépendante de ce dernier (PC, Smartphone, tablette). Rolf Ziegler 14

page web Animation, Changement de couleurs Envoi d informations vers le serveur Rem: le code étant téléchargé vers le client La performance et

15 Objectif, Ecran sur client 1. Image chargée par Serveur web embarqué Bouton pour enlever le menu 2. Boutons permettant d envoyer des commandes au server 3. Affichage info # de l image 15

16 Code HTML, initialisation CSS Chargement dynamique Du fichier de formatage 16

17 Code HTML & Ajax La commande AJAX va envoyer un message HMTL par TCP-IP vers Le serveur embarqué indiquant la page web et l identifiant (btn1 ou btn2 ou UPDATE) 17

18 Exemples de code JavaScript Objectif: rafraichir toutes les 500ms les noms de fichiers en bas d écran l information se trouve dans le fichier status.xml qui est échangé 9-Feb-13 avec le système embarqué. Rolf Ziegler 18

information se trouve dans le fichier status.

19 Résumé mise a jour image par XML 2. Le serveur embarqué répond avec une mise a jour des valeurs ou d une image «status.xml» «cam.xml» 1. HTML+ JavaScript Appelle toutes les x millisecondes un rafraichissement du ficher 19 XML

20 20

21 DEMO 21

22 Problèmes transfert d image XML ne permet pas d échanger des informations binaires Il fallait donc trouver une solution pour envoyer les données binaires sans trop d effort La camera crée un fichier JPEG de 10-50kb JPEG=fichier binaire Solution: On va donc encoder le fichier binaire en base 64 Ce format utilise 6 bits donc ascii 3x8 bits (24) seront donc envoyés en 4 caractères ascii (4x6bits=24bits) Côté client (page web) On à de la chance, les exploreurs web Sont capable de décompresser du base64 suffisait plus que trouver le code Java-Script qui effectuerait l opération. 22

23 Résultats Origine Camera de surveillance WEBCAM Connectée par wifi par routeur wifi local Si possible accessible depuis le web public Sécurité d accès Ajouts Stockage sur carte SD Date+Heure Internet (temps réel SNTP) Mouvement par servomoteur Version FTP stockage des photos dans le «cloud» 23

24 Installation sur ma terrasse 24

25 Exemples 25

26 Références Explications et simulation HTML en ligne Web-Serveur embarqué Exemple, code source Camera, matériel: 26

Documents pareils

Prototypage facile Audio streaming Flyport et l internet des Objets opensource Robots android Compatible Lego Mindstrom Domotique I. Flyport et le monde de l IP II. Caractéristiques du module III. Flyport