Vídeo ao vivo em um site com taxa de acessos média

Resumo: Este artigo mostra como incluir um vídeo ao vivo de um produto de vídeo em rede Axis em uma página da Web.
As informações neste artigo se aplicam a todas as Câmeras de Rede e Servidores de Vídeo Axis com firmware versão 4.xx

Descrição

Se você tiver conectividade de rede Ethernet direta para a câmera de rede Axis, basta conectá-la à sua rede e começar a exibir imagens diretamente dela. O servidor Web incorporado lida com tudo. Você também pode configurar facilmente sua própria página da Web no produto em si. Talvez você deseje incluir vídeo ao vivo em sua própria página da Web. Basta seguir a descrição disponível aqui.
A câmera de rede Axis pode lidar com 20 conexões simultâneas; esse número é suficiente na maioria dos sites com taxa de acessos média. Se o número de usuários simultâneos exceder 20, o próximo usuário não obterá vídeo ao vivo.
O código abaixo é ligeiramente mais complexo, mas ele funciona para a maioria dos navegadores. Na primeira vez que esta página html for acessada pelo Microsoft Internet Explorer (Windows), o download de um componente ActiveX será solicitado aos usuários para exibição de imagens.
Tudo o que você precisa fazer é especificar BaseURL com o endereço IP de sua câmera, como descrito no exemplo, e definir ImageResolution, DisplayWidth e Height. 

Exemplo

<html>
<title>Vídeo ao vivo da câmera AXIS</title>
<body>
<center>
<h2>Vídeo ao vivo da câmera AXIS</h2>


<SCRIPT LANGUAGE="JavaScript">
// Defina BaseURL como o URL de sua câmera
//Exemplo: var BaseURL = "http://172.21.1.122/";

var BaseURL = "http://[minhaCâmera]/";

// As duas linhas a seguir deverão ser alteradas se um AXIS 241S(A)/241Q(A)/240Q/243SA for usado:

var Camera = ""; // Se você usar um AXIS 240Q/241S(A)/241Q(A)/243SA, comente esta linha ao inserir "//"
// var Camera = "n"; // Altere n para a fonte de vídeo usada no AXIS 240Q/ 241S(A)/241Q(A)/243SA e remova "//"

// Vá para a câmera usada e remova "//" da frente da ImageResolution a ser usada.
// Observe que apenas uma pode ser ativada de cada vez.

// A lista de resoluções adicionais disponíveis é mostrada na configuração do produto.

// AXIS 207/210/210A/211/211A/212 PTZ/216FD/221/225FD
// var ImageResolution = "320x240";var DisplayWidth = "320";var DisplayHeight = "240";
// var ImageResolution = "640x480";var DisplayWidth = "640";var DisplayHeight = "480";

// AXIS 213 PTZ/214 PTZ/231D(+)/232D(+)/240Q/241S(A)/241Q(A)/243SA PAL
// var ImageResolution = "352x288";var DisplayWidth = "352";var DisplayHeight = "288";
// var ImageResolution = "704x576";var DisplayWidth = "704";var DisplayHeight = "576";

// AXIS 213 PTZ/214 PTZ/231D(+)/232D(+)/240Q/241S(A)/241Q(A)/243SA NTSC
// var ImageResolution = "352x240";var DisplayWidth = "352";var DisplayHeight = "240";
// var ImageResolution = "704x480";var DisplayWidth = "704";var DisplayHeight = "480";

// Este é o caminho para o arquivo de geração de imagens na câmera em si
var File = "axis-cgi/mjpg/video.cgi?resolution="+ImageResolution;
// Nenhuma alteração necessária a partir daqui
if (Camera != "") {File += "&camera=" + Camera;}
var output = "";
if ((navigator.appName == "Microsoft Internet Explorer") &&
(navigator.platform != "MacPPC") && (navigator.platform != "Mac68k"))
{
// Se Internet Explorer no Windows, use ActiveX
output = '<OBJECT ID="Player" width='
output += DisplayWidth;
output += ' height=';
output += DisplayHeight;
output += ' CLASSID="CLSID:DE625294-70E6-45ED-B895-CFFA13AEB044" ';
output += 'CODEBASE="';
output += BaseURL;
output += 'activex/AMC.cab">';
output += '<PARAM NAME="MediaURL" VALUE="';
output += BaseURL;
output += File + '">';
output += '<param name="MediaType" value="mjpeg-unicast">';
output += '<param name="ShowStatusBar" value="0">';
output += '<param name="ShowToolbar" value="0">';
output += '<param name="AutoStart" value="1">';
output += '<param name="StretchToFit" value="1">';
output += '<BR><B>Axis Media Control</B><BR>';
output += 'Não foi possível registrar o AXIS Media Control, ';
output += 'que permite exibir streams de imagens ao vivo no';
output += ' Microsoft Internet Explorer, em seu computador.';
output += '<BR></OBJECT>';
} else {
// Se não for IE para Windows, use o navegador em si para exibir
theDate = new Date();
output = '<IMG SRC="';
output += BaseURL;
output += File;
output += '&dummy=' + theDate.getTime().toString(10);
output += '" HEIGHT="';
output += DisplayHeight;
output += '" WIDTH="';
output += DisplayWidth;
output += '" ALT="Imagem da câmera">';
}
document.write(output);
document.Player.ToolbarConfiguration = "play,+snapshot,+fullscreen";

</SCRIPT>
</body>
</html>

Observação 1: Para obter mais opções, veja os exemplos de HTML na interface da Web do produto ou nas Páginas dos desenvolvedores.

Observação 2: Não corte e cole este código diretamente no programa Microsoft FrontPage. Primeiro, copie o código para o Bloco de Notas para remover a formatação e, em seguida, copie sob a guia HTML em uma nova página no FrontPage.

Importante: A Axis não se responsabiliza por como essas alterações de configuração podem afetar o seu sistema. Se a modificação falhar ou se você obtiver resultados inesperados, talvez seja necessário restaurar as configurações padrão de fábrica descritas no Manual do Usuário.