Protótipo de uma aplicação rica de internet para monitoramento de vídeo através de streaming e Silverlight Thiago da Silva Negherbon – Acadêmico Roosevelt dos Santos Júnior – Orientador

Roteiro 2 de 63 Roteiro Introdução Objetivos do trabalho Fundamentação teórica RIA, Silverlight, XAML, streaming, compressão, DirectShow, trabalhos correlatos Desenvolvimento do protótipo Requisitos principais, especificação, implementação, resultados e discussão Conclusão Extensões

Introdução 3 de 63 Introdução

4 de 63 Introdução

5 de 63 Introdução

Introdução → Objetivos do trabalho 6 de 63 Objetivos do trabalho

Fundamentação teórica 7 de 63 Fundamentação teórica

Fundamentação teórica → Rich Internet Application Rich Internet Application 8 de 63

Fundamentação teórica → Rich Internet Application Rich Internet Application 9 de 63

Fundamentação teórica → Rich Internet Application Rich Internet Application 10 de 63

Fundamentação teórica → Silverlight Silverlight 11 de 63

Fundamentação teórica → Silverlight Silverlight 12 de 63

Fundamentação teórica → Silverlight Silverlight 13 de 63

Fundamentação teórica → Silverlight Silverlight 14 de 63

Fundamentação teórica → eXtensible Application Markup Language eXtensible Application Markup Language 15 de 63

Fundamentação teórica → Streaming Streaming 16 de 63

Fundamentação teórica → Compressão Compressão 17 de 63

Fundamentação teórica → Compressão Compressão AplicaçãoTaxa de dados DescomprimidoComprimido Voz64 kbps2 – 4 kbps Vídeo conferência (15 fps) tamanho do quadro 352 x 240, 24 bits/pixel 30,41 mbps64 – 768 kbps Transmissão de vídeo (30 fps) tamanho do quadro 720 x 480, 24 bits/pixel 248,83 mbps3 – 8 mbps Televisão de alta definição (59,94 fps) tamanho do quadro 1280 x 720, 24 bits/pixel 1,33 gbps20 mbps 18 de 63

Fundamentação teórica → DirectShow DirectShow 19 de 63

Fundamentação teórica → DirectShow DirectShow 20 de 63

Fundamentação teórica → Trabalhos correlatos → Trabalho de Merege Neto (2004) Trabalho de Merege Neto (2004) 21 de 63

Fundamentação teórica → Trabalhos correlatos → Trabalho de Carlassara (2009) Trabalho de Carlassara (2009) 22 de 63

Desenvolvimento do protótipo 23 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF01: A aplicação cliente deve disponibilizar um painel que ocupe o maior espaço possível da janela do navegador onde o usuário poderá interagir. 24 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF02: A aplicação cliente deve disponibilizar um quadro para cada streaming de câmera que estiver recebendo. 25 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF03: A aplicação cliente deve possuir um menu onde podem ser escolhidas as câmeras escondidas que se deseja restaurar. 26 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF04: A aplicação cliente deve permitir redimensionamento e movimentação livres (limitado pelo tamanho do painel) de cada quadro de câmera. 27 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF05: A aplicação cliente deve permitir fechar cada quadro de câmera. 28 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF06: A aplicação cliente deve permitir parar e continuar a exibição das imagens de cada janela de câmera. 29 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF07: A aplicação servidora deve ler a entrada de cada câmera conectada ao computador. 30 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF08: A aplicação servidora deve processar os dados e criar o streaming de vídeo de cada câmera. 31 de 63

Desenvolvimento do protótipo → Requisitos principais → Requisitos funcionais Requisitos funcionais  RF09: A aplicação servidora deve disponibilizar os streamings para leitura na internet. 32 de 63

Desenvolvimento do protótipo → Especificação → Diagrama de casos de uso Diagrama de casos de uso 33 de 63

Desenvolvimento do protótipo → Especificação → Diagrama de classes → Diagrama de classes Captura Diagrama de classes Captura 34 de 63

Desenvolvimento do protótipo → Especificação → Diagrama de classes → Diagrama de classes Cliente.Web Diagrama de classes Cliente.Web 35 de 63

Desenvolvimento do protótipo → Especificação → Diagrama de classes → Diagrama de classes Cliente Diagrama de classes Cliente 36 de 63

Desenvolvimento do protótipo → Especificação → Diagrama de sequência Diagrama de sequência 37 de 63

Desenvolvimento do protótipo → Especificação → Leiaute da interface Leiaute da interface 38 de 63

Desenvolvimento do protótipo → Implementação → Técnicas e ferramentas utilizadas Tecnologias e ferramentas utilizadas 39 de 63

Desenvolvimento do protótipo → Implementação → Técnicas e ferramentas utilizadas Tecnologias e ferramentas utilizadas 40 de 63

Desenvolvimento do protótipo → Implementação → Técnicas e ferramentas utilizadas Tecnologias e ferramentas utilizadas 41 de 63

Desenvolvimento do protótipo → Implementação → Operacionalidade da implementação Operacionalidade da implementação Operacionalidade do caso de uso UC01 42 de 63

Desenvolvimento do protótipo → Implementação → Operacionalidade da implementação Operacionalidade da implementação Operacionalidade do caso de uso UC02 43 de 63

Desenvolvimento do protótipo → Implementação → Operacionalidade da implementação Operacionalidade da implementação Operacionalidade do caso de uso UC03 44 de 63

Desenvolvimento do protótipo → Implementação → Operacionalidade da implementação Operacionalidade da implementação Operacionalidade do caso de uso UC04 45 de 63

Desenvolvimento do protótipo → Implementação → Operacionalidade da implementação Operacionalidade da implementação Operacionalidade do caso de uso UC05 46 de 63

Resultados e discussão Desenvolvimento do protótipo → Resultados e discussão 47 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF01: A aplicação cliente deve disponibilizar um painel que ocupe o maior espaço possível da janela do navegador onde o usuário poderá interagir. 48 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF02: A aplicação cliente deve disponibilizar um quadro para cada streaming de câmera que estiver recebendo. 49 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF03: A aplicação cliente deve possuir um menu onde podem ser escolhidas as câmeras escondidas que se deseja restaurar. 50 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF04: A aplicação cliente deve permitir redimensionamento e movimentação livres (limitado pelo tamanho do painel) de cada quadro de câmera. 51 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF05: A aplicação cliente deve permitir fechar cada quadro de câmera. 52 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF06: A aplicação cliente deve permitir parar e continuar a exibição das imagens de cada janela de câmera. 53 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF07: A aplicação servidora deve ler a entrada de cada câmera conectada ao computador. 54 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF08: A aplicação servidora deve processar os dados e criar o streaming de vídeo de cada câmera. 55 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão  RF09: A aplicação servidora deve disponibilizar os streamings para leitura na internet. 56 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão Características técnicas dos equipamentos utilizados: computador notebook modelo Dell Vostro 1310; sistema operacional Microsoft Windows 7 Professional 64-bit Service Pack 1; processador Intel Core 2 Duo T Ghz; memória RAM 4.0 gigabytes DDR Mhz; placa de vídeo NVIDIA GeForce 8400M GS; resolução de vídeo 1280 x 800 pixels com taxa de atualização de 60 Hz e profundidade de cores de 32 bits; disco rígido de 80 Gb; câmera USB com resolução de vídeo 320 x 240 pixels e captura de 30 quadros por segundo; câmera USB com resolução de vídeo 640 x 480 pixels e captura de 30 quadros por segundo. 57 de 63

Desenvolvimento do protótipo → Resultados e discussão Resultados e discussão FuncionalidadeEste protótipoTrabalho de CarlassaraWebCam Monitor 5.24 de DeskShare Incorporated Armazenamento das imagens Compressão de vídeo Detecção automática de novas câmeras Detecção de movimentos Movimentação remota das câmeras Transmissão através da internet Transmissão de áudio Transmissão em tempo real Visualização de múltiplas câmeras simultaneamente Visualização em dispositivo móvel Visualização no navegador 58 de 63

Conclusões 59 de 63

Conclusões Utilização de tecnologias RIA, compressão de vídeo e streaming Dificuldade em integrar os componentes do DirectShow.NET Documentação escassa a respeito das tecnologias de compressão e streaming Orientação a objetos e estratégia de divisão das tarefas do sistema em módulos 60 de 63

Conclusões → Extensões Extensões 61 de 63

Conclusões → Extensões Extensões Interface utilizando a tecnologia HTML 5 Controlar remotamente o ângulo de visão de cada câmera Capturar e transmitir áudio Controlar o zoom da imagem produzida em cada câmera. Gravar as imagens obtidas de cada câmera. 62 de 63

Obrigado!