Aplicações web interativas para nuvem: Kinect, Kinesis e ASP.NET MVC

Fabrício Sanchez

29/05/2012

Há algumas semanas, durante o processo de preparação de uma palestra sobre o tema “o futuro da internet”, me deparei com um site que apresentava a seguinte URL e descrição, respectivamente: “http://kinesis.io/” e “Build gesture driven web apps with HTML, JS & Kinect“. Atraído pela descrição, resolvi navegar através das páginas do website. Ao navegar, fui surpreendido com muitas informações acerca de uma poderosa framework baseada em Javascript que possibita o desenvolvimento de gestures em aplicações web baseadas em Kinect.

No artigo de hoje, você será apresentado a esta nova framework, aspectos principais e como criar aplicações web baseadas na mesma. Ao final do texto, disponibilizo links adicionais que o ajudarão a enriquecer suas aplicações com a framework mencionada.

Kinesis, o que é?

Kinesis é uma framework que utiliza o skill técnico já existente em desenvolvedores de aplicações web em webstandards (HTML/CSS/Javascript) para implementar um modelo de navegação baseado em gestures para Kinect.

Kinesis encapsula uma série de recursos de navegação baseado em gestures para Kinect e sua utilização é extremamente simplificada. Para isso, basta adicionar a referência do arquivo Kinesis no topo do arquivo de navegação e realizar a programação das ações desejadas (a modelo do que é realizado com jQuery). Mas não se preocupe com isso por enquanto pois mais adiante neste texto, apresentarei um exemplo prático e esta ideia (se é nova para você) ficará mais clara.

A framework disponibiliza o fácil acesso a diversos recursos tradicionalmente conhecidos no Kinect, como: swipe, multiple joint tracking, salto, movimentos corporais e reconhecimento de fala para palavras específicas de ação (em língua inglesa). Se você conhece o PhoneGap (para dispositivos móveis), inevitavelmente encontrará certa equivalência com Kinesis para Kinect.

Instalação e configuração de ambiente

Kinesis utiliza muitas das features implementadas no Kinect SDK (disponibilizado gratuitamente pela Microsoft), logo, o primeiro passo para configurar o ambiente para utilizar o Kinesis consiste na instalação deste SDK (se você ainda não o possui, evidentemente). Então, vamos a instalação.

1. Instalando o Kinect SDK

Conforme mencionado anteriormente, o Kinect SDK é disponibilizado gratuitamente pela Microsoft para o desenvolvimento de aplicações especificamente para Kinect. Você pode efetuar o download do SDK seguindo este link. Após baixar os 226 MB do arquivo instalador e executá-lo, você deverá visualizar uma imagem semelhante aquela apresentada pela Figura 1.

Figura 1. Aceitação dos termos de contrato

Após aceitar os termos do contrato de licença, basta clicar em “Install” para prosseguir com a instalação. A Figura 2 apresenta a tela seguinte.

Figura 2. O processo de instalação iniciado

A Figura 2 apresenta a tela de instalação do SDK. Durante este processo, algumas confirmações serão solicitadas. Confirme a instalação dos componentes adicionais e demais solicitações de permissões e aguarde o término na instalação. A Figura 3 apresenta a tela de confirmação após a completude do instalador.

Figura 3. Instalação completada com sucesso

Com a primeira etapa do processo concluída, estamos aptos a seguir com o processo de preparação do ambiente de desenvolvimento. O que faremos a seguir é instalar o pacote de recursos do Kinesis.

2. Instalando o package de recursos do Kinesis

A instalação do Kinesis SDK é extremamente simplificada e agrupa alguns recursos importantes para o processo de desenvolvimento. Os passos para obter acesso ao Kinesis SDK são listados abaixo:

Solicite o acesso via e-mail através do link: http://kinesis.io/home. Basta informar o e-mail desejado e clicar em “Get Access“.
Um e-mail será disparado para o endereço informado. Este e-mail possui um link de confirmação e a solicitação para completar seu cadastro. Ao clicar, você será direcionado para a página responsável por esta ação. Informe todos os campos obrigatórios e pressione “Update User“. Após este processo, você estará apto a baixar o SDK.
Autenticado, vá até a opção “Downloads” e baixe o SDK, selecionando a opção “Windows Kinect SDK”, conforme apresentado pela Figura 4.
Após realizar o download e disparar o comando de execução do instalador, se tudo correr bem, você será levado no final do processo (que é feito todo de forma automática) há uma página de exemplos de utilização da framework.

Figura 4. Selecionando a opção de download correta

Kinect SDK é composto de dois elementos básicos: um simulador e o core da API, propriamente dito. Cabe a observação neste momento em relação ao simulador.

Existe uma possibilidade real de que nem todos os desenvolvedores que gostariam de escrever aplicações para Kinect com Kinesis possuam o dispositivo de leitura corporal, principalmente em nosso país onde tudo é consideravelmente mais caro. Diante disso, o time do Kinesis disponibiliza gratuitamente junto ao SDK um simulador dos movimentos de Kinect para que você possa testar suas aplicações.

Quando formos testar a aplicação de exemplo deste artigo, você será apresentado ao simulador.

3. Testando o ambiente

Nos resta agora testar o ambiente que acabamos de criar/configurar. Para isso, criaremos uma página simples chamada “HelloWorld.html” e adicionaremos as configurações mínimas neste arquivo para fins de teste apenas. O código do arquivo de teste pode ser visualizado na Listagem 1.

[html]

Testando o ambiente…

[/html]

Listagem 1. O código para teste de ambiente

Em relação ao código apresentado pela Listagem 1, destacamos os seguintes aspectos:

Linha 5: estamos fazendo referência há um arquivo de CSS disponibilizadono CDN do Kinesis. Você poderia refereciar seu próprio CSS, sem problemas. É apenas um teste.
Linhas 8 – 11: invocamos para o código, o arquivo JS do Kinesis. Note que este arquivo a exemplo do CSS mencionado no tópico acima, encontra-se hospedado no CDN do Kinesis. Ao invocar este arquivo (linha 8), você estará tornando sua página HTML apta a entender a navegação via gestures. Na linha 10 criamos uma instância de “Kinesis” e o colocamos em execução automaticamente.

Após salvar o documento, caso você não possua um Kinect ativo em seu computador, você precisará executar o ambiente de simulação oferecido pelo Kinesis. Para isso, vá até a pasta onde os recursos foram instalados (no meu caso está no caminho: “C:Program Files (x86)KinesisSDKTools“) e execute o arquivo “Kinesis Simulator“. A Figura 5 apresenta o simulador em execução.

Figura 5. O emulador de Kinect em execução

Agora, com o emulador em execução, você precisa inicializar o servidor e em seguida, “conectar” o Kinect virtual. Para realizar estas tarefas, basta pressionar respectivamente os botões “Start Server” e “Connect Kinect“. A Figura 6 apresenta este processo.

Figura 6. Servidor Kinesis iniciado e Kinect conectado

Tudo pronto, nos resta agora testar os movimentos na página web. Para isso, basta executar a página HTML cujo código foi apresentado na Listagem 1 em um browser de sua preferência e realizar os testes através da aba “Hand Tracking“. A Figura 7 apresenta meu ambiente em pleno funcionamento.

Figura 7. Executando o ambiente com o servidor Kinesis

Ao manter o mouse com clique pressionado sobre o objeto vermelho ao centro da tela e movimentar para cima, para baixo, para esquerda e para direita, você verá os movimentos sendo reproduzidos na página web.

No próximo post sobre o assunto, criaremos uma aplicação ASP.NET MVC com rolagem horizontal, hospedaremos no Windows Azure e, em seguida, interagiremos com a aplicação através do Kinect. Não perca!

Não se esqueça de deixar comentários. São de fundamental importância para nós.