Desarrollo de un sistema de videoconferencia en HTML 5.0

T abajo Fin de G ado Escuela de Ingenie ía In o má ica Uni e sidad de Las Palmas de G an Cana ia Desa ollo de un sis ema de ideocon e encia en HTML 5.0 Au o : José Albe o Jino ia Fe nández Tu o : Ja ie Sánchez Pé ez Las Palmas de G an Cana ia Diciemb e 2013 T abajo Fin de G ado ealizado en la Escuela de Ingenie ía In o má ica de la Uni e sidad de Las Palmas de G an Cana ia, pa a la consecución del í ulo de Ingenie o In o má ico. Tí ulo: Desa ollo de un sis ema de ideocon e encia en HTML 5.0 Alumno: José Albe o Jino ia Fe nández Tu o : Ja ie Sánchez Pé ez Fecha: Diciemb e, 2013 Es e un p oyec o sin ánimo de luc o basado en la pla a o ma de so wa e lib e WebRTC y HTML5.0. Ag adecimien os A mi amilia, po sabe me guia en la ida po el camino co ec o y habe se sac i icado mucho, siemp e pensando en mi po eni . A mis p o eso es, en especial a José Juan He nández y a mi u o Ja ie Sánchez po su ayuda en mues a de o mación como p o esional. A mis amigos, en especial a Da iel Rod íguez y Daniel Ocaña. A la Uni e sidad de Las Palmas, po habe me acogido como es udian e y o mado has a la culminación de mis es udios. Índice gene al P e acio ......................................................................................................................................... 8 1 In oducción .......................................................................................................................... 9 1.1 Mo i ación y obje i os .................................................................................................. 9 1.2 Obje o de es udio .......................................................................................................... 9 1.3 Campo de acción ........................................................................................................... 9 1.4 Hipó esis ...................................................................................................................... 10 1.5 Apo aciones ............................................................................................................... 10 1.6 O ganización del documen o ...................................................................................... 10 2 Es ado ac ual del a e .......................................................................................................... 12 2.1 WebRTC ....................................................................................................................... 12 2.1.1 His o ia ................................................................................................................ 12 2.1.2 De inición ............................................................................................................ 12 2.1.3 Diseño .................................................................................................................. 12 2.2 Sis emas de ideocon e encias más usados a ni el mundial ...................................... 13 2.2.1 Skype ................................................................................................................... 13 2.2.2 Google Hangou s ................................................................................................. 14 3 Recu sos u ilizados .............................................................................................................. 15 3.1 Recu sos so wa e ....................................................................................................... 15 3.1.1 He amien as ....................................................................................................... 15 3.1.2 Lenguajes de p og amación ................................................................................ 16 3.2 Recu sos ha dwa e ...................................................................................................... 16 3.2.1 Ha dwa e de los clien es ..................................................................................... 17 3.2.2 Ha dwa e de los se ido es ................................................................................. 17 4 Plani icación del abajo ...................................................................................................... 18 4.1 Me odología de desa ollo .......................................................................................... 18 4.2 Plani icación y empo ización ..................................................................................... 20 4.3 P esupues o ................................................................................................................ 21 4.3.1 Cos e del ha dwa e ............................................................................................. 21 4.3.2 Cos e del so wa e............................................................................................... 21 4.3.3 Cos e del pe sonal ............................................................................................... 22 4.3.4 P esupues o o al del p oyec o ........................................................................... 22 5 Desa ollo del abajo.......................................................................................................... 23 5.1 Modelo del dominio .................................................................................................... 23 5.2 Lis a de ca ac e ís icas ................................................................................................ 24 5.3 Requisi os del so wa e ............................................................................................... 28 5.3.1 Ac o es ................................................................................................................ 28 5.3.2 Modelo de casos de uso ...................................................................................... 28 5.3.3 Especi icación de casos de uso ............................................................................ 31 5.3.4 P o o ipos de in e az de usua io ........................................................................ 35 5.4 Modelo de análisis ...................................................................................................... 41 5.4.1 Diag ama de clases .............................................................................................. 41 5.4.2 Diag amas de colabo ación ................................................................................. 47 5.5 Modelo de diseño........................................................................................................ 53 5.5.1 A qui ec u a del sis ema ..................................................................................... 53 5.5.2 Diag amas de clases ............................................................................................ 54 5.5.3 Diag amas de secuencia ...................................................................................... 62 5.6 Implemen ación .......................................................................................................... 70 5.6.1 P ime os pasos con CMS Elgg.............................................................................. 70 5.6.2 Lo más impo an e es á po llega . WebRTC y HTML5 ....................................... 71 5.6.3 In eg a las dos aplicaciones pa a que pa ezcan una ......................................... 71 5.7 P uebas ........................................................................................................................ 72 6 Conclusiones y abajo u u o ............................................................................................. 74 Anexo I: Compe encias ................................................................................................................ 75 Anexo II: Legislación igen e ....................................................................................................... 77 Anexo III: Manual de usua io ...................................................................................................... 79 Anexo IV: En o no de Desa ollo ................................................................................................. 84 Bibliog a ía .................................................................................................................................. 91 8 P e acio El documen o expone un abajo de in g ado de la ca e a G ado en Ingenie ía In o má ica, el cual iene como obje i o desa olla un sis ema de ideocon e encias a a és de HTML5.0. Con es e abajo se p e ende amplia el uso de la web 2.0, la democ a ización de las comunicaciones, y log a que los usua ios puedan comunica se de una o ma comple amen e lib e, sin necesidad de ins alación o ac ualización de so wa e de e ce os. Basado en la me odología expues a en el P oceso Uni icado de Desa ollo de So wa e (PUD), se siguen odos sus p ocesos y lujos de abajo, gene ando los p oduc os y u ilizando las écnicas y he amien as que p opo ciona la misma. Se escoge el CMS1 Elgg con el obje i o de log a el compo amien o de una ed social donde los usua ios puedan in e ac ua en e sí, lib emen e y con mayo usabilidad. También se mues a la con igu ación del se ido web Node.js y de uno de sus módulos, socke .io, como he amien a de ayuda al na egado pa a log a la señalización. Además se hace uso de las APIs2 de webRTC y de los elemen os que b inda HTML5 pa a desa olla el sis ema de ideollamadas. 1 Sis ema de ges ión de con enidos. 2 In e az de p og amación de aplicaciones. 9 1 In oducción Una ideocon e encia es una conexión mul imedia en e dos o más pe sonas que pueden e se, oí se e in e cambia ecu sos aunque es én sepa adas geog á icamen e. Su uso posibili a la ealización de euniones con g upos de pe sonas si uadas en luga es alejados en e sí, pe mi iendo el in e cambio de in o mación g á ica, ans e encias de a chi os, de ídeo, de oz, hace p esen aciones, se icio de a ención al clien e, e c. Las ideocon e encias basan su eje ecnológico en la comp esión digi al de los lujos de audio y ideo en iempo eal. Su uso o ece una solución accesible a la necesidad de comunicación. Los sis emas ac uales pe mi en en ia y ecibi in o mación isual y sono a en e dos pun os que se encuen an en zonas di e en es, e i ando así los gas os y pé dida de iempo que implica el aslado ísico de la pe sona. (1) Es as en ajas hacen a la ideocon e encia el segmen o de mayo c ecimien o en el á ea de las elecomunicaciones. 1.1 Mo i ación y obje i os En la ac ualidad, las limi aciones écnicas ales como el sonido de icien e, la mala calidad de las imágenes, la poca iabilidad, la complejidad y el cos e han quedado a ás, dando luga a ideocon e encias con al a calidad de audio, ideo, ans e encia de a chi os y con un cos e accesible a la mayo ía de los in e esados. (2) Con HTML5.0, apa ece la posibilidad de ealiza ideocon e encias sin la necesidad de ins alación de so wa e. Es e lenguaje in oduce sopo e in eg ado pa a el con enido mul imedia g acias a los elemen os de audio y ideo, o eciendo la posibilidad de inc us a es e ipo de con enido en páginas HTML. El obje i o p incipal del abajo es: desa olla una aplicación mul ipla a o ma de ideocon e encias en HTML5.0. Pa iendo del mismo se aza on los siguien es obje i os secunda ios:  U iliza las ecnologías disponibles pa a el desa ollo de un sis ema de comunicación en en o no web.  Log a una comunicación P2P p i ada en e dos pe sonas.  C ea una aplicación web que cen alice la ges ión de las comunicaciones en e los usua ios. 1.2 Obje o de es udio Pa a la ealización de es e abajo se plan ea como obje o de es udio:  La u ilización de las APIs de WebRTC pa a el desa ollo de sis emas de comunicación en iempo eal. 1.3 Campo de acción Den o del obje o de es udio se de ine como campo de acción:  El desa ollo de sis emas de comunicación con audio y ideo median e la in eg ación de las APIs de WebRTC y HTML5. 16 3.1.2 Lenguajes de p og amación  Ja asc ip Ja asc ip (a eces ab e iado como JS) es un lenguaje lige o, in e p e ado y o ien ado a obje os, más conocido como el lenguaje sc ip pa a páginas web. El es ánda de Ja aSc ip es ECMASc ip . A pa i de 2012, odos los na egado es mode nos sopo an comple amen e ECMASc ip 5.1. Los na egado es más an iguos sopo an al menos ECMASc ip 3. Una sex a e isión del es ánda es á en p oceso. (12)  HTML5 El lenguaje de ma cado de la Wo ld Wide Web ha sido siemp e HTML. Fue diseñado p incipalmen e pa a desc ibi semán icamen e documen os cien í icos, sin emba go, su diseño gene al y adap aciones en los úl imos años han pe mi ido que sea u ilizado pa a ep esen a o os ipos de documen os. En 2006, el W3C mani es ó su in e és de pa icipa en el desa ollo de HTML5 y en 2007 o mó un g upo de abajo pa a desa olla la especi icación HTML5.0. Apple, Mozilla y Ope a pe mi ie on que W3C publica a la especi icación bajo el copy igh W3C, man eniendo una e sión con licencia menos es ic i a en el si io WHATWG. Es a nue a especi icación inco po a in e esan es capacidades Ja asc ip , que aumen an la capacidad de almacenamien o en e a las cookies que dejaban ecopila algunos kiloby es. Aho a se puede consegui un almacenamien o en e 5 y 10 megas, dependiendo de la pla a o ma. Además, HTML5 pe mi e múl iples Ja asc ip s ejecu ándose en pa alelo en la misma página, hace posible la inse ción de audio y ideo de o ma di ec a y la geolocalización del usua io. (13)  CSS Hojas de Es ilo en Cascada (Cascading S yle Shee s), es un mecanismo simple que desc ibe cómo se a a mos a un documen o en la pan alla y la o ma en que se a a imp imi . Es a o ma de desc ipción, o ece a los desa ollado es el con ol o al sob e es ilo y o ma o de sus documen os. CSS se u iliza pa a da es ilo a documen os HTML y XML, sepa ando el con enido de la p esen ación. Pe mi e a los desa ollado es con ola el es ilo y el o ma o de múl iples páginas web simul áneamen e. Cualquie cambio en el es ilo ma cado pa a un elemen o en la CSS, a ec a á a odas las páginas inculadas a esa CSS en las que apa ezca ese elemen o. (14)  PHP PHP (Hype ex P ep ocesso ) es un lenguaje de código abie o muy popula , especialmen e adecuado pa a el desa ollo web y que puede se inc us ado en HTML. Las páginas web que usan PHP se a an igual que páginas HTML comunes y co ien es, se pueden c ea y edi a de la misma mane a que no malmen e se c ean páginas HTML. PHP es á en ocado p incipalmen e a la p og amación de sc ip s del lado del se ido , po lo pueden ealiza se uncionalidades incluidas en o os lenguajes de p og amación, como ecopila da os de o mula ios, gene a páginas con con enidos dinámicos, en ia y ecibi cookies; aunque PHP puede hace mucho más. (15) 3.2 Recu sos ha dwa e El p oyec o ue desa ollado desde un o denado pe sonal ma ca HP G62 con las siguien es ca ac e ís icas:  P ocesado In el Co e i5.  Memo ia RAM 4 GB DDR2.  Pan alla de 15,4 pulgadas.  Sis ema Ope a i o: Windows 7 Home Edi ion. 17 3.2.1 Ha dwa e de los clien es  O denado po á il con webcam y mic ó ono incluido.  O denado de sob e mesa con cáma a web y mic ó ono inco po ado.  Ta je a Wi i o Placa de Red E he ne compa ible.  Conexión a in e ne a a és de ADSL o 3G.  Disposi i o mó il con And oide 2.4 o e siones pos e io es y cáma a on al. 3.2.2 Ha dwa e de los se ido es  P ocesado : Pen ium 4 o supe io .  Memo ia RAM: 2 Gb.  Disco Du o: 5GB disponibles.  Placa de Red: E he ne compa ible.  Velocidad de subida y bajada de da os supe io a 5mb.  Red LAN que sopo e TCP/IP (en gene al, In e ne ). 18 4 Plani icación del abajo En es e capí ulo se abo da la plani icación y empo ización del abajo. Se explica la me odología u ilizada pa a ealiza el sis ema de ideocon e encias, la es imación del iempo de ejecución de las a eas, así como un ap oximado del cos e pa a el desa ollo de la aplicación. 4.1 Me odología de desa ollo  P oceso Uni icado de Desa ollo (PUD) Es una me odología de desa ollo de so wa e basada en componen es e in e aces bien de inidas, que unida al Lenguaje Uni icado de Modelado (UML), cons i uye la me odología es ánda más u ilizada pa a el análisis, implemen ación y documen ación de sis emas o ien ados a obje os. Es un p oceso que puede especializa se pa a una g an a iedad de sis emas de so wa e en di e en es á eas de aplicación, dis in os ipos de o ganizaciones, a iados ni eles de ap i ud y amaños de p oyec o. RUP no es un sis ema con pasos i memen e es ablecidos, sino un conjun o de me odologías adap ables al con ex o y necesidades de cada o ganización. Es el esul ado de a ios años de desa ollo y uso p ác ico, en el que se han uni icado écnicas de desa ollo a a és de UML y abajo de muchas me odologías u ilizadas po los clien es. La e sión que se ha es anda izado io la luz en 1998 y se conoció en sus inicios como P oceso Uni icado de Ra ional 5.0 (RUP), de ahí las siglas con las que se iden i ica a es e p oceso de desa ollo. (16)  Di igido po Casos de Uso Un caso de uso es un agmen o de uncionalidad del sis ema que p opo ciona un esul ado de alo pa a el usua io. Los casos de uso modelan los eque imien os uncionales del sis ema. Todos los casos de uso jun os cons i uyen el modelo de casos de uso. Los casos de uso ambién guían el p oceso de desa ollo (diseño, implemen ación y p ueba). Basándose en los casos de uso, los desa ollado es c ean una se ie de modelos de diseño e implemen ación que lle an a cabo los casos de uso. De es e modo, los casos de uso no solo inician el p oceso de desa ollo, sino que le p opo cionan un hilo conduc o que a anza a a és de una se ie de lujos de abajo que pa en de los casos de uso. (17)  Cen ado en la A qui ec u a La a qui ec u a de un sis ema so wa e se desc ibe median e di e en es is as del sis ema en cons ucción. El concep o de a qui ec u a so wa e incluye los aspec os es á icos y dinámicos más signi ica i os del sis ema. La a qui ec u a es una is a del diseño comple o con las ca ac e ís icas más impo an es esal adas, dejando los de alles a un lado. Los casos de uso y la a qui ec u a es án p o undamen e elacionados. Los casos de uso deben encaja en la a qui ec u a y a su ez la a qui ec u a debe pe mi i el desa ollo de odos los casos de uso eque idos, ac ualmen e y en el u u o (17).  I e a i o e Inc emen al Es p ác ico di idi el es ue zo de desa ollo de un p oyec o de so wa e en pa es más pequeñas o mini p oyec os. Cada mini p oyec o es una i e ación que esul a en un inc emen o. Las i e aciones hacen e e encia a pasos en el lujo de abajo y los inc emen os a c ecimien os en el p oduc o. Las i e aciones deben es a con oladas, es o signi ica que deben selecciona se y ejecu a se de una o ma plani icada. Los desa ollado es basan la selección de 19 lo que implemen a án en cada i e ación en dos cosas: el conjun o de casos de uso que amplían la uncionalidad y los iesgos más impo an es que deben mi iga se. En cada i e ación los desa ollado es iden i ican y especi ican los casos de uso ele an es, c ean un diseño u ilizando la a qui ec u a seleccionada como guía pa a implemen a dichos casos de uso. Si la i e ación cumple sus obje i os, se con inúa con la p óxima, si no deben e isa se las decisiones p e ias y p oba un nue o en oque. (17)  Ciclo de Vida El P oceso Uni icado se epi e a lo la go de una se ie de ciclos que cons i uyen la ida de un sis ema. Cada ciclo cons i uye una e sión del sis ema.  Fases Cada ciclo cons as de cua o ases: Inicio, Elabo ación, Cons ucción y T ansición. Cada ase se subdi ide en i e aciones. En cada i e ación se desa olla en secuencia un conjun o de disciplinas o lujos de abajos.  Disciplinas Cada disciplina es un conjun o de ac i idades elacionadas ( lujos de abajo) inculadas a un á ea especí ica den o del p oyec o o al. Las más impo an es son: Reque imien os, Análisis, Diseño, Codi icación y P ueba. El ag upamien o de ac i idades en disciplinas es p incipalmen e una ayuda pa a comp ende el p oyec o desde la isión adicional en cascada (17)( e Ilus ación 6). Ilus ación 6: Fases, i e aciones y disciplinas. Cada disciplina es á asociada con un conjun o de modelos que se desa ollan. Es os modelos es án compues os po a e ac os. Los a e ac os más impo an es son los modelos que cada disciplina ealiza: Modelo de Casos de Uso, Modelo de Diseño, Modelo de Implemen ación y Modelo de P ueba (17) ( e Ilus ación 7). 20 Ilus ación 7: Modelos po disciplinas. 4.2 Plani icación y empo ización En es e apa ado se de allan las ho as empleadas pa a la ealización del abajo, siguiendo las cua o ases que plan ea el P oceso Uni icado de Desa ollo de So wa e, así como las ho as especí icas pa a cada lujo de abajo en cada ase( e Tabla 1). FASES HORAS INICIO 60H Reque imien os 10H Análisis y Diseño 50H Codi icación 0H P uebas 0H ELABORACIÓN 85H Reque imien os 10H Análisis y Diseño 45H Codi icación 30H P uebas 5H CONSTRUCCIÓN 140H Reque imien os 0H Análisis y Diseño 25H Codi icación 105H 21 P uebas 10H TRANSICIÓN 45H Reque imien os 5H Análisis y Diseño 10H Codi icación 25H P uebas 5H To al 335H Tabla 1: Plani icación po ases y lujos. 4.3 P esupues o A con inuación se de alla el p esupues o pa a e ec ua el p oyec o. Se des acan los elemen os necesa ios pa a la ealización del mismo, así como el cos e es imado pa a cada uno de ellos.  Cos e del ha dwa e Es el cos e co espondien e a los equipos u ilizados.  Cos e del so wa e Gas os de i ados de la u ilización de las he amien as empleadas pa a la ealización del p oyec o.  Cos e del pe sonal Gas os co espondien es a la emune ación de las pe sonas que desa ollan el p oyec o. 4.3.1 Cos e del ha dwa e Pa a es e p oyec o se ienen en cuen a los siguien es elemen os de ha dwa e pa a su desa ollo ( e Tabla 2). Elemen o Cos e O denado Po á il HP G62 450€ Se icio de In e ne ADSL 160€ Se ido es de hos ing G a ui o To al Ha dwa e 610€ Tabla 2: Desglose de los cos es de ha dwa e. 4.3.2 Cos e del so wa e El cos e de los siguien es elemen os es el co espondien e a la licencia de los mismos ( e Tabla 3). 22 Elemen o Cos e Windows 7 P o essional 160€ Mic oso O ice 2007 130€ To al So wa e 290€ Tabla 3: Desglose de los cos es de so wa e. 4.3.3 Cos e del pe sonal En la siguien e abla se enume an los abajado es que in e ienen en el desa ollo del p oyec o, así como el núme o de ho as es imadas pa a cada uno de ellos, el cos e po ho a y el cos e o al ( e Tabla 4). Pe sonal Nº Ho as Cos e / H Cos e Je e de p oyec o 20H 40€ 800€ A qui ec o 65H 35€ 2275€ Analis a 50H 20€ 1000€ P og amado 150H 20€ 3000€ Ingenie o de p uebas 15H 20€ 300€ To al 300H - 7375€ Tabla 4: Desglose de los cos es del pe sonal. 4.3.4 P esupues o o al del p oyec o La siguien e abla mues a un desglose de los cos es calculados an e io men e y el cos e o al que ep esen a el desa ollo del p oyec o ( e Tabla 5). Elemen o Cos e Cos e del ha dwa e 610€ Cos e del so wa e 290€ Cos e del pe sonal 7375€ To al 8275€ Tabla 5: Desglose de los cos es. 23 5 Desa ollo del abajo 5.1 Modelo del dominio Un modelo del dominio se u iliza como uen e pa a el diseño de los obje os so wa e y co esponde a una en ada necesa ia pa a a ios a e ac os. El modelo del dominio mues a (a los modelado es) clases concep uales signi ica i as en un dominio del p oblema, es el a e ac o más impo an e que se c ea du an e el análisis o ien ado a obje os. Un modelo del dominio es una ep esen ación de las clases concep uales del mundo eal, no de componen es so wa e. No se a a de un conjun o de diag amas que desc iben clases u obje os so wa e con esponsabilidades. (18)  Webcam App Webcam App es una aplicación que iene como p incipal obje i o social que las pe sonas puedan ealiza ideocon e encias a a és de la web de una o ma g a ui a y sencilla. Cuando un usua io se egis a en Webcam App acili a su nomb e, co eo elec ónico, en e o os da os. También, el usua io puede añadi una o o de pe il pa a que sus amigos puedan iden i ica lo ácilmen e en e los miemb os de la aplicación. Una ez egis ado, el usua io puede p opo ciona o a in o mación elacionada, po ejemplo su ciudad de esidencia, edes, ac i idades, in e eses y luga es. También puede busca a sus amigos sólo con in oduci su nomb e y ag ega los como amigos en Webcam App, con el in de pode comunica se y compa i sus da os con ellos. O as de las inalidades p incipales del uso de Webcam App es compa i con enido con los demás, po ejemplo ca ga o hace una o o, ca ga o g aba un ideo, compa i un enlace, c ea un g upo, hace un comen a io, esc ibi una no a o en ia un mensaje. Pa e del con enido que se compa e y de las acciones que se lle an a cabo se mues an en la página de ac i idades. Además, se puede limi a las pe sonas que pueden e los da os pe sonales desde la con igu ación de p i acidad ( e Ilus ación 8). Ilus ación 8: Modelo del dominio. Videocall -calle -callee Use -use name -p o ile_pho o -e-mail -ci y -skills -in e es s Video -du a ion Message -con en -sende - ecipien G oup -membe s make 1 1..* send 1..* 1 con ain * * send 1..* 1 Publica ions Pho o Commen s is a ype o is a ype o publish 1..* 1 iendship 1 1..* 24 5.2 Lis a de ca ac e ís icas En es a sección se de alla la lis a de ca ac e ís icas asociada a la aplicación Webcam App. La misma es un a e ac o que se ob iene después de aplica la a ea de “Enume a los equisi os candida os”, que se p opone en la me odología del PUD (P oceso Uni icado de Desa ollo), pa a la cap u a de equisi os. Es a lis a con iene las ideas de clien es, usua ios, analis as y desa ollado es sob e posibles aspec os a inclui en la aplicación, que pos e io men e se pueden aduci en equisi os del so wa e. Es as ideas se conside an equisi os candida os a desa olla en la e sión ac ual del sis ema o se pueden pos e ga a e siones u u as.  Tipos de Usua ios La clasi icación de los usua ios es una p ime a ap oximación pa a iden i ica y asocia a cada uno de los posibles usua ios, los ipos iden i icados no necesa iamen e ienen que se los usua ios de ini i os.  Anónimo: Es el usua io que no es á egis ado y a a u iliza las uncionalidades básicas de na egación, como po ejemplo egis a se, sin opción a modi ica el en o no.  Regis ado: Es el usua io más común, además de las unciones del usua io an e io puede accede a la mayo ía de las uncionalidades de la aplicación, añadi amigo, en ia mensajes, hace ideollamadas, elimina amigo, ag ega con enido, ges iona pe il, con igu a p i acidad, e c.  Adminis ado : Es e usua io puede accede a odas las uncionalidades de la aplicación, en e las suyas p opias es án: bloquea cuen as de usua ios, elimina cuen as de usua io, hace a un usua io adminis ado , es ablece el passwo d a los usua ios. Pa a desc ibi las ca ac e ís icas, se u iliza una abla con los siguien es campos ( e Tabla6):  Código: Es el iden i icado de la ca ac e ís ica. Se especi ica como LC + iden i icado del usua io + núme o de la ca ac e ís ica.  Iden i icado es pa a cada ipo de usua io de la aplicación  R. Usua io Regis ado.  A. Usua io Anónimo.  AD. Usua io Adminis ado .  Nomb e: Nomb e de la ca ac e ís ica.  Desc ipción: B e e desc ipción de lo que comp ende la ca ac e ís ica.  P io idad: Se asigna una p io idad a cada ca ac e ís ica con el in de de e mina el o den en que se an a i desa ollando. Las p io idades que se usan es án de inidas po un alo numé ico, que ep esen a el ni el de p io idad, donde 0 es la más baja y 100 la más al a, luego es án los angos que se mues an a con inuación:  80-100 (Muy al a)  60-80 (Al a)  40-60 (Media)  20-40 (Baja)  0-20 (Muy baja)  Es ado: Cada ca ac e ís ica iene un es ado asociado que a a iando a medida que p og esa el sis ema. Los posibles es ados son:  Acep ado: La ca ac e ís ica se desa olla á en es a e sión del p oduc o.  Plani icada: La ca ac e ís ica ya ha sido plani icada y se empeza á a desa olla en un plazo de iempo co o.  En desa ollo: Ya se es á desa ollando.  Finalizada: Se ha e minado de desa olla . 25  Pos e gada: No se desa olla á has a una e sión u u a.  Rechazada: P obablemen e no se desa olla á en ninguna e sión. Código Nomb e Desc ipción P io idad Es ado LC-A.1 Regis a Usua io La aplicación pe mi i á al usua io in oduci sus da os pe sonales pa a egis a se. 99 Finalizada LC-R.1 Busca Amigo La aplicación pe mi i á a cualquie usua io in oduci el nomb e de una pe sona y mos a á los esul ados de la búsqueda. 97 Finalizada LC-R.2 C ea Pe il Un usua io que se ha egis ado puede in oduci o os da os pe sonales especí icos que pueden a ia como: (di ección de co eo elec ónico, localidad, e c.) 96 Finalizada LC-R.3 Ges iona Pe il Un usua io egis ado puede modi ica los da os pe sonales in oducidos en la in o mación del pe il. 96 Finalizada LC-R.4 Hace Login Se pe mi i á al usua io ya egis ado in oduci su di ección de co eo o nomb e de usua io y con aseña pa a iden i ica se en la aplicación. 99 Finalizada LC-R.5 Añadi Amigo Se pe mi i á al usua io egis ado ag ega una pe sona que es é egis ada como amigo. 90 Finalizada LC-R.6 Elimina Amigo Se pe mi i á al usua io egis ado elimina una pe sona de su lis a de amigos. 90 Finalizada LC-R.7 En ia Mensajes Un usua io egis ado pod á en ia mensajes a cualquie pe sona que es á egis ada en la aplicación. 85 Finalizada LC-R.8 Repo a Un usua io egis ado pod á epo a cualquie 75 Finalizada 32 con el nomb e in oducido. Flujo no mal 1. El usua io in oduce el nomb e de la pe sona que desea encon a . 2. La aplicación mues a un lis ado de los con ac os que es án dados de al a en Webcam App con ese nomb e. 3. Webcam App o ece la posibilidad de ag ega los como “Amigos”. Flujo al e na i o 3.1. El usua io puede omi i la opción de en ia una in i ación de amis ad a los usua ios encon ados. Caso de Uso Elimina Cuen a de Usua io Ac o Usua io Adminis ado P econdición 1. Tiene que exis i una o a ias denuncias p e ias en con a del usua io y que se haya comp obado po los adminis ado es de Webcam App que in inge las no mas de uso de la aplicación. Pos condición 1. Queda á eliminada pe manen emen e la cuen a de usua io. 2. Se elimina el usua io del lis ado de amigos y los g upos a los que la cuen a es aba asociada. Flujo no mal 1. Si exis en a ias denuncias sob e un mismo pe il de usua io de la aplicación, el adminis ado puede decidi si el mismo es un posible usua io a elimina , señalizando el nomb e del usua io y la di ección de su pe il. 2. El adminis ado e isa los mo i os de la denuncia. 3. El adminis ado pasa a elimina la cuen a de usua io pe manen emen e. Flujo al e na i o 3.1. El adminis ado conside a que las causas de las denuncias no p oceden pa a elimina la cuen a de usua io y de es a o ma puede e i a la ale a gene ada. Caso de Uso Compa i Con enido Ac o Usua io Regis ado P econdición 1. El usua io debe es a iden i icado en el sis ema. Pos condición 1. El con enido queda almacenado y asociado al pe il del usua io. 2. El pe il del usua io queda ac ualizado. Flujo no mal 1. El sis ema mues a el o mula io asociado pa a subi el con enido. 2. El usua io in oduce el con enido, así como un í ulo o una desc ipción si así lo desea, además de elegi el ni el de segu idad que desea pa a su con enido. 33 3. El usua io decide las pe sonas con las que desea compa i el con enido. 4. El con enido queda publicado en la sección de a chi os. 5. El sis ema alida y econoce el ipo de con enido. La in o mación se almacena en el se ido . Flujo al e na i o 5.1. El sis ema de ec a que la cuo a lími e del usua io es á comple a y echaza la pe ición de publica el con enido. Caso de Uso Elimina Con enido Ac o Usua io Regis ado P econdición 1. El usua io debe es a iden i icado en el sis ema. Pos condición 1. El con enido queda eliminado y des inculado al pe il del usua io. 2. El pe il del usua io queda ac ualizado. Flujo no mal 1. El usua io selecciona el con enido a elimina . 2. El sis ema e i ica que el con enido se quie e elimina ealmen e. 3. El con enido se elimina del se ido . Flujo al e na i o 2.1. El usua io no con i ma la eliminación del con enido. 3.1. El con enido se man iene alojado en el se ido . Caso de Uso Ges iona Pe il Ac o Usua io Regis ado P econdición 1. El usua io debe es a iden i icado en el sis ema Pos condición 1. Los da os del pe il del usua io de Webcam App quedan modi icados. 2. El pe il del usua io de Webcam App queda ac ualizado. Flujo no mal 1. El sis ema mues a oda la in o mación elacionada con el pe il del usua io. 2. El usua io selecciona la opción de modi ica los da os pe sonales. 3. El sis ema mues a un o mula io asociado a la in o mación de pe il que se desea edi a . 4. El usua io edi a los campos de la in o mación que desea modi ica . 5. El sis ema alida que la nue a in o mación es co ec a. 6. El sis ema almacena la nue a in o mación en el se ido . Flujo al e na i o 5.1 En el caso que algún campo obliga o io no sea ellenado, el sis ema mos a á un e o y man end á el campo con el alo 34 an e io . 6.1 El sis ema no ac ualiza á la in o mación de dicho campo en el se ido . Caso de Uso Realiza Videollamada Ac o Usua io Regis ado P econdición 1. El usua io debe es a iden i icado en el sis ema. Pos condición 1. La ideollamada queda á ealizada. Flujo no mal 1. El usua io selecciona el amigo al cual desea hace le una ideollamada. 2. El usua io en ía la solici ud a su amigo pa a ambos ealiza una ideollamada. 3. El sis ema mues a un cuad o de diálogo pa a que el usua io que es é siendo llamado acep e la ideollamada. 4. El usua io acep a la solici ud de ideollamada. 5. La ideollamada queda es ablecida en e los dos usua ios. Flujo al e na i o 4.1. El usua io amigo echaza la solici ud de ideollamda que le es án ealizando. 5.1. La solici ud queda eliminada. Caso de Uso Login Ac o Usua io Regis ado P econdición 1. El usua io debe habe se egis ado con an e io idad. Pos condición 1. El usua io queda á iden i icado en el sis ema. Flujo no mal 1. El sis ema mues a los campos pa a hace el Login en la aplicación. 2. El usua io ellena los campos con los da os que p opo cionó en el egis o. 3. El sis ema alida los da os y mues a la página del pe il. Flujo al e na i o 3.1. La aplicación pedi á al usua io que in en e in oduci sus da os nue amen e si no ue on in oducidos co ec amen e. 35 5.3.4 P o o ipos de in e az de usua io  Caso de Uso Regis a se Pa a Regis a se el usua io debe in oduci in o mación básica con los campos que apa ecen a con inuación, luego pod á amplia la in o mación si lo desea ( e Ilus ación 15). Ilus ación 15: In e az pa a egis a se.  Caso de Uso Busca Amigo Pa a el caso de uso Busca Amigo el usua io pod á localiza a sus amigos egis ados en la aplicación a a és de su nomb e ( e Ilus ación 16). Ilus ación 16: In e az de búsqueda de amigo. Una ez in oducido el nomb e del amigo que se desea encon a , la aplicación mos a á un lis ado con las pe sonas las cuales su nomb e coincide con el c i e io de búsqueda, además la aplicación da á la opción de ag ega lo como amigo en Webcam App ( e Ilus ación 17). 36 Ilus ación 17: In e az pa a ag ega un amigo.  Caso de uso Elimina Cuen a de Usua io Cuando el adminis ado ecibe una denuncia sob e el pe il de algún usua io, e isa los mo i os del epo e. Si e dade amen e el usua io denunciado incumple las no mas de uso del si io, el adminis ado puede elimina pe manen emen e su cuen a, de o o modo si es un epo e inco ec o, puede elimina el epo e o simplemen e a chi a lo ( e Ilus ación 18 y 19). Ilus ación 18: In e az de epo e de in acción. Ilus ación 19: In e az de elimina usua io. 37  Caso de Uso Ag ega Con enido Cuando el usua io decide compa i algún ipo de con enido, se mues a el siguien e o mula io ( e Ilus ación 20). Ilus ación 20: In e az pa a ag ega con enido. Una ez seleccionado el con enido a publica , queda almacenado y asociado al pe il del usua io que lo ag egó ( e Ilus ación 21). Ilus ación 21: In e az del con enido ya ag egado. 38  Caso de Uso Elimina Con enido Ilus ación 22: In e az pa a elimina con enido. Cuando el usua io decide elimina el con enido el sis ema mues a un mensaje de con i mación ( e Ilus ación 23 y 24). Ilus ación 23: In e az de mensaje de con i mación de eliminación de con enido. Una ez con i mado, el con enido queda eliminado pe manen emen e. Ilus ación 24: In e az que mues a el con enido ya eliminado.  Caso de Uso Ges iona Pe il Cuando el usua io decide ges iona su pe il, se mues a un o mula io con odos los campos que iene acceso a modi ica , ales como su Nomb e, Localidad, Núme o de Telé ono, e c. ( e Ilus ación 25 y 26). 39 Ilus ación 25: In e az del pe il del usua io c eado. Ilus ación 26: In e az pa a edi a el pe il del usua io.  Caso de Uso Login Al isi a el si io, el sis ema mues a un o mula io pa a que el usua io pueda iden i ica se en el mismo y de es a o ma accede a las p incipales uncionalidades de la aplicación ( e Ilus ación 27). Ilus ación 27: In e az de o mula io de Login. 40  Caso de Uso Realiza Videollamada. Pa a el caso de uso ealiza ideollamada, se han de inido dos p o o ipos de in e az pa a ealiza la misma acción, el p ime p o o ipo se ía desde el pe il del usua io que desea ealiza la ideollamada, desplega el menú de opciones que iene pa a cada amigo de su lis ado ( e Ilus ación 28). Ilus ación 28: In e az pa a ealiza ideollamada. El segundo p o o ipo se ía isi ando el pe il del usua io que se le desea ealiza la ideollamada y selecciona es a opción en el menú que apa ece debajo de su o o de pe il ( e Ilus ación 29). Ilus ación 29: In e az pa a ealiza ideollamada. Pos e io men e de habe en iado la solici ud al usua io con el que se desea comunica , en su aplicación apa ece á un cuad o de diálogo pa a que con i me o echace la solici ud de ideollamada ( e Ilus ación 30). Ilus ación 30: Cuad o de diálogo de no i icación de ideollamada. 41 5.4 Modelo de análisis El modelo de análisis se u iliza como ayuda pa a e ina los equisi os. Analiza los equisi os en la o ma de un modelo de análisis es impo an e po a ios mo i os:  Un modelo de análisis o ece una especi icación más p ecisa de los equisi os que se ob ienen como esul ado de la cap u a de equisi os, incluyendo al modelo de casos de uso.  Un modelo de análisis se desc ibe u ilizando el lenguaje de los desa ollado es, se puede po an o in oduci un mayo o malismo y se u ilizado pa a azona sob e los uncionamien os in e nos del sis ema.  Un modelo de análisis es uc u a los equisi os de un modo que acili a su comp ensión, su p epa ación, su modi icación y en gene al su man enimien o. Un modelo de análisis puede conside a se como una p ime a ap oximación al modelo de diseño (aunque es un modelo po sí mismo) y es po an o una en ada undamen al pa a da le o ma al sis ema en el diseño y en la implemen ación. (17) 5.4.1 Diag ama de clases  Caso de Uso Regis a se Relación de azabilidad en e el caso de uso Regis a se del modelo de casos de uso y la ealización del caso de uso Regis a se en el modelo de análisis ( e Ilus ación 31). Ilus ación 31: Relación de azabilidad del caso de uso Regis a se. Pa a el diag ama de clases del modelo de análisis se ienen las clases: Con ol_Regis o, la cual se enca ga de in oca a la clase In e az_Regis o. La clase In e az_Regis o, mues a un o mula io pa a que el usua io pueda in oduci sus da os pe sonales y es os pasan a se alidados po la clase Valida _Regis o. La clase Valida _Regis o es una clase que iene la unción de comp oba que los da os inse ados en el egis o son co ec os. Se iden i ica ambién Con ol_Usua io, la cual es una clase de con ol que ecibe odos los da os del egis o y se enca ga de c ea el usua io co espondien e. Po úl imo, la clase Cuen a_Usua io, la cual es una en idad y ep esen a al usua io en cues ión ( e Ilus ación 32). Regis a se Regis a se << ace>> 48 Ilus ación 50: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Busca Amigo.  Caso de Uso Compa i Con enido Ilus ación 51: Diag ama de colabo ación pa a el lujo no mal del caso de uso Compa i Con enido. Ilus ación 52: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Publica Con enido. : Panel_Busqueda <<bounda y>> : Lis ado_Resul ados <<bounda y>> : Con ol_Busqueda <<con ol>> : Amigo <<en i y>> : Lis a_Resul ados <<en i y>> : Con ol_Amigos <<con ol>> : Usua io Regis ado 1 : mos a () 2 : in oduci Nomb e() 3 : gene a () 4 : mos a () : Con enido_Publicado <<bounda y>> : Ag ega _Con enido <<bounda y>> : Publica _Con enido <<con ol>> : Valida _Con enido <<con ol>> : Cuen a_Usua io <<en i y>> : Usua io Regis ado 1 : mos a () 2 : ca ga Con enido() 3 : alida () 4 : ac ualiza () 5 : mos a () : Con enido_Publicado <<bounda y>> : Ag ega _Con enido <<bounda y>> : Publica _Con enido <<con ol>> : Valida _Con enido <<con ol>> : Cuen a_Usua io <<en i y>> : Usua io Regis ado 1 : mos a () 2 : ca ga Con enido() 3 : alida () 4 : e o Cuo aLimi eSupe ada() 5 : mos a () 6 : ca ga E o () 49  Caso de Uso Elimina Con enido Ilus ación 53: Diag ama de colabo ación pa a el lujo no mal del caso de uso Elimina Con enido. Ilus ación 54: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Elimina Con enido.  Caso de Uso Elimina Cuen a Usua io Ilus ación 55: Diag ama de colabo ación pa a el lujo no mal del caso de uso Elimina Cuen a Usua io. : Cuen a_Usua io <<en i y>> : Con enido_Eliminado <<bounda y>> : Con i macion_Eliminacion <<bounda y>> : Eliminado _Con enido_Con ol <<con ol>> : Usua io Regis ado 1 : mos a () 2 : con i maEliminacion() 3 : ac ualiza () 4 : mos a () : Cuen a_Usua io <<en i y>> : Con enido_Eliminado <<bounda y>> : Con i macion_Eliminacion <<bounda y>> : Eliminado _Con enido_Con ol <<con ol>> : Usua io Regis ado 1 : mos a () 2 : noCon i maEliminacion() : Usua io Adminis ado : Lis a_Ale as <<bounda y>> : Ges o _Ale as <<con ol>> : Ges o Usua ios <<con ol>> : Lis ado_Ale as <<en i y>> : Cuen a_ Usua io <<en i y>> 1 : gene a () 2 : en ia () 3 : mos a () 4 : elimina () 50 Ilus ación 56: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Elimina Cuen a Usua io.  Caso de Uso Login Ilus ación 57: Diag ama de colabo ación pa a el lujo no mal del caso de uso Login. Ilus ación 58: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Login. : Usua io Adminis ado : Lis a_Ale as <<bounda y>> : Ges o _Ale as <<con ol>> : Ges o Usua ios <<con ol>> : Lis ado_Ale as <<en i y>> : Cuen a_ Usua io <<en i y>> 1 : gene a () 2 : en ia () 3 : mos a () 4 : elimina Ale as() : Usua io Regis ado : Ges o _Login <<con ol>> : Fo mula io_Login <<bounda y>> : Cuen a_ Usua io <<en i y>> : Validado _Login <<con ol>> 1 : mos a () 2 : in oduci Da os() 3 : alida Da os() 4 : en ia Da os() 5 : accede Cuen a() : Usua io Regis ado : Ges o _Login <<con ol>> : Fo mula io_Login <<bounda y>> : Cuen a_ Usua io <<en i y>> : Validado _Login <<con ol>> 1 : mos a () 2 : in oduci Da os() 3 : alida Da os() 4 : de uel eE o Da os() 5 : in o ma E o Da os() 51  Caso de Uso Realiza Videollamada Ilus ación 59: Diag ama de colabo ación pa a el lujo no mal del caso de uso Realiza Videollamada. Ilus ación 60: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Realiza Videollamada. : Se ido _He oku : Usua io Regis ado : Usua io Regis ado : Ven ana_Videollamada <<bounda y>> : Panel_Videollamada <<bounda y>> : Ges ion_Videollamada <<con ol>> : Ven ana_Dialogo <<bounda y>> : Cuen a_ Usua io <<en i y>> 1 : mos a () 2 : en ia Solici udVideollamada() 3 : gene a () 4 : inicia Conexion() 5 : mos a Video() 6 : consul a () 7 : mues aSolici udConexion() 8 : conec a se() : Se ido _He oku : Usua io Regis ado : Usua io Regis ado : Ven ana_Videollamada <<bounda y>> : Panel_Videollamada <<bounda y>> : Ges ion_Videollamada <<con ol>> : Ven ana_Dialogo <<bounda y>> : Cuen a_ Usua io <<en i y>> 1 : mos a () 2 : en ia Solici udVideollamada() 3 : gene a () 4 : inicia Conexion() 5 : mos a Video() 6 : consul a () 7 : mues aSolici udConexion() 8 : echaza () 52  Caso de Ges iona Pe il Ilus ación 61: Diag ama de colabo ación pa a el lujo no mal del caso de uso Ges iona Pe il. Ilus ación 62: Diag ama de colabo ación pa a el lujo al e na i o del caso de uso Ges iona Pe il. : Usua io Regis ado : Ges ion_Usua io <<con ol>> : Fo mula io_Da os_Pe il <<bounda y>> : Cuen a_ Usua io <<en i y>> : Valida _Da os <<con ol>> 1 : ob ene Da os() 2 : mos a () 3 : in oduci Da os() 4 : alida Da os() 5 : ac ualzia () : Usua io Regis ado : Ges ion_Usua io <<con ol>> : Fo mula io_Da os_Pe il <<bounda y>> : Cuen a_ Usua io <<en i y>> : Valida _Da os <<con ol>> 1 : ob ene Da os() 2 : mos a () 3 : in oduci Da os() 4 : alida Da os() 5 : de ol e E o Da os() 6 : in o ma E o () 53 5.5 Modelo de diseño El diseño iene el p opósi o de o mula los modelos que se cen an en los equisi os no uncionales y en el dominio de la solución. P epa a pa a la implemen ación y las p uebas del sis ema. P e ende c ea un plano del modelo de implemen ación, po lo que el g ueso del es ue zo es á en las úl imas i e aciones de elabo ación y las p ime as de cons ucción. El modelo de diseño es á muy ce cano al de implemen ación, lo que es na u al pa a gua da y man ene el modelo de diseño a a és del ciclo de ida comple o del so wa e. En el diseño se modela el sis ema y se encuen a su o ma (incluida la a qui ec u a) pa a que sopo e odos los equisi os, incluyendo los no uncionales y las es icciones. Una en ada esencial en el diseño es el esul ado del análisis, o sea el modelo de análisis, que p opo ciona una comp ensión de allada de los equisi os. La Disciplina de Diseño iene en e sus p opósi os:  Adqui i una comp ensión de los aspec os elacionados con los equisi os no uncionales y es icciones elacionadas con los lenguajes de p og amación, componen es eu ilizables, sis emas ope a i os, ecnologías de dis ibución y concu encia y de in e az de usua io.  C ea una en ada ap opiada y un pun o de pa ida pa a ac i idades de implemen ación, cap u ando los equisi os o subsis emas indi iduales, in e aces y clases.  Descompone los abajos de implemen ación en pa es más manejables que puedan se lle adas a cabo po di e en es equipos de desa ollo.  Cap u a las in e aces en e los subsis emas an es en el ciclo de ida del so wa e, lo cual es muy ú il cuando se u ilizan in e aces como elemen os de sinc onización en e di e en es equipos de desa ollo. 5.5.1 A qui ec u a del sis ema Pa a sopo a el modelo de despliegue del sis ema se de inen los siguien es elemen os:  Dos balanceado es de ca ga con Apache Web Se e 2 Las pe iciones a los mismos se ha á de o ma al e nada a a és del Se ido DNS, que dis ibui á las pe iciones a cada balanceado . Cada balanceado dis ibui á las conexiones a cada uno de los clús e es de Apache Tomca y así es os se conec an a los se ido es de DB. El obje i o de los dos balanceado es es no sob eca ga un solo Apache y en caso que deje de p es a se icio uno de ellos, los se icios no deja án de unciona . Los Apache Tomca clús e es se conec a án a los sis emas ex e nos, se ido es de aplicaciones que sopo an la ecnología de Node.js ( e Ilus ación 63). 54 Ilus ación 63: Modelo de despliegue. 5.5.2 Diag amas de clases  Caso de Uso Regis a se Una ealización de caso de uso del diseño Regis a se p opo ciona una aza di ec a a una ealización de caso de uso de análisis Regis a se en el modelo de análisis ( e Ilus ación 64). Ilus ación 64: Relación de azabilidad del caso de uso Regis a se. En el diag ama de clases del modelo de diseño se iden i ican las siguien es clases: Fo mula io, clase gené ica la cual puede ep esen a cualquie o mula io, en es e caso con el a ibu o Da os y el mé odo en ia Da os (), pa a en ia al con ol los da os ellenados po el usua io. También encon amos la clase UIFo mula io_Regis o que he eda de la clase o mula io. La clase Con olado a_Usua ios se enca ga de c ea la cuen a de usua io co espondien e y almacena la en la base de da os del sis ema median e el mé odo c ea (). Cuen a_Usua io es una clase en idad pa a ep esen a a un usua io conc e o, con un a ibu o da os que ep esen a in o mación ace ca del usua io en cues ión. Además, la clase Con olado a_Regis o se enca ga de mos a el o mula io de egis o y ecibi los da os del mismo. La clase Validado comp ueba los da os ecibidos de la clase UIFo mula io_Regis o, pa a e i ica que e ec i amen e los da os in oducidos son co ec os ( e Ilus ación 65). clien e DNS Balance Apache2 Load Balance Apache2 Load Balance Apache Tomca clus e 4 Apache Tomca clus e 4 Apache Tomca clus e 4 Apache Tomca clus e 4 DB Balance MySQL clus e 3 MySQL clus e 3 MySQL clus e 3 Se ido Node.js Se ido Node.js Usua io Regis a seRegis a se << ace>> 55 Ilus ación 65: Diag ama de clases del diseño pa a caso de uso Regis a se.  Caso de Uso Busca Amigos Una ealización de caso de uso del diseño Busca Amigo p opo ciona una aza di ec a a una ealización de caso de uso de análisis Busca Amigo en el modelo de análisis ( e Ilus ación 66). Ilus ación 66: Relación de azabilidad pa a el caso de uso Busca Amigo. En el modelo de clases de diseño del caso de uso Busca Amigo, se iden i ica la clase Con ol_Amigos en la cual se encuen a el mé odo busca Amigo (), dicho mé odo localiza a los usua ios con el nomb e in oducido en el o mula io de búsqueda. Se iden i ica la clase Lis a_Amigos a la cual se le añaden los amigos que el usua io haya que ido ag ega , de ahí se gene a la clase Amigo con sus da os, po ejemplo Nomb e. Se iene la clase Lis a_Resul ados, la cual con iene un lis ado con los con ac os dados de al a en Webcam App que poseen el nomb e del usua io que se desea encon a . También po úl imo la clase UIBuscado _Amigos que es la clase is a que se u iliza pa a mos a los da os al usua io ( e Ilus ación 67). Fo mula io -Da os +en ia Da os() UIFo mula io_Regis o Con olado a_Regis o +gene a () + ecibi () Con olado a_Usua ios +c ea () Validado + alida () Cuen a_Usua io -Da os Busca AmigoBusca Amigo << ace>> 56 Ilus ación 67: Diag ama de clases del diseño pa a el caso de uso Busca Amigo.  Caso de Uso Compa i Con enido Una ealización de caso de uso del diseño Compa i Con enido p opo ciona una aza di ec a a una ealización de caso de uso de análisis Compa i Con enido en el modelo de análisis ( e Ilus ación 68). Ilus ación 68: Relación de azabilidad pa a caso de uso Compa i Con enido. En el modelo de diseño es á p esen e la clase Ges o _Con enido, que con iene los mé odos almacena (), con el cual se almacena el con enido en la cuen a de usua io y el mé odo ac ualiza (), que ac ualiza los a chi os del usua io después de ag ega el con enido. La clase Ges o _Con enido iene elación con las clases Cuen a_Usua io y Validado . La clase Cuen a_Usua io con iene los da os pe sonales de la cuen a del usua io y sus a chi os. La clase Validado con iene el mé odo de alida (), que comp ueba que el usua io puede compa i el con enido. La clase UIFo mula io_Con enido con iene el mé odo ca ga Con enido (), dicha clase en ía los da os a la clase Validado ( e Ilus ación 69). UIBuscado _Amigos Lis a_Amigos +añadi () Amigo -Nomb e Con ol_Amigos +busca Amigo() Lis a_Resul ados Compa i Con enido Compa i Con enido << ace>> 57 Ilus ación 69: Diag ama de clases del diseño pa a el caso de uso Compa i Con enido.  Caso de Uso Elimina Con enido Una ealización de caso de uso del diseño Elimina Con enido p opo ciona una aza di ec a a una ealización de caso de uso de análisis Elimina Con enido en el modelo de análisis ( e Ilus ación 70). Ilus ación 70: Relación de azabilidad pa a el caso de uso Elimina Amigo. En el modelo de diseño del caso de uso Elimina Con enido es á la clase Ges o _Con enido que con iene el mé odo elimina (), dicho mé odo sup ime el con enido de la cuen a de usua io y el mé odo ac ualiza () que ac ualiza los a chi os del usua io después de elimina el con enido. La clase Ges o _Con enido iene elación con las clases Cuen a_Usua io y Mensaje_Con i mación. La clase Cuen a_Usua io con iene los da os pe sonales de la cuen a del usua io y sus a chi os. La clase Mensaje_Con i mación con iene el mé odo no i ica (), dicha clase le mues a al usua io un mensaje pa a que el usua io con i me la eliminación ( e Ilus ación 71). Validado + alida () Ges o _Con enido +almacena () +ac ualiza () Cuen a_Usua io -Da os +A chi os UIFo mula io_Con enido +ca ga Con enido() Elimina Con enidoElimina Con enido << ace>> 64  Caso de Uso Compa i Con enido Ilus ación 84: Diag ama de secuencia pa a el lujo no mal del caso de uso Compa i Con enido. Ilus ación 85: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Compa i Con enido. : Ges o _Con enido : UIFo mula io_Con enido : Validado : Usua io Regis ado : Cuen a_Usua io 1 : mues a() 2 : ca ga() 3 : en ia() 4 : de uel e() 5 : almacena() : Ges o _Con enido : UIFo mula io_Con enido : Validado : Usua io Regis ado : Cuen a_Usua io 1 : mues a() 2 : ca ga() 3 : en ia() 4 : de uel e() 5 : ca gaE o () 65  Caso de Uso Elimina Con enido Ilus ación 86: Diag ama de secuencia pa a el lujo no mal del caso de uso Elimina Con enido. Ilus ación 87: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Elimina Con enido. : Mensaje_Con i macion : UIFo mula io_Con enido : Ges o _Con enido : Cuen a_Usua io : Usua io Regis ado 1 : mos a () 2 : slecciona () 3 : mos a () 4 : acep aEliminacion() 5 : eliminaCon enido() : Mensaje_Con i macion : UIFo mula io_Con enido : Ges o _Con enido : Cuen a_Usua io : Usua io Regis ado 1 : mos a () 2 : slecciona () 3 : mos a () 4 : cancelaEliminacion() 66  Caso de Uso Elimina Cuen a Usua io Ilus ación 88: Diag ama de secuencia pa a el lujo no mal del caso de uso Elimina Cuen a Usua io. Ilus ación 89: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Elimina Cuen a Usua io. : Ges o _Ale as : Lis a_Ale as_Usua ios : UIRepo e_Ale as : Ges o _Usua ios : Cuen a_Usua io : Usua io Adminis ado 1 : gene a() 2 : en ia() 3 : mues a() 4 : seleccionaElimina Usua io() 5 : eliminaCuen aUsua io() : Ges o _Ale as : Lis a_Ale as_Usua ios : UIRepo e_Ale as : Ges o _Usua ios : Cuen a_Usua io : Usua io Adminis ado 1 : gene a() 2 : en ia() 3 : mues a() 4 : seleccionaElimina Ale a() 5 : eliminaAle a() 67  Caso de Uso Login Ilus ación 90: Diag ama de secuencia pa a el lujo no mal del caso de uso Login. Ilus ación 91: Diag ama de secuencia pa a el lujo no mal del caso de uso Login. : UIFo mula io_Login : Ges o _Login : Cuen a_Usua io : Validado : Usua io Regis ado 1 : mues a() 2 : in oduceDa os() 3 : en ia() 4 : de uel e() 5 : accede() : UIFo mula io_Login : Ges o _Login : Cuen a_Usua io : Validado : Usua io Regis ado 1 : mues a() 2 : in oduceDa os() 3 : en ia() 4 : ca gaE o () 68  Caso de Uso Realiza Videollamada Ilus ación 92: Diag ama de secuencia pa a el lujo no mal del caso de uso Realiza Videollamadas. Ilus ación 93: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Realiza Videollamada. : Ges ion_Videollamada : Ven ana_Videollamada : Panel_Videollamada : Ven ana_Dialogo : Cuen a_Usua io : Usua io Regis ado : Usua io Regis ado subsis ema : Se ido _Aplicaciones_He oku 1 : gene a () 2 : en iaSolici ud() 3 : gene a() 4 : c ea Conexion() 5 : mos a Video() 6 : consul a () 7 : genea () 8 : no i ica() 9 : acep aSolici ud() 10 : edi ecciona() : Ges ion_Videollamada : Ven ana_Videollamada : Panel_Videollamada : Ven ana_Dialogo : Cuen a_Usua io : Usua io Regis ado : Usua io Regis ado subsis ema : Se ido _Aplicaciones_He oku 1 : gene a () 2 : en iaSolici ud() 3 : gene a() 4 : c ea Conexion() 5 : mos a Video() 6 : consul a () 7 : genea () 8 : no i ica() 9 : cancelaSolici ud() 69  Caso de Uso Ges iona Pe il Ilus ación 94: Diag ama de secuencia pa a el lujo no mal del caso de uso Ges iona Pe il. Ilus ación 95: Diag ama de secuencia pa a el lujo al e na i o del caso de uso Ges iona Pe il. : UIFo mula io_Da os_Pe il : Ges o _Usua io : Validado : Cuen a_Usua io : Usua io Regis ado 1 : ecibe() 2 : mues a() 3 : selecciona() 4 : en ia() 5 : de uel e() 6 : ac ualiza() : UIFo mula io_Da os_Pe il : Ges o _Usua io : Validado : Cuen a_Usua io : Usua io Regis ado 1 : ecibe() 2 : mues a() 3 : selecciona() 4 : en ia() 5 : ca gaE o () 70 5.6 Implemen ación 5.6.1 P ime os pasos con CMS Elgg Con el obje i o de desa olla una aplicación que además de ealiza ideollamadas, ue a po en e en uncionalidades como la ges ión de usua ios, ges ión de con enidos, ges ión de amigos, en e o as, se eligió Elgg, que p o ee uncionalidades especí icas pa a es os eque imien os.  ¿Po qué elegi lo? Elgg es un manejado de con enidos de código abie o, con plugins de g an u ilidad, los cuales de mane a muy po en e pe mi en c ea una ed social. Se pueden desa olla plugins que cumplan con los eque imien os de los usua ios del si io web e inco po a los de o ma muy sencilla. Es una he amien a bas an e segu a ya que odos los obje os con enidos en el si io de Elgg ienen un ni el de con ol de acceso con igu able.  Modi icaciones en el CMS Elgg Una ez cubie as es as uncionalidades, se necesi a desa olla un plugin pa a que el usua io desde Elgg pueda ealiza ideollamadas a sus amigos. Pa a el desa ollo de es a uncionalidad se modi icó el CMS Elgg. U ilizando unciones de jQue y, c eando una nue a base de da os y a a és de uso de Ajax, se desa olla un plugin que pe mi e:  En el momen o en que un usua io decide ealiza una ideollamada a alguno de sus amigos online, se esc ibe la pe ición en la base de da os.  Después de esc i a la pe ición en la base de da os, con una unción que se ejecu a cada 5 segundos y desde el clien e de los usua ios que se encuen an conec ados, lee la base de da os y de ec a si algún usua io ha hecho alguna pe ición de ideollamada.  Una ez que lo an e io es de ec ado, el sis ema isualiza un cuad o de diálogo desa ollado con jQue y, que simula al que mues an o os sis emas de ideollamadas, pa a que el usua io que es á siendo llamado con es e o echace la solici ud de ideollamada. Elgg como o os manejado es de con enido, as su ins alación ac i a algunos plugins que ienen en el núcleo del CMS. Pa a log a una mejo apa iencia y mejo a algunas uncionalidades, se equi ió la ins alación de algunos plugins desca gados del si io web o icial de Elgg, los cuales se nomb an a con inuación:  In i e F iends Plugin que pe mi e que las solici udes de amis ad se manejen ipo Facebook, es deci , que un usua io en íe una solici ud a o o y pa a que puedan se amigos en la aplicación el o o debe acep a dicha in i ación. De o o modo no end án una elación de amis ad y solo se pod á accede a los da os que los usua ios compa an como público y a las uncionalidades gene ales en e usua ios.  GalliS a us El CMS a pesa de in o ma nos cuales son los usua ios que es án en línea, no lo hace como o as edes sociales, po lo que el plugin GalliS a us pe mi e sabe el es ado en el que se encuen a el usua io en la aplicación, en línea o desconec ado, mos ando un icono e de sob e las o os de pe il de los usua ios. 71  Pea l P emium Theme Plugin que pe mi e modi ica la apa iencia del si io. Tema que hace más ag adable la p esen ación de los da os con el buen diseño que plan ea y con ca ac e ís icas de las aplicaciones adicionales. 5.6.2 Lo más impo an e es á po llega . WebRTC y HTML5 Es necesa io desa olla un sis ema que pueda conec a a dos usua ios a a és de sus espec i as webcams. Pa a es o se necesi a implemen a una pequeña aplicación en Ja aSc ip y HTML5, que pe mi a u iliza los elemen os que b inda HTML5 pa a da sopo e al audio y el ideo. Además, es necesa io u iliza las lib e ías de webRTC: MediaS eam y RTCPee Connec ion, que son undamen ales pa a la c eación de un sis ema de ideocon e encias. Aho a bien, un sis ema de ideocon e encias necesi a un se ido como p o eedo de comunicación en iempo eal, lo cual es muy limi ado si se usa Apache, es a pa e de la aplicación se ha desa ollado en ocada a o o se ido , Node.js.  ¿Po qué Node.js? Apache c ea un nue o hilo po cada conexión clien e-se ido . Es o unciona bien pa a pocas conexiones, pe o c ea nue os hilos es algo cos oso, así como los cambios de con ex o. Apache unciona bien pe o no es el mejo se ido pa a log a máxima concu encia. Uno de los pun os ue es de Node.js es su capacidad de man ene muchas conexiones abie as y espe ando, po lo que su uso es ideal pa a que miles de usua ios es én en iando pe iciones de ideollamadas. Además de lo explicado an e io men e, pa a un sis ema de ideollamadas sob e HTML5 se necesi a un se ido de señalización, el cual se puede cons ui con el módulo Socke s.io de Node.js po que las APIs de webRTC no p o een de es e mecanismo. 5.6.3 In eg a las dos aplicaciones pa a que pa ezcan una Tan o el usua io que ealiza la solici ud de ideollamada como el usua io que acep a la ideollamada, son edi igidos al se ido de aplicaciones He oku, es deci , los usua ios no deben usa las dos aplicaciones po sepa ado, cada usua io puede usa los po enciales que o ece Elgg y en el momen o que desee ealiza una ideollamada el mismo CMS lo ayuda á a conec a se al se ido He oku de o ma anspa en e. 72 5.7 P uebas Es necesa io ealiza p uebas pa a con los esul ados ob enidos de las mismas pode e i ica si el sis ema cumple o no con los eque imien os plan eados en el inicio del desa ollo. Las p uebas ealizadas se basan en el uncionamien o de las APIs de WebRTC, HTML5 y Node.js. También, son ejecu adas con el obje i o de comp oba que la señalización se lle a a cabo co ec amen e y que dos usua ios con es e se ido pueden in e cambia en e sí audio y ideo en iempo eal. Luego de desca ga el Node.js del si io web o icial www.nodejs.o g, el p óximo paso es ealiza la ins alación. Una ez ins alado, debe con igu a se el a chi o se e .js o app.js. Pos e io men e, se in oducen los iche os Ja asc ip , HTML y CSS que con ienen el código de la aplicación desa ollada, den o de la ca pe a del se ido Node.js. Una ez ealizada oda la con igu ación pe inen e, se inicia el se ido , lo cual se ealiza de la siguien e mane a ( e Ilus ación 96). Ilus ación 96: CMD de Windows pa a ac i a se ido de Node.js. Ya ac i ado el se ido Node.js, solo es a ab i el na egado . Se in oduce la di ección, el pue o y los pa áme os eque idos ( e Ilus ación 97). Ilus ación 97: Cap u ando ideo desde la webcam a a és de las APIs de WebRTC y HTML5 con Node.js como se ido de aplicaciones. Una ez llegado a es e pun o y pa a comp oba que dos usua ios pueden in e cambia in o mación, es a esc ibi exac amen e la misma URL que se colocó an e io men e en o a en ana del na egado , lo cual simula que es o o usua io que es á in en ado conec a se con el p ime usua io que c eó la conexión. 73 Como se ha podido comp oba , el se ido unciona co ec amen e ya que ambos usua ios in e cambian sus ideos a a és de las APIs de webRTC, usando los elemen os de HTML5 pa a el manejo de mul imedia, odo es o u ilizando el se ido Node.js ( e Ilus ación 98). Ilus ación 98: Realizando ideollamada en el se ido local sa is ac o iamen e. 80  Email Add ess: es la di ección de co eo elec ónico con la cual se desea egis a se en el si io y donde se en ia án las no i icaciones del mismo.  Passwo d: en es e campo se debe in oduci la con aseña con la cual se accede á a la cuen a que se c ea á as habe inalizado el egis o.  Passwo d (again o e i ica ion): es e es un campo de e i icación, pa a comp oba que se ha in oducido co ec amen e la con aseña que se desea ( e Ilus ación 101). Ilus ación 101: Página de egis o. Cuando el egis o es é inalizado, se puede empeza a hace uso de odas las uncionalidades que b inda Webcam App, en e las cuales es á la de localiza a los amigos que es án egis ados en el si io. Pa a ello, se accede a la opción del menú Membe s, donde se mues a un lis ado con los miemb os que es án dados de al a en el si io ( e Ilus ación 102 y 103). 81 Ilus ación 102: Lis ado de usua ios egis ados. Ilus ación 103: Panel de búsqueda. Es necesa io in oduci el nomb e del amigo que se desea busca en el campo de ex o y p esiona el bo ón Sea ch. La aplicación mos a á un lis ado con las usua ios encon ados con el nomb e in oducido, dando la opción de añadi lo como amigo en Webcam App a a és del bo ón Add F iend ( e Ilus ación 104). Ilus ación 104: Resul ados de la búsqueda de usua ios Mien as la pe sona que desea llama no acep e su solici ud de amis ad, no se pod á ealiza ideollamadas con dicha pe sona ( e Ilus ación 105). 82 Ilus ación 105: Pe il de un usua io que no ha acep ado la solici ud de amis ad. Una ez que el usua io acep e su solici ud de amis ad, se end á disponible odas las uncionalidades incluida la de en ia le una solici ud de ideollamada ( e Ilus ación 106). Ilus ación 106: Pe il de un usua io que acep ó la solici ud de amis ad Po úl imo, queda en ia la solici ud de ideollamada y espe a que el usua io la acep e pa a pode comunica se e in e cambia los ideos ob enidos desde la webcam ( e Ilus ación 107). Ilus ación 107: Ven ana de diálogo que se mues a a los usua ios cuando eciben una solici ud de ideollamadas. 83 Una ez que el usua io amigo acep e la solici ud la ideollamada queda es ablecida ( e Ilus ación108). Ilus ación 108: Videollamada es ablecida en e dos usua ios a a és de la aplicación Webcam App. 84 Anexo IV: En o no de Desa ollo  Ins alación de Elgg Pa a la ins alación de Elgg es necesa io dos componen es esenciales, el p ime o es el CMS Elgg en sí, el cual se puede desca ga del si io web o icial www.elgg.o g y como cualquie o o CMS necesi a un en o no de desa ollo web, en e los más u ilizados pa a Windows se iene el Wamp y pa a Linux el Xamp. En es e caso se u iliza Wamp.  ¿Qué acilidades b inda Wamp? Wamp p o ee de los cua o elemen os esenciales a la ho a de cons ui un si io web: un sis ema ope a i o (Windows), un manejado de base de da os (MySQL), un so wa e pa a se ido web (Apache) y el sopo e a un lenguaje de p og amación del lado del se ido (eje PHP). Luego de ene ins alado el Wamp en el o denado , se con inúa con la ins alación del Elgg. Lo p ime o que se debe hace es copia la ca pe a de Elgg pa a el se ido Wamp, den o de la ca pe a /www y a a de accede al se ido a a és del na egado con la di ección h p://localhos :pue o, en es e caso el se ido web es á con igu ado pa a que escuche en el pue o 88 ( e Ilus ación 109 y 110). Ilus ación 109: Página de inicio del se ido Wamp. Ilus ación 110: Página de ins alación de Elgg. 85 Como los demás CMS, Elgg necesi a la c eación de una base de da os, la cual se c ea con el ges o de base da os MySQL, que b inda Wamp. La base de da os se c ea de la siguien e mane a: se accede al se ido a a és del na egado y se selecciona la opción phpmyadmin, ubicada en la pa e in e io de la página de inicio del Wamp ( e Ilus ación 111). Ilus ación 111: Acceso a phpmyadmin a a és de la página de inicio de Wamp. De es a mane a se accede a phpMyAdmin, que no es más que una página en php pa a ges iona la base de da os a a és del na egado ( e ilus ación 112). Ilus ación 112: C eación de base de da os en phpMyAdmin. De es a mane a se c ea la base de da os, aho a solo es a c ea un usua io con odos los p i ilegios sob e ella. Du an e el p oceso de ins alación de Elgg, solici a p opo ciona el nomb e de la base de da os y el nomb e de usua io con odos los p i ilegios, pa a que al comple a la ins alación se puedan gene a odas las ablas y da os que ae consigo Elgg. Pa a da le las uncionalidades adecuadas a la aplicación Webcam App, se u ilizan algunos plugins especí icos. Es os plugins ayudan a que el usua io alcance un al o ni el de usabilidad, pues apo an unciones simila es a las que ienen o as edes sociales conocidas a escala mundial, la más des acada en e ellas es Facebook. Pa a ins ala un plugin en la aplicación, debe copia se el plugin den o de la ca pe a /mod del di ec o io aíz del CMS y luego accede al panel de adminis ación del si io web en el apa ado Plugins y selecciona la opción Ac i a e (Ve Ilus ación 113 y 114). 86 Ilus ación 113: Acceso al panel de adminis ación de plugins Ilus ación 114: P oceso de ac i ación de un plugin.  Publicación de la aplicación en un se ido de hos ing en In e ne Luego de habe ins alado el CMS co ec amen e, ac i ados y con igu ados los plugins necesa ios, se p ocede a la publicación del si io web en un se ido de hos ing en in e ne . Pa a es o se escoge 000webhos , el cual es un se ido de hos ing g a ui o y ácil de usa . Lo p ime o es c ea se una cuen a en la página web www.000webhos .com, luego accede al panel de con ol del si io web. Una ez allí, se c ea una base da os de igual mane a que se hizo pa a el si io que se c ea en local, se expo a la base de da os que se encuen a en el o denado y se impo a a la base de da os del se ido de hos ing. Una ez hecho es o, queda indica le al si io web los da os de la nue a base da os, pues o que ya no es a á local, aho a debe encon a se en el se ido 000webhos , como en odos los CMS, se localiza el a chi o se ings.php, que es el que con iene en e o as cosas los da os pa a la conexión a la base de da os y se modi ican los alo es po los nue os pa áme os. Pa a inaliza la publicación del si io, se copia a a és de un clien e p o a a és del que b inda 000webhos en su página web odos los a chi os del si io local a la ca pe a public_h ml en el se ido de hos ing. Aho a bien, el si io web es á publicado en un se ido de hos ing en in e ne pe o aún no se puede na ega po él, pues es necesa io un nomb e de dominio. Pa a es o el usua io debe di igi se al si io www.do . k, en el cual se egis a y puede ob ene un nomb e de dominio de o ma g a ui a si es á disponible (ejemplo: www.webcamapp. k). Luego de habe ob enido el nomb e de dominio, solo es a en a al panel de con igu ación e indica le la di ección de Hos Name que b inda 000webhos ( e Ilus ación 115). 87 Ilus ación 115: Panel de adminis ación del dominio en do .TK Llegado a es e pun o, el si io web se encuen a publicado en un se ido de hos ing y con un nomb e de dominio a a és del cual se puede accede a él. Se coloca el nomb e de dominio c eado en el na egado y se puede en a ácilmen e ( e Ilus ación 116). Ilus ación 116: Webcam App desplegado en el se ido de hos ing  Con igu ación de Node.js del lado del se ido Node.js no es como o os se ido es web, necesi a una con igu ación manual del iche o Ja aSc ip que se ejecu a en el se ido llamado app.js ó se e .js. Algo llama i o puede se que si exis e o o se ido web, po ejemplo el Apache escuchando en el pue o 88, se debe in oduci un pue o di e en e pa a que escuche el Node.js (ejemplo 8888) ( e Ilus ación 117). 88 Ilus ación 117: Con igu ación del iche o se e .js en el se ido . En es e caso se a a abaja con el módulo Socke s.io po lo que es necesa ia la con igu ación del mismo. Con las salas ( ooms) de Socke s.io, se puede en ia mensajes a un g upo de usua ios de e minados, que se ían los clien es que es án conec ados a ellas. Con el siguien e agmen o de código, se de ine con quien se á el in e cambio de mensajes. Con la unción b oadcas , se puede especi ica quien se desea que eciba los mensajes que el clien e en íe, pa a es e caso los mensajes se en ían y se eciben po los usua ios que es én conec ados a la misma sala ( oom), aunque bien pod ía con igu a se pa a odas las salas de la aplicación. Si se quisie a manda un mensaje de mul idi usión a odos los usua ios, pa a eso se u iliza socke .b oadcas .emi (‘message’, message) ( e Ilus ación 118). Ilus ación 118: De inición de des ina a io de los mensajes.  Con igu ación del lado del clien e Una ez con igu ado el se ido , es necesa ia una con igu ación en el clien e pa a que pueda comunica se con el mismo y pode in e cambia los mensajes, una sencilla con igu ación pod ía se es a ( e Ilus ación 119). Ilus ación 119: Con igu ación en el clien e. Una ez que ambos usua ios es én conec ados a la misma sala ( oom), es donde en a la API de webRTC, RTCPee Connec ion. Pa a log a que ambos log en in e cambia el ideo que ob ienen desde su webcam, hay que incula es as unciones con socke .io, el cual se enca ga del en ío de mensajes. Con la siguien e unción, dos usua ios pueden es ablece sus emo eDesc ip ion con la desc ip ion que eciban del o o usua io y así pos e io men e pode in e cambia sus ideos ob enidos desde la webcam. Con la API MediaS eam, a a és de la unción que es á ac ualmen e disponible en Google Ch ome, Mozilla Fi e ox y Ope a, de inida como ge Use Media(), de una o ma muy sencilla se puede ob ene mul imedia e inc us a la en el elemen o ideo de HTML5. 89 Pa a aplicaciones publicadas en in e ne o pa a la comunicación con usua ios que es én ue a de una ed local, es necesa io añadi se ido es que pe mi en que un hos inal pueda descub i la di ección IP pública si se encuen a de ás de un NAT, du an e la implemen ación del API RTCPee Connec ion ( e Ilus ación 120 y 121). Ilus ación 120: Añadiendo se ido es. Ilus ación 121: C eación de una Pee Connec ion.  APIs de webRTC u ilizadas en la aplicación.  MediaS eam (ge Use Media): La cual se u iliza pa a accede a los da os de los usua ios (ejemplo: el ideo o el audio ob enidos desde la webcam).  RTCPee Connec ion: Es a API pe mi e que a dos pe sonas comunica se di ec amen e a a és del na egado , usando un canal de señalización, el cual no es á especi icado en es a API.  Po encialidades de HTML5 En la ac ualidad, la mayo ía de los na egado es mues an ideos a a és de un plugin (ejemplo lash), cla amen e no es una solución que esuel a odos los p oblemas, ya que los na egado es pueden ene di e en es plugins, lo cual conlle a a que los ideos inc us ados en la web no es én siemp e disponibles pa a odos los usua ios. Con la apa ición de HTML5, se de ine un nue o elemen o que especi ica un mé odo es ánda pa a inc us a un ídeo / película en una página web: el elemen o < ideo>. A con inuación se mues an los na egado es que sopo an HTML5 ( e Ilus ación 122). Ilus ación 122: Na egado es que sopo an HTML5