PROJET réalisé par PROJET encadré par - DUNE
Contents
1. JOUBERT Adrien Acquisition des flux video de la webcam Page web de test pour la visualisation des flux vid o D tection des intrusions Param trage du serveur SMTP et envoi d email d alerte Ajax Envoi et Recuperations des flux vid o pour le streaming Nodeis POTHIN Jean Philippe Codage du serveur crit en NodeJS et gestion des requ tes clientes Pages web de test du serveur NodeJs Envoi et recuperations des flux vid o pour le streaming Authentification des clients pour le streaming Gestion et organisation du projet Page 15 Node JS est un projet open source qui est bas sur le moteur V8 de Chrome II s agit d un interpreteur JavaScript ex cutable et enrichissant le langage avec sa propre API Son int r t est d interpr ter du JavaScript cot serveur Contrairement au serveur Apache o chaque requ te HTTP entrante se voit allouer un thread qui est ensuite utilis pendant toute la dur e du traitement de la requ te Node n utilise qu un seul thread pour g rer les requ tes entrantes Ainsi tout le code est asynchrone L avantage imm diat cela est la simplification l extr me de la gestion de la concurrence dans nos applications qui n est ici plus g r e par le d veloppeur mais directement par l OS Gr ce cela on peut crire des applications avec d excellents temps de r ponses b Archivages des recherches Les recherches sont partag s via un document sur Google dr2. webcam ou microphone En cas de r ponse positive l argument successCallback est alors invoqu La fonction getUserMedia appelle la fonction sp cifi e dans le successCallback avec l objet LocalMediaStream qui contient le flux multim dia On peut assigner cet objet l l ment appropri et travailler avec elle function setUpVideo if navigator getUserMedia navigator webkitGetlUserMedia if navigator getUserMedia navigator getUserMedia video successCallback errorCallback function successCallback stream video srce navigator getUserMedia stream window webkitURL createObjectURL stream function errorCallback error f else Page 17 Bien qu optionnelle la methode errorCallback est n cessaire pour g rer une ventuelle absence de p riph rique Ce qui permettra d informer l utilisateur qu il y a un probl me Quant la fonction sucessCallback au moment o l utilisateur autorise l utilisation de sa webcam on cr e un objet URL dont la dur e de vie est li e ca la fen tre window Et finalement pour le param tre vid o qui correspond l argument constraint de la fonction getUsermedia contraint juste utiliser la fonction vid o soit la webcam La donn e des deux m thodes callback et l utilisation de la contrainte vid o nous permet de compl ter la fonction SetupVideo qui permet de r cup rer les vid os de la webcam qui sera appel
3. 80 et Un serveur de nouvelle g n ration nodeJS port 8080 permettant l utilisation de JavaScript cot serveur Ce nouveau type de serveur novateur et tr s prometteur permet de mieux supporter les demandes gourmandes Notre id e a t de g rer toutes les fonctions que nous consid rons comme primordiale identification d tection d intrusion et envoi d email l aide du serveur Apache utilis depuis des ann es et r put comme viable et d utiliser le serveur Node pour le streaming car celui ci dispose de modules sp cifiquement d velopper pour permettant travers des websocket le transfert facile de donn es Page 13 c Streaming centralis et non P2P Le P2P avec flash tant facile il est encore l tat de brouillon sous Node Il a t ainsi d cid d utiliser un module l tat de d veloppement plus avanc et qui passe obligatoirement par le serveur module ws pour websockef II 2 d Choix biblioth que nodeJS Toutes les websockets propos s par la communaut se basent sur socketio Chacune de ces impl mentations rajoute une fonctionnalit sp cifique l utilisateur et son projet final Notre choix s est fait sur la version la plus authentique de socketio avec juste la possibilit d envoyer des donn es et d tablir une connexion d faut d avoir trouv une impl mentation g rant la vol la consommation BP du stream vid o ainsi que la compression d image d Serveur SMTP local Afin d
4. compte soit de s inscrire Pour l inscription il devra fournir comme informations son adresse email ainsi que son mot de passe 2 fois afin de v rifier qu il ne se trompe pas Afin de tester si l adresse email est valide on utilise une regex ainsi que la fonction php preg match Page 31 SSvntaxe u 4d uw a si 71 2 6t6 if preg matehisSyuntane small SOFT le format de l adresse mail est bon On v rifie galement en ajax s il n existe pas d j un utilisateur avec la m me adresse email dans la base de donn es Si c est le cas l utilisateur ne peut pas valider et est pr venue que l email est d j utilis Si l adresse est finalement valide le mot de passe est crypt gr ce la fonction PHP md et l utilisateur est ajout la table users ereation du user rmdp mds mdp on cripte le mdp mysql query INSERT INTO users email mdp VALUES l mail Smdp or diel Erreur SQL lt brs sql lt bri mysql error Pour la connexion il devra galement fournir son adresse mail et son mot de passe De m me on v rifiera si l adresse email est valide On fera ensuite une requ te select pour savoir si l utilisateur existe bien mail on selectionne l user i FROM users wiere emal amp sql SELECT reg I F mM I QL lt br gt sql lt br gt mysql error Ensuite afin d viter les injections SQL on v rifie que la requ te ne r
5. frontiere n message Content Type text plain charset iso 8859 1 nN message Content Transfer Encoding 8bil NnNn message message_texte n n Message cot html Page 2 2 gt message frontiere N message Content Type text html charset iso 8859 1 n message Content Transfer Encoding 8bit n n message message_html n n message frontiere n On met l image en piece jointe message Content Type image png name image png n message Content Transfer Encoding base64 An message Content Disposition attachement filename image png n n message chunk split filteredData n Enfin on envoi l email mail destinataire sujet gmessage headers Le respect des headers et des adresses d envoi r ception permet d augmenter nos chances de ne pas tre consid r en tant que SPAM par les grands domaines L IP de l metteur est galement importante Depuis l ISTIA et avec ses impl mentations nous pouvons ainsi envoyer avec aisance email vers Google ou Hotmail sans tre consid r comme spam 4 Base de donn e La base de donn es MySQL est utilis e l aide de phpMyAdmin fournis d office avec Wamp Voici la fable users Colonne Type Interclassement Attributs Null D faut Extra ID int 11 Non Aucun AUTO INCREMENT email varchar 30 latin swedish ci Non Aucun mdp varchar 30 latin swedish ci Non Aucu
6. images et ce pourcentage est au dessus du seuil donc un email d alerte sera envoy avec la photo en pi ce jointe Page 3 RA ception Images i 0 022135416666666664 RA ception Photo Sur cette copie on peut voir un aper u du streaming avec gauche la page d envoi et droite la page de r ception Attention tout de m me au navigateur utilis le streaming ne marche qu avec les navigateurs chrome et op ra 2 Manuel d utilisation cot client Pour pouvoir Utiliser cette application de videosurveillance en ligne le client doit v rifier tout d abord ses quelques points avoir une webcam fonctionnelle int gr ou non avoir au moins le navigateur chrome ou op ra d installer sur sa machine et son Smartphone Le client doit avoir une adresse email valide Avec ses points l utilisateur pourra se connecter sur le site homemonitoring com bient t valide il devra s identifier ou sinon cr er un compte utilisateur Une fois connect le navigateur interrogera le client pour pouvoir lui demander l utilisation de sa webcam et il devra r pondre positivement cette demande webcamera sender y F e a Web localhost 8000 sender html Ye Poge 38 Puis l utilisateur sera redirig sur la page de surveillance proprement parl Surveillance video en ligne Activer le streaming D marrer la surveillance D connexion Quitter la surveillance Choisissez un d lais avant
7. machine locale de surveillance 1 Le produit et ses objectifs Afin d offrir un service d application de videosurveillance en ligne efficace le programme d crit ici offrira une fonction de t l surveilance supportant plusieurs client offrant une identification et s utilisant sans installation Le programme sera ainsi accessible depuis le navigateur internet compatible avec la webcam Chrome Opera etc 2 Contexte global du projet L ISTIA cole d Ing nieurs de l Universit d Angers et centre de recherche de haut niveau ne dispose pas actuellement de syst me de vid o surveillance Pourtant elle poss de du mat riel co teux dans ses locaux Il est donc indispensable de pr munir les locaux de l tablissement Toutefois le syst me de vid o surveillance tudi e ici peut aussi tre tr s utile aux particuliers car il leur suffit d avoir une connexion internet et une webcam pour pr server moindres co ts leurs propri t s en leurs absences I existe d j plusieurs applications qui permette la surveillance en ligne mais elles sont soit payant soit il est n cessaire d installer un logiciel Page 6 3 Les intervenants Maitrise d ouvrage Mehdi Lhommeau Enseignant l ISTIA Maitrise d uvre Geoffroy HUET Adrien JOUBERT Jean Philippe POTHIN tudiants l ISTIA I Identification et pr sentation du besoin 1 Environnement Ce projet concerne n importe quel utilisateur poss dant une
8. of q room Through the use of the webcam The user only needs to log on and then start monitoring At the launch he has the option to enable streaming which enables the user via another machine to access the images from his webcam Upon detection of intrusion an email is sent to the user with the capiured image The languages used for this application are the Javascript especially fo encode the server and the PHP and HTML For coding the server we used the NodeJS framework Keywords NodeJS JavaScript HTMLS5 Security Page 44 ANNEXES 1 Pr somption de faisabilit a Casl pas intrusions Communication Machine machine concernee distante G ER O R ponse machine et envoi de streams vid o Ju l SUIUDPW p INS SO DIA XN S P IOAUSN s9000 pupui qg Application WEB cliente Machine quelconque Poge 45 b Cas 2 Detection d intrusions Machine distante D tection intrusions Sauvegarde flux local Application WEB client Machine quelconque SERVER Envoi email Renvoi de flux pour visualisation Page 46 c Solutions techniques v Cote application web Page web classique avec possibilit de cr ation de compte utilisateurs et mot de passe associ g rer par une BDD Connexion distance sur le site d sir Codage en PHP ef type de BDD selon le choix du programmeur pour la gestion des comptes Design du site selon le choix du codeur Utilisa
9. qui que soit celui qui envoi les donn es on les diffusera tous ceux qui se sont Un jour connect sur le serveur Page 25 c Notre solution Nb notre solution ce jour peut voluer d ici la pr sentation finale du projet La distinction des data envoy par les clients q t la plus grande difficult de ce projet En effet le cours de Javascript ne faisant pas partie du cursus ISTIA et l API nodeJS tant encore nouvelle nous avons pass du temps appr hender le syst me d abonnement de sous programme et a en finalit discriminer les donn es envoy s par chaque client Pendant la phase de choix technologique nous avions choisis de passer par le serveur Voici la solution retenue SERVEUR NODE Client 1 J lt Client2 Soit le client 1 tant un metteur C est dire un client qui utilise notre application pour d tecter un intrus et tant ainsi m me d envoyer des images Soit le client 2 tant Un r cepteur C est dire un client qui utilise notre application pour r ceptionner des images 1 Le client 1 si l option streaming au sein de sa page q t activ e envoi trois arguments e Son type 0 s il est un metteur et 1 s il est r cepteur sera 0 dans notre cas e Son identifiant un md5 du MDP ef son email e La vid o 2 Le serveur enregistre ce nouveau client ef attends qu un client du Type r cepteur arrive 3 Le client 2 se connecte Il d clare son type et son identifi
10. status nol Le fichier popup php contient le code suivant qui permet de telecharger la photo directement sur l ordinateur de l utilisateur Le nom de la photo sera l email de utilisateur Poge 33 71 leneme 5 SESSION email 1 png zz Envoi du fichier header Content Transler Encoding none header Content Type application octetstream name filename header Content Uisposirioni attachment filename GET len we n header l Content length filesize S filename header Fracma no cache header l Cache Control must revalidate post check 0 pre check 0 public header Expires 0 Hreadfilel filename OR die Enfin on ferme le pop up apr s 55 5s tant le temps jug n cessaire au t l chargement de l image gr ce au code JavaScript furckion closewindow See lezei set Timeout closewindow 5000 Le sefTimeout permet d appeler la fonction closewindow apr s un d lais de 5 secondes Page 34 V Description de l apr s d veloppement 1 Pr sentation du programme Pr sentons les r sultats sous chaque aspect du projet Surveillance video en ligne Connexion Inscription Mot de passe oubli Tout individu voulant essayer la vid o surveillance en ligne devra s identifier ou tout simplement cr er un compte en sp cifiant son adresse email et son mot de passe Page 35 Surveillance video en ligne _ Activer le streaming D marrer la
11. surveillance D connexion Quitter la surveillance Choisissez un d lais avant le lancement de la surveillance en secondes D marrer Voici Un premier aspect du rendu de l interface La checkbox pour activer le streaming Un bouton pour pouvoir d marrer la surveillance tout de suite ou sinon le client la possibilit de pr ciser un timer qui declenchera la videosurveillance des la fin du timer Et enfin l utilisateur peut tout moment quitter abandonner la surveillance et se d connecter La fen tre de surveillance avec la vid o sera situ e juste en dessous du bouton d marrer Le design du site reste sobre pour l instant le rendu final pour le jour de la soutenance sera plus esth tique Page 36 L Opera file localhost C Wa X or lt BE Locale localhost C Wamp www V4 index html 0 12890625 Sur cette copie d cran on peut remarquer le test de l algorithme de traitement d image De gauche droite on peut voir la premiere image puis une seconde image bien videment diff rente En Noir et blanc l image binarisee apr s soustraction des deux Le pourcentage de difference entre les deux images ici n est que que de 0 13 ce qui ne declenchera pas de prise de photo et d envoi d email d alerte car le seuil de detection choisi est de 2 4 337239583333333 Par contre sur la capture ci contre le seuil est de 4 33723958333 de difference entre les deux
12. 43 06 0213 a o D tecons de Mouvements 090143 300143 En a Cr ation dela base de donn 200243 200213 0 9 formulaire dinseripfion 060343 060313 a Archivages des donn es et 06 0343 13 0313 fs Gestion authentification de 5 15 0343 150313 Envoid emaldalete 130243 27023 Part des diff rentes activit s heures E Acquisition video m serveur m Face web B Gestion des requ tes m Renvoi des pages E R cup rations flux m Enregistrement video ou prise de photos E D tection de mouvement m Base de donn es m Formulaire d inscription m Archivage des donn es d inscription S cu rite de donn es m Authentification cent Envoi email Page 12 2 Choix techniques Nos choix technique ont t un compromis entre la consigne et la faisabilite difficulte a HTML5 oui FLASH non Le premier choix a t l utilisation exclusive de l HTMLS et aucune utilisation de Flash propri taire Cela q augment la difficult du projet dans pratiquement toutes ces phases Cela entra ne une incompatibilt avec les anciens navigateurs Internet explorer ainsi que les anciennes versions de Firefox pour ce qui est de la d tection de mouvement Cela q galement forc un choix autre technique celui concernant le streaming b Utilisation de deux serveurs Le second choix q t d utiliser deux serveurs distincts Un serveur apache classique sous Windows travers Wamp port
13. Envoi par doublons donn es email des photos Projet El4 Avril 2013 Angers 4 Organigramme technique 2 pe d D tection He 3 TO mouvement Capture intrusion Renvoi Page web Acquisillon vid o Serveur node js Record ou snapshot Gestions des requ tes clients Formulaire login BDD waq Page 50 5 Diagrame PERT Page 51
14. VIDEO SURVEILLANCE EN LIGNE PROJET r alis par HUET Geoffroy JOUBERT Adrien POTHIN Jean Philippe PROJET encadre par LHOMMEAU Mehdi Projet EI4 Avril 2013 Angers REMERCIEMENTS Nous tenons tout d abord remercier M Mehdi LHOMMEAU notre tuteur de Projet qui nous q accompagn s pendant toute la dur e de notre travail Gr ce ses conseils aussi bien en mati re de gestion de projet que sur les domaines techniques abord s nous avons pu avancer sur le projet l q galement su nous soutenir lors des diff rentes phases du projet Page 2 SO TOR ee 5 Pricsenialionmxedo pri66l uu uu uuu uu ee ae ee ahnt l Le procul elses ODOC Sa a ae ee ds a en din ii 6 2 Contexte dlobal du DOT ae 6 D Lenen Gri en aa a E EET a a ne 7 l Identification et pr sentation du besoin eee is 7 ls P yo Sa e E E S 7 2 Analyse de la probl matigue reset ea nee erneuern 3 De escripiorndesTornoliOriSu ea ne ea do bien 8 4 Description des contraintes a 10 l Description de l avant d veloppemernli 11 1 Synthese des outils de gestion W W u u u d dsseeseveerreeeeeeee evne ennen ennen reen ennen nerne eee 11 2 amp 4 e O C sj si IDD ee 13 SR COTE COTES I DIA Tee ee 15 IV Description du d veloppement phase de r alisation reen 17 le AEG Op VA O ee EEEE IR de 17 2 D
15. ant aupr s du serveur 4 Le serveur observe une correspondance entre client 1 et 2 et envoie la vid o du 1 vers le client 2 5 Le client 2 r ceptionne les donn es socket on message et les affiches Page 26 nb dans le futur il est pr vu que le client 1 n envoie des donn es que lorsqu un client2 est abonn Le principe de codage de nodeJS et socketio fait que la partie 1 et 3 sont coder en m me temps dans la m me fonction Pour discriminer ce que chacun doit faire il faudra toujours v rifier l argument premier le type Expliquons le avec le code d velopp cot serveur nous avons var websocketServer ws attach httphServer var emeteurs var recepteurs ff chaque arriv d un nouveau client WehsocketServer on connection function Socket 14 HH M BI PE Es OR PF CE m in a BR P En Deux tableaux associatifs Un pour les m teurs et un pour les r c pteurs 3 4 socEet onf message function data 35 als On recupere l identifiant de la socket a rar identifiant 35 var i 39 console logi bata length data length 40 For i 2 i lt data length i 41 2 if data i J ga break en else 45 identifiant datal li 4 i L identifiant correspond au type de client m teur ou recepteur II sera soit 1 soit 0 Quand une connection gr ce la cr ation d un v nement connection est tablie on r cup re l identifiant d
16. ar ils peuvent d sormais en plus des rondes surveiller un maximum de zone depuis un simple cran de leur poste de s curit L homme seul tant quelque chose d imparfait une vid o surveillance astucieuse l aiderait dans ses proc d s de contr le Dans ce projet nous nous sommes attardes sur la conception d un systeme de vid o surveillance en ligne qui n cessite l utilisation d une webcam et d un navigateur web et en particulier nous avons d velopp une partie du syst me avec la technologie NodeJS Le caract re en ligne du systeme n cessitait aussi le d veloppement d un algorithme de traitement d images qui puisse d tecter les incoh rences telles que les intrusions et d en informer les clients concern s Page 5 I Presentation du projet L objectif de ce projet est de r aliser l aide du framework JavaScript Node js et de la technologie HTML 5 une application WEB permettant d effectuer des op rations de vid o surveillance a distance L application finale devra permettre un utilisateur de s enregistrer sur un site Web et d utiliser la webcam de son ordinateur ou la camera d un Smartphone pour faire de la vid o surveillance sans avoir installer la moindre application On pourra imaginer que l application WEB envoie des alertes en cas de d tection d intrusions De m me pour des raisons de s curit les images pourront tre sauvegard es sur un serveur distant RapidShare DropBox ou sur la
17. ble que sous Google chrome pour l instant v Cote serveur Utilisation de nodejs possibilit d utiliser JavaScript cot serveur Codage du server dans un autre langage efficacit et Utilit prouver Lieu d h bergement Possibilit de sauvegarde des flux Rapide Pas de blocage du nombre de client R ponses aux requ tes instantan es Page 47 2 METHODE DES ANTECEDENTS CE heures plus tard em en video 2 serveur 3910 20 _ s once3 3 Pageweb 4 1 S ances Gestion des requ tes Renvoi des S ance 10 pages mamaru flux 8 Enregistrement vid o ou prise de photos 14 11 D tection de mouvement S ance 7 S ance 8 S ance 9 S ance 9 Formulaire BE d inscription Archivage des 12 13 14 donnees d inscription donn es client Envoi email qucun DE donn es Wu 14 Poge 48 3 Organigramme technique Surveillance en ligne Acquisition un Application Web Acquisition flux vid o de Gestion Requ tes Pages web clients la webcam Authentificati Renvoi des Renvoi des Gestion R ts 2 ecuperaftion on du client flux videos Emailing pages compte SEE pepe eur des flux videos Interrogation base de Inscription et donnees archivage des donnees Possibilites de Formulaire de Cryptage des prendre une saisie pour donn es photo ou inscription d enregistrer le flux Pas de S curit des
18. connexion internet une webcam ainsi qu un navigateur compatible 2 Analyse de la probl matique Tableau QQOQCP Tout public Premier syst me de vid o surveillance Co ts faibles Qui amp ou pour Qui 2 Quoi avec Quoi 9 Vid o surveillance en ligne Propri t s des clients Comment Page une connexion internet x Sile web qvec prooromme capable qe d tecterles singularit s et d avertir le client par email Possibilit de visualiser les images de la zone surveill e via Smartphone par streaming vid o 3 Description des fonctions Apache fourni par Wamp Serveur FS Servir fichiers requis FTI 1 Trouver les fichiers Apache fourni por FT1 2 Traiter les Wamp Serveur requ tes FS2 D tecter E23 WebCam API Acquisition des getuseredia nages les singularites FT2 2 Traiter les Programme images d analyse et Traitement des images FS3 Avertir le FT3 1 Signaler Email serveur SMTP client l l infrusion Php Ajax FT3 2 T l charger les images T l chargement local des snapshtots Page 8 a b d Fonction Technique 2 1 Acquisition des images On utilise les fonctions d velopp es dans la derni re version de la suite HTML soit la version 5 qui propose des fonctions de gestions des mat riels d acquisition vid o webcam et audio casque ou micro int gr Prendre en co
19. d html5s explode http www auietless com kitchen building a login system in node is and mMonaodb http www adrienbapfiste com developpement creer un chaf facebook avec nodejs nowis 671 http www emergence gqroup com en node 426 http www adrienbapfiste com developpement creer un chaf facebook avec nodejs nowis 671 http www grafikart fr tutoriels nodeis nodeis socketio tchat 366 http naholyr fr 201 1 07 authenfification et websockeft avec node js express et socket io http w http erichidelman tumbir com post 314866 0538 creating webm video from getusermedia http stackoverflow com search g nodeis Page 43 R sum Notre projet consiste cr er une application web qui fournit la surveillance d une pi ce gr ce l utilisation de la webcam L utilisateur doit seulement se connecter suite une inscription ef ensuite lancer la surveillance Lors du lancement il a le choix d activer le streaming ce qui lui permet via une autre machine d avoir acc s aux images de sa webcam Lors de la detection de l intrusion un email est envoy l utilisateur avec limage captur e Les langages utilis s pour cette application sont le JavaScript particuli rement pour coder le serveur ainsi que le php et l HTML Pour le codage du serveur nous avons Utilis le framework NodeJS Mol cl s NodeJS JavaScript HTMLS Surveillance Summary Our project is to create a web application that provides monitoring
20. des l ouverture de la page web 2 D tection de mouvements La d tection s effectue en JavaScript Voici le principe de calcul pour d tecter les images on va soustraire pixel par pixel l image actuelle avec l image pr c dente On va ensuite lire limage finale Si fous ses pixels sont noirs il n y aura pas eu de mouvement Sinon on verra des zones de lumi res car un mouvement aura alors cr e un d calage Voici la base du programme de detection de mouvement Il est largement bas sur des programmes d j existants sur le web Voici sa description En entr e il y a trois tableaux Target datal et data2 Target contient le r sultat de la soustraction datal contient l image actuelle de la webcam data2 contient l image pr c dente de la webcam Ces tableaux sont aplatis et contiennent les valeurs de l image la fois dans le rouge le vert le bleu ef l alpha L ordre est tel qui suit pixels 0 rouge pixels 1 vert pixels 2 bleu pixel 3 alpha pixel 4 rouge pixel n 2 pixel 5 vert pixel n 2 ainsi de suite Il y a donc 4 cases par pixel Dans la fonction suivante differenceAccuracy apr s moyenage des 3 elements de chaque pixel nous soustrairons les deux images en appliquant un filtre de min max avec un seuil de gris chois issu de tests afin d obtenir une image compos Page 18 uniquement de noir et de blanc Le but est de calculer rapidement des diff rences issues de mouvements Ce
21. e la socket Page 27 So if data 0 0 EE i EZ console logq i Un m teur est connect 3 On enregistre l m teur s il est nouveau 2f femeteurslidentitiant undetined i 56 f emeteurs pushlidentifiant 37 emeteursl identifiant gt socket 55 on sort si l m teur wiens d arriver 59 50 On envoie au recepteur s il existe 6 1 else sz rl i 63 ZF recepteurs identiliant undelined o i i 65 Console logi Un r cepteur est d tect 5 Jim fabrique 1l image br var donnees T bo for i itl i lt data length i 6a H i TO donnesst dataf il gi TE recepteurs identifiant sendi donnees T3 vo H TS H Si Un metteur se connecte et qu il est nouveau donc non d finit on le d clare S il est connu on regarde si un r cepteur s est abonn lui et si oui on lui transf re la vid o CRC CLAC Yo 79 On cherche l identifiant correspondant au MDF et Email r cup o0 fEDDb on chope SESSIONIDAPPACHE depuis MAIL MDP ol On enregistre le recepteur s il est nouveau if recepteurzs identifiant undefined mE 54 Nrecepteurs pushlidentifiant 25 recepteursl identifiant gt socket Gh H D oo og SSERA EXECUTE A LA FERMETURE DE CE SOCKET g0 socket on close function I i 91 console logf Someone is gone q 2 yio Si un r cepteur et non un metteur s est connect on l enregistre Page 28 Cote Clien
22. e se rendre ind pendant des divers fournisseurs d acc s possibles de la futur plateforme du serveur nous avons choisis d h berger en local notre propre serveur SMTP Ce serveur permet l envoi d email direct Ceci nous permet de g rer au mieux notre trafic e R solution maximum Webcam Notre choix de r solution Webcam est le r sultat d un compromis entre la qualit d image et la ressource n cessaire au calcul de mouvement Ce choix est galement pris selon la quantit de donn e transmettre au serveur en cas d infrusion f D tection d image en local Afin d alleger le serveur toute la d tection d image est faite sur l ordinateur du client en JavaScript Seul l envoi de l image par email est assur par le serveur Apache Page 14 3 Organisation du projet A partir de l analyse du besoin de nos choix techniques et des outils de gestions nous avons pu r partitif les taches et d finir des r gles d organisation a D coupage et planification des t ches Pour la r partition des t ches nous avons utilis s le planificateur d quipe du logiciel Ms Project dont voici l affectation de chaque membre du projet aux taches HUET Geoffroy R alisation de la page web de test Cr ation de la base de donn es Cr ation du formulaire d inscription et authentification des clients Archivages des donn es d inscription et s curit des donn es intrusions Elaboration du Design du site feuille de style CSS
23. envoie qu une seule r ponse if mysql nom rows Sreq 1 i Si c est le cas on comparera le mot de passe fournie par l utilisateur qu on aura pr alablement crypt et celui de la base de donn es S ils sont gaux on passera une variable de session 1 et on redirigera l utilisateur vers la page principale Page 32 if data mdp J Nif si l user n existe pas ES Del erreur ukrreuc email mot derm g header Location index php else si l user existe if datal mdp mdp mdp bon s hu l n si 1 Cette page affichera son contenu uniquement si la variable de session est gale 1 sinon elle proposera un lien vers la page d authentification Pour le test de v rification afin que les champs soient bien remplis par l utilisateur on utilise l attribut required fournis par HTMLS lt input styvle height 40pr type text placeholder Email required name username id username gt Enfin afin de ne pas se faire pirater la base de donn es on cr er un utilisateur qui a uniquement les droit de s lection d insertion et d update user Oui SELECT INSERT UPDATE 7 T l chargement de la photo Lors de la detection de mouvement on ouvre Un pop up qui telechargera la photo gr ce la fonction window open window open popup php DL capture config height 500 width 500 toolbar n0 menubar no scrollbars eno resizablesno location no directories no
24. es de la part du serveur socket new WebSocket ws 10ocalhost 3000 socket onmessage function event image src event data l On peut afficher les donn es de l event contenant l image directement dans Un convo Examinons maintenant le code cot serveur Ici se trouve un exemple d une diffusion basique d un streaming de vid o quiconque se connecte la websocket Page 24 12 var clients 73 var websocketServer ws attach httpServer 14 BwebsocketServer onf connection function socket 25 clients push socket 16 console log connected 771 H socket on message function data 78 E clients forEach function client 19 client send data 80 P 81 1 83 F socket on close function a4 console logt closed Ci T n DI Ligne 73 on associe notre variable webSocke Server au serveur http cr e pour intercepter tous les requ tes clientes Ligne 74 On associe l v nement connection de la websocket erver nouvellement cr e le sous programme qui est d crit de la ligne 75 la ligne 86 Ainsi d s qu un nouveau client se connecte il est enregistr dans le tableau clients et le message connected s affiche sur la console du serveur La ligne 77 81 d crit le programme qui doit s ex cuter dans le cas d envoi de donn du client note dans notre programme final on devra selon qui il est agir en cons quence Ici
25. est appel e des la connexion la page web index Les lignes 213 et 214 font appelles au canvas qui contiennent les vid os S en suis une activation du streaming apr s v rification si le client veut effectuer un streaming Cot graphique ce choix sera assur par un checkbox et on r cup re sa valeur Une fois cette v rification faite on tablit la communication avec le serveur gr ce une socket et on envoi la vid o gr ce la fonction StreamVideo Page 30 Zoom sur la fonction SfreamVideo 203 function streamVideo 204 205 var MonTableau new Array 0 MEC1 canvasSource toDataURL 206 socket send MonTableau 207 socket send canvasSource toDataURL 208 timeOut2 setTimeout streamVideo 10 209 Remarquez la ligne 205 qui cr e un tableau associatif contenant l identifiant du client 1 son pseudonyme MECI et la vid o qu il compte envoyer qui a t pr alablement convertit en URL fonction toDataURL fournit par HTML C est ce tableau qui diff re de la premiere version ligne 207 ou on envoyait directement les flux vid o sans distinction Avec le tableau associatif on sait maintenant qui envoi la vid o et par post traitement c te serveur on sait pour qui elles sont destin es 6 Authentification et s curit Pour le syst me d authentification l utilisateur qui arrive sur la page d accueil la possibilit de soit se connecter si il poss de d j un
26. etection de ImGUV DImSniSu a nn 18 u EVO Y usan uuu E A sss sss 20 A Be One ee a o ERE RED SEES REJER 22 ISIS sasi ee een ee 23 A theniicaion er secure een ee 31 7 T l chargement de la photo ss 33 V Description de l apr s d veloppemenl 35 le PreseniGlioer au programme uuu uuu de nn te tb ts 39 2 Monueld OflisaHorn core Ce ee ee 38 3 Manuel d installation cot serveur 39 CONSO EE 40 1 Programme attendu programme linql 40 Pooe 3 2 BESONE HOR FETS AUS ee ee on 0e 41 3 PA OO ee ee 41 RO ER J u S u ee u n 42 WERTEN WINNIE a sss 43 RS sss 44 SEE D AUS gt uuu u A D n Sasu Er Susu s 44 F li L SS s ee s 45 l Pr somption de OR OU eee e esse nens ennen seen ennen enes eee nes se 45 2 MEJHODEDES ANTE EDEN en 48 3 Organigramme SCHNUR nennen 49 4 Organigramme technique PRE seven egene seernes een even sneen ere renees 50 3 Diagramme PER uuu a ee a 51 Poge 4 INTRODUCTION Dans le cadre des Projets p dagogiques nous avons choisi de nous int resser la vid o surveillance en ligne La surveillance n est plus une affaire d inspection p riodique des lieux comme autrefois l existe maintenant les syst mes d alarmes de videosurveillance qui aident les agents de surveillances c
27. ive Elles sont class es par date ainsi que par source c Sauvegardes des versions du projet Deux r pertoires existent e Un premier r pertoire ou se trouve chacune des versions du programme Une nouvelle version du programme est cr e chaque nouvelle fonctionnalit ajout e e Un second qui regroupe chacune des fonctionnalit s prise part du programme ainsi que leurs volution Cette architecture permet de cr er et tester chaque fonctionnalit comme l envoi d email ou la d tection de mouvements de fa on s par et isol avant leurs rajouts au projet global d Id es et solutions Un autre document sur Google drive permet de stocker toutes les id es de chacun Page 16 IV Description du d veloppement phase de r alisation 1 Acquisition vid o L acquisition des images de la webcam ne n cessite pas de logiciel special En effet depuis la sortie d HTML5 cette nouvelle version permet de r cup rer les flux vid o et audio de tous les p riph riques pr sent sur l ordinateur partir d un simple navigateur web Cependant cette nouvelle fonction n est pas totalement support e par tous les navigateurs Heureusement trois des navigateurs les plus utilis s tels que Chrome Opera dans le monde du mobile et derni rement Firefox supportent cette fonction navigator getUserMedia constraints successCallback errorCallback Cette fonction demande l utilisateur si il veut activer ses p riph riques
28. jax open POST envoyerEmail php false ajax setRequestHeader Content Type applicafion upload ajax send canvasData Voici la fonction d emailing en Php lt php Reception de l image imageData GLOBALST HTTP RAW POST DATA Supression des en t tes Page 20 filteredData substr fimageData strpos imageData 1 On decode les donn es unencodedData base64_decodel filteredData On renseigne les coordonees de l expedieur et de l envoyeur email_expediteur doNotReply cctv com email_reply doNotReply cctv com message_texte Bonjour n n Un mouvement a t d tect Vous trouverez ci joint la photo associe destinataire joubertadrien gmail com email de test dans le futur on ira chercher depuis le num ro de session php le v ritable email dans la BDD sujet Surveillance WEBCAM Mouvement d tect message_html lt htmi gt lt head gt lt title gt Titre lt title gt lt head gt lt body gt lt body gt lt html gt Frontiere entre email texte et html frontiere md5 unigid mt rand Headers de l email headers From Nom lt gemail_expediteur gt n headers Return Path lt gemail_reply gt n headers MIME Version 1 0 n headers Content Type multipart mixed boundary frontiere message cot texte message This is a multi part message in MIME format n n message
29. le lancement de la surveillance en secondes D marrer Choisir les options d sir es et d marrer la surveillance et n oublier pas de v rifier vos emails de temps en temps 3 Manuel d installation cot serveur La machine qui h bergera l application doit avoir l API nodeJS d install htip nodeijs org II lui faudra galement Wamp serveur avec la base d clar sous phpmyadmin ainsi qu un serveur SMTP pour l envoi d emails II lui faudra enfin la copie de tous nos sources Une fois Apache et Node lanc le serveur est pr t Page 39 CONCLUSION 1 Programme attendu programme final Rappel des objectifs L objectif de ce projet est de r aliser l aide du framework JavaScript Node js et la technologie HTML 5 une application WEB permettant d effectuer des op rations de vid o surveillance distance L application finale devra permettre un utilisateur de s enregistrer sur un site Web et d utiliser la webcam de son ordinateur ou la camera d un Smartphone pour faire de la vid o surveillance sans avoir installer la moindre application On pourra imaginer que l application WEB envoie des alertes en cas de d tection d intrusion De m me pour des raisons de s curit les images pourront tre sauvegard es sur un serveur distant RapidShare DropBox De m me dans la version finale on pourra tester l application sur une carte embarqu e de type Raspberry PI Par rapport aux objectifs at
30. mes et standards S agissant d un site internet il devra s appuyer sur les standards du web et devra se plier aux normes du W3C World Wide Web Consortium Page 10 Il Description de l avant d veloppement 1 Synth se des outils de gestion Gr ce au diagramme de la partie Il 2 on peut avoir une premi re vue g n ralis e du projet L organigramme ci dessous d montre le fonctionnement g n ralis du syst me final Detection mouvement R cup flux vid o Afin de mieux synth tiser le fonctionnement du syst me et mieux d finir les fonctions constructives du systeme de videosurveillance on q repr sent un diagramme FAST Page II Diagramme de GANTT Zoom avant Zoom arri re Aujourd hui v Reculer Avancer Afficher le chemin critique instantan s du projet 12019 2013 semaine 495emaine semaine 51 Semaine 525emaine 1 Semaine 2 semaine 3 Semaine 4 Semaine 5 Semaine B semaine 7 Semaine amp Semaine 3 Semaine 10Semalne 11Semaine 125emaine 13 Date de debut Date de fin 1031212 1022 42202 244242 3202 07043 430483 241013 280483 D40283 440283 4802803 250283 D40383 440383 480683 250393 e Acquisition vid o 0412142 041212 U a CodageSeneurNodels 261212 2622 i amp Pages web de tests 121212 12 12 12 p a Gestion des requ tes 2642142 2611212 Revoi des pages web 090113 090113 R cup ration des fuxvideos 090143 230143 Berre Enregistrement vid o etou 16 01
31. mpte la r solution pour ne pas avoir Une image trop floue et ne pas avoir de d calage de la vid o lors du streaming Fonction Technique 2 2 Traiter les images L analyse des images en cas d infrusion doit tre fait coter client il est inutile d encombrer le serveur avec les analyses car le transit de flux vid o encombre d j assez le serveur Lors du traitement l image doit tre binariser car on soustrait deux images entre elles afin d obtenir un seuil critique qui servira de r f rence au d clenchement des prises de photos lors d une intrusion Fonction Technique 3 1 Signaler l intrusion En cas d intrusion une prise de photo doit s ex cuter automatiquement suivit d un envoi par email des photos prises On doit pouvoir faire une distinction entre les adresses mails des clients Fonction Technique 3 2 T l chargement local des photos De m me que pr c demment mais l intrusion d clenche en plus de l envoi par emails Un t l chargement sur la machine locale des photos prises e Fonction Technique 4 accessoire Acc der la camera depuis l ext rieur Depuis un autre ordinateur connect internet et muni de l adresse email et du mot de passe d crit lors du lancement de l application il devra tre possible de visionner en direct et distance ce que filme la webcam f Fonction Technique 5 accessoire Identifier et s curiser Pour lancer l application l utilisateur doit communi
32. n ID session varchar 30 y latin1 swedish ci Non Aucun etat stream Int 1 Mon Aucun Page 22 Nous trouvons dans la fable users e Une cl primaire ID qui s quto incr mente e L email de l utilisateur de type varchar e Le mdp crypt choisi par l utilisateur de type varchar e L id de session de l utilisateur de type varchar e L tat du Stream un bool en qui permet de savoir si l utilisateur a choisi l option Stream nb son utilit sera peut tre modifi e d ici la livraison 5 Streaming Le streaming bien que fonctionnalit bonus est la partie la plus technique a Principe Notre syst me de videosurveillance doit permettre au client de visualiser la zone surveiller n importe quel moment et n importe oul Toutefois cette possibilit n est envisageable que si le client poss de un Smartphone o un ordinateur connect internet Pour pouvoir assurer le streaming des flux vid o on a utilis un serveur cod en Javascript Utilisant l API NodeJS Le principe du streaming est de capturer les vid os depuis le navigateur et de faire transiter ce flux vid o au server afin que celui ci renvoi le flux vid os vers une page de r ception Le client pourra alors acc der cette vid o via son Smartphone ou son ordinateur Cette br ve description sugg re deux choses e Un canal de discussion entre la page d envoi ef le serveur e un autre canal d change entre le serveur et la page de r ception Ai
33. nsi le serveur ne stocke pas les flux vid o mais les redirige Pour pouvoir communiquer avec le serveur on utilise une websocket NodeJs propose plusieurs librairies de websocket toutes bas es sur la librairie de d part savoir socket io Page 23 b Exemple d utilisation Voici ici un exemple simple du fonctionnement des websocket et de nodeJS Nous avons choisi d utiliser websocket io qui d pend bien videment de socket io mais qui dispose de ses propres m thodes socket new WebSocket ws localhost 8000 socket onopen function setUpVideo La figure ci dessus illustre l ouverture du canal de communication depuis l ordinateur qui envoi la vid o vers le serveur socket onopen est l v nement qui est d clench lors de l ouverture de la socket Il faut lui attacher un sous programme Par exemple ici setUpVideo pourrait tre un envoi en boucle de la vid o Ainsi d s lors de l ouverture de la socket la vid o serait envoy socket send data Evidemment lors de l h bergement du site il faudra changer localhost par l IP de la machine hebergeant le serveur nodeJS La vid o est maintenant envoy e au serveur qui s occupe de la rediriger vers le r cepteur Ainsi cot r cepteur on a le m me syst me d abonnement de code Au lieu d avoir Un v nement du type socket onopen on q un v nement socket onmessage qui se d clenche lorsque le client re oit des donn
34. ons Une plus large gestion des streaming Le lof 1 pourra traiter de la compression de vid o la vol e ainsi que la communication P2P entre 2 client dechargeant le serveur tout en am liorants la connexion comme la qualit de la vid o La stabilit du serveur pourra galement tre am lior e Page 41 BILAN DU PROJET Ce projet nous q permis de programmer en Javascript Un Cours qui ne fait pas partie du programme de programmation internet de l ISTIA Les connaissances en programmation web utilis es ont t multiples et ce projet a t l occasion d en faire la synth se et de les appliqu es Cela nous a permis d enrichir notre exp rience De m me on a pu d couvrir que faire du JavaScript cot serveur est d sormais possible gr ce l API NodeJS Le travail en quipe tant quelque chose d essentiel pour un ing nieur il tait aussi tr s int ressant de confronter les id es sur une situation qui bloquait l avancement du projet et en particulier sur le streaming Pour finir cette exp rience nous a permis de d velopper notre capacit d adaptation dans un environnement o nous n avions pas particuli rement de connaissances ce qui pourra nous servir d exp rience lors d insertion dans le monde professionnel et notamment lors de nos premi res p riodes de stage Page 42 Webographie http nodeis org http my opera com core blog 2011 03 23 webcam orientafion preview http people opera com daniel
35. quer son email peut accessoirement indiquer un mot de passe s il souhaite pouvoir visionner sa camera depuis un autre ordinateur Pour visionner une camera sous surveillance l utilisateur devra indiquer l email et le mot de passe qui auront t entre lors du lancement de application Page 9 4 Description des contraintes a Contraintes organisationnelles Dans une supposition de mise en ligne permanente la mise en place du site devra alors n cessiter la location d un serveur d un nom de domaine ainsi que d un service d emailing b Contraintes techniques Le serveur devra tre sur liste blanche des adresses envoyant des emails afin que ses emails ne soient pas consid r s comme du spam Le serveur devra disposer d une bande passante lui permettant le mulfi stream ainsi que l emailing Il devra galement disposer d un serveur SMTP L utilisateur doit avoir Un navigateur compatible pour la diffusion et la r ception des flux tant sur le web l application aura comme contraintes de r sister aux formes d infrusions les plus connus du grand public injection SQL c Contraintes r glementaires et l gales Comme toute application web elle devra pr server la vie priv e des utilisateurs et se plier la loi relative l informatique aux fichiers et aux libert s du 6 janvier 1978 Le programme dont certaines parties sont sous licences LGPL ainsi que licence du MIT devra s y conformer d Contrainte des nor
36. s diff rences image d un mouvement sont exprim s en pourcentage travers la variable indicateurMouvements Le seul de detection partir duquel un email sera envoy est de 2 Voici le programme de d tection de mouvement function differenceAccuracy Target datal data2 if datal length data2 length return 1 var i 0 var indicateurMouvements 0 while i lt data1 length 0 25 var averagel data1 4 i data1 4 i 1 data1 4 i 2 3 var average2 data2 4 i data2 4 i 1 data2 4 i 2 3 var diff threshold fastAbs averagel average2 Target 4 i diff Target 4 i 1 diff Target 4 i 2 diff Target 4 i 3 OxFF i if diff 0xFF indicoleurMouvements indicateurMouvements indicateurMouvements datal length 100 return indicateurMouvements Page 19 function threshold value return value gt 0x15 OxFF 0 Le programme appelant celui ci est ex cut 30 fois par seconde et envoi un email si le seuil de detection de 2 est d pass 3 Envoi d emails Lors de la d tection d une intrusion l image est communiqu e au serveur en Ajax Celui ci l aide de son serveur SMTP peu alors envoyer l image en attach l mail indiqu lors du lancement du stream Voici la fonction d envoi de l image en Ajax en JavaScript function envoyerMail var canvasData canvasSource toDatauRL image png var ajax new XMLHttpRequest a
37. t Page de r ception 10 11 FF PB FF FF F F F C0 J oi MA Pj Hs w MM e O 0 MI bb bb Pr P m im D i _T La page de r ception ne diff re de la premiere version que par l utilisation d un tableau de socket qui est la ligne 17 qu on envoi au serveur via la socket de connection Dans le code pr sent ci dessus le tableau ligne 17 prend en param tres deux champs 1 pour l identifiant et MEC1 pour son pseudonyme par exemple Evidemment dans le code final il faudra modifier les param tres du tableau window onload function image document getElementByldi image socket new WebSocket uwus localhost S080 f On s identifie aupr s du Serveur socket onopen function j i var NonTableau ne LEray MiM MEC1 socket sendi iMonTableau f On receptionne l image Socket onmessage funcEron event i image src event data falert levent data 9 i avec les variables ad quates Page 29 Page d envoi 211 function start Pa 213 S canvasSource show 214 S canvasBlended show 215 update 216 Lancement du stream 217 if activerStream 1 218 E 219 socket new WebSocket ws 127 0 0 1 8050 220 socket onopen function 22 le 222 streamVideo 223 Fr 224 E 225 socket onmessage function event 226 I 22 1 serverDemandeStream event data 228 Beer 229 230 Cette fonction
38. tendu le rendu final du projet r ponds aux exigences suivantes e op rations de vid osurveillance e Enregistrement sur le site web e Utilisation de la webcam pour des op rations de vid osurveillance Aucune application installer e Envoi d alerte d intrusion email e T l chargement des photos d intrusions sur la machine locale ainsi que des vid os Par contre pour des raisons de confidentialites et de s curit et pour respecter la loi concernant la vie priv e nous n avons pas voulus sauvegarder les images d infrusions sur un serveur distant tel que DropBox ou RapidShare En effet nous avons pr f r envoyer les images en pi ce jointes dans les emails d alertes Page 40 Un des bemols de ce projet tait la visualisation des flux vid o donc du streaming sur Un Smartphone Cette op ration ne fonctionne malheureusement pas totalement car il faut que les Smartphones aient tous le navigateur op ra d installer ou d faut le navigateur chrome Comme pr cis pr c demment d un point de vue technologique nous avons r alis ce projet l aide du framework JavaScript Node js pour la cr ation du serveur et de la technologie HTML 5 pour ce qui est de l utilisation de la webcam Enfin nous n avons pas eu le temps de mettre en place le teste de l application sur une carte embarqu e de type Raspberry PI 2 Besoins non retenus La communication en email d une vid o en plus de la photo 3 Am liorati
Download Pdf Manuals
Related Search