Uma vez que a aplicação desenvolvida tem como principal objetivo possibilitar ao utilizador a interação com câmaras ONVIF, torna-se obrigatório a disponibilização online do vídeo transmitido pelas mesmas.
var updusr = { "username": usr.val(), "password": pwd.val(),
"level": parseInt(level.val()) };
//chamada assíncrona à função updateUser do objDeviceMngm device.updateUser(updusr, function (data) {
…
73
Numa primeira abordagem, foi estudada a possibilidade da utilização do elemento <video> disponibilizado no HTML5. Este elemento apresenta ainda várias limitações das quais se destacam [54] [55] [56] [57] as seguintes:
1. não funciona em browsers mais antigos;
2. o elemento <video> obriga à existência de um ficheiro “físico”;
3. os browsers suportam nativamente formatos de vídeo distintos (Figura 34) o que obriga à disponibilização dos vídeos em diversos formatos de modo a garantir a sua visualização [56]:
Figura 34 - HTML 5 <video> - formatos suportados (obtido em [53])
A limitação 1 para o nosso caso não seria um problema pois a aplicação foi desenvolvida a pensar nas versões mais recentes dos browsers. Por outro lado, a limitação 2 inviabiliza a utilização do elemento <video> para o stream do vídeo disponibilizado pela câmara, uma vez que o stream de vídeo por parte de uma câmara IP não fornece um ficheiro físico, mas sim um URL para o respetivo stream, e.g [58]:
RTSP sobre HTTP: http://208.124.204.172:554/snl/live/1/
RTSP sobre UDP: rtsp://59.124.49.22:1558/rtsph264720p
Perante a impossibilidade de utilizar o elemento <video> como solução para a disponibilização do stream de vídeo nos diversos browsers (incluíndo dispositivos móveis), foram estudadas outras alternativas para a disponibilização das imagens transmitidas pela câmara:
74
1. Utilizar plugins desenvolvidos pelos fabricantes - esta solução iria tornar a aplicação desenvolvida dependente das marcas/modelos das câmaras, bem como torná-la dependente de plataformas (browsers+plataformas).
2. Implementar um plugin à medida - teria um custo/tempo de implementação elevado e implicaria um conhecimento aprofundado ao nível de codecs e stream de vídeo, o que sai do âmbito e tempo disponível para este trabalho.
3. Utilizar um plugin que suporte stream de vídeo sobre RTSP nos diversos browsers [59].
Assim, pode-se facilmente concluir que de momento não é possível a disponibilização de
streams de vídeo nos diversos browsers sem recorrer à utilização de plugins ou ao
desenvolvimento de um.
Pelas condicionantes 1 e 2 acima apresentadas, escolheu-se a 3ª opção.
Atualmente existe uma grande variedade de plugins web disponíveis tendo-se adotado como critério de seleção: ser de domínio livre (open source).
De entre estes, há um que é amplamente utilizado pela comunidade: o plugin para web do VLC Media Player [60] [61]. A instalação deste plugin passa pela instalação da versão do VLC
Media Player disponível para o sistema operativo em causa. O plugin web VLC permite stream de vídeo sobre RTSP [62] sendo suportado em três dos principais browsers [61]
(Internet Explorer, Mozilla Firefox e Safari). De referir que foram também realizados testes com os plugins web do Quicktime e do RealPlayer mas não foram atingidos resultados satisfatórios nos browsers suportados nos sistemas operativos Unix. Pelo disposto, e de forma a garantir uma maior compatibilidade, optou-se pela utilização do plugin web VLC para a disponibilização do vídeo transmitido pelas câmaras (Figura 35).
75
Figura 35 - Stream de video utilizando VLC
A adoção deste plugin não garante, no entanto, a visualização universal do vídeo, independentemente do browser e dispositivos utilizados pelo utilizador, nomeadamente dispositivos móveis.
De forma a ultrapassar a limitação existente ao nível dos dispositivos móveis, a aplicação disponibiliza ao utilizador um modo alternativo de visualização das imagens captadas pela câmara. Este modo alternativo baseia-se na obtenção e disponibilização de snapshots da câmara em períodos espaçados de tempo. Ou seja, a solução passa pela utilização de AJAX para obter um snapshot de “x” em “x” segundos. A actualização periódica das imagens dá ao utilizador uma aproximação à transmissão de vídeo em tempo real. Esta solução, apesar de não garantir uma grande fluidez, permite ao utilizador o acesso à imagem captada pela câmara qualquer que seja o dispositivo e browser utilizados (Figura 36).
76
Figura 36 - Visualização da imagem da câmara por snapshot num IPAD
De seguida são descritos os pontos fundamentais da implementação destes dois modos de visualização de imagem.
5.2.6.1 Plugin web VLC
Para a visualização de vídeo utilizando o plugin web VLC é necessário indicar um URI de
stream da câmara. A obtenção desse URI, por parte da aplicação, obedece ao definido na
77
Figura 37 - Diagrama de sequência para visualização de vídeo
Onde Profile[] é um array de perfis media que contêm VideoSourceConfiguration e VideoEncoderConfiguration. Assim, o URI de stream vai ser obtido realizando uma chamada assíncrona ao método getStreamURI do objMedia, e.g.:
O objeto currentProfile contém a informação de um perfil media com VideoSourceConfiguration e VideoEncoderConfiguration da câmara selecionada.
Uma vez obtido o URI de streaming, o método MostraVLCVideo é responsável pela inicialização e configuração do plugin web:
Note-se que os dados de autenticação de acesso à câmara são adicionados ao URI devolvido, permitindo deste modo o acesso no caso do stream de vídeo estar protegido, o que acontece na maioria dos casos. A função playVLC é a responsável por adicionar o URI ao
var objmedia = new objMedia(CurrentCamera);
varcurrentStreamURI ;
//Transport = 1 - TCP ; Type = 0 - Unicast
objmedia.getStreamURI(currentProfile.Token, 0, 1, function (data) { …
});
function MostraVLCVideo() { var finalurl = ''; var valorfinal = '';
//colocação dos dados de autenticação no URI
valorfinal = 'rtsp://' + CurrentCamera.login + ':' + CurrentCamera.password + '@'; finalurl = currentStreamURI.replace('rtsp://', valorfinal);
// algumas câmara retornam IP interno -> converter IP interno em IP externo finalurl = objCamera.getValidURL(finalurl, CurrentCamera.cameraIPPort, true); if (finalurl != '')
playVLC('vlc1', finalurl); }
function playVLC(tgt, uri) {
//se for IE obtem o elemento objecto senão embed - firefox if (document.all) tgt += "_IE"
var tgt = document.getElementById(tgt); tgt.playlist.add(uri);
tgt.playlist.play();
78
plugin e iniciar a disponibilização do vídeo. Por último, resta referir que o plugin web é
inserido na página da seguinte forma:
O elemento <embed> existente dentro do elemento <object> permite a correta visualização do plugin no browser Firefox.
5.2.6.2 Modo snapshot
No caso de não ser possível a visualização do vídeo utilizando o plugin web VLC será utilizado o modo snapshot. Neste caso, é necessário obter o URI para o snapshot da câmara. Este URI é obtido realizando uma chamada assíncrona ao método getSnapshotURI do objeto objMedia, e.g.:
O método setInterval() chama uma função e avalia uma expressão num intervalo de tempo especificado em milisegundos [64]. Neste caso, a função refreshCamara é chamada a cada 6 segundos (6000 milisegundos). Esta função é a responsável por colocar no elemento <div>
<OBJECT id='vlc1_IE'
codeBase="http://downloads.videolan.org/pub/videolan/vlc/latest/win32/axvlc.cab" width="480" height="320" classid="clsid:9BE31822-FDAD-461B-AD51-BE1D1C159921">
<param name="AutoLoop" value="False" /> <param name="AutoPlay" value="True" /> <param name="ShowDisplay" value="True" /> <param name="toolbar" value="False" /> <embed type="application/x-vlc-plugin" pluginspage="http://www.videolan.org"
autoplay="yes" loop="no" toolbar="false"
version="VideoLAN.VLCPlugin.2"
width="480" height="320"
id="vlc1"> </embed>
</OBJECT>
//vai obter o URI de snapshot
objmedia.getSnapshotURI(currentProfile.Token, function (data) {
if (data.status.value == 1) { …
currentSnapURI = objCamera.getValidURL(data.snapshot.uri,
CurrentCamera.cameraIPPort, false); var authx = 'http://' + CurrentCamera.login + ':' + CurrentCamera.password + '@';
var finalurl = currentSnapURI.replace('http://', authx);
// se é o IE não aceita autenticação no url - se a camara necessitar // autenticação surge ao utilizador uma janela de login password.
if (isIE)
refreshIntervalId = window.setInterval("refreshCamera('" + currentSnapURI + "');", 6000);
else
refreshIntervalId = window.setInterval("refreshCamera('" + finalurl + "');", 6000); }
else { … }});
79
com o identificador “imgPlaceHolder” a imagem devolvida pela câmara a cada 6 segundos, e.g.:
Note-se que ao URI para obtenção do snapshot é acrescentado um timestamp para garantir a obtenção da imagem mais recente, uma vez que os browsers fazem cache dos conteúdos, nomeadamente das imagens pedidas. Para finalizar, resta referir que, uma vez que as imagens disponibilizadas pelas câmaras têm uma resolução elevada, foi utilizado o plugin JQuery denominado NailThumb[41] para apoio no redimensionamento da imagem obtida. Estes dois modos alternativos para a visualização das imagens de uma câmara são também utilizados nas opções “Imaging” e “PTZ”do menu superior.