Видеонаблюдение через интернет в веб-браузере

Трансляция онлайн видео на веб сайте.

Или как обеспечить кроссбраузерную трансляцию видео с камеры AVReg на своём сайте.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Камера №3</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>

<script type="text/javascript">
// cam 3 full uri: http://localhost:874/avreg-cgi/jpg/image.cgi?camera=3
var avregd_httpd     = 'http://localhost:874';
var avregd_jpeg_path = '/avreg-cgi/jpg/image.cgi';
var cam_nr           = 3; // номер камеры
var base64_auth      = 'dmlld2VyOg=='; // base64_encode("логин:пароль"), 
                                       // хак для http Basic Authentication
                                       // если не нужен запрос пароля
 
var refresh_ms = 300; // =0: обновлять вручную по клику
                      // >0: обновлять по таймауту, в милисекундах
 
var timer = null;
 
// смена кадров посредством новых запросов к серверу
function refresh_img()
{
   var now = new Date();
   var update_url = avregd_httpd + avregd_jpeg_path
                    + '?camera=' + cam_nr
                    + '&ab='     + base64_auth
                    + '&_='      + now.getTime();
   // '&_=' + now.getTime() нужно для гарантированного предотвращения кеширования
   IMG.setAttribute('src', update_url);
};
 
function img_onclick()
{
   if ( refresh_ms <= 0 /* ручное обновление */ )
      refresh_img();
   else {
      if ( timer != null ) {
         clearTimeout(timer);
         timer = null;
         alert("stop video")
      } else {
         timer = setTimeout('refresh_img();', refresh_ms);
         alert("play video");
      }
   }
}
 
function img_onload()
{
   if ( refresh_ms <= 0 /* ручное обновление */ )
      return;
   timer = setTimeout('refresh_img();', refresh_ms);
}
 
function img_onerror()
{
   IMG.setAttribute('alt', 'Ошибка загрузки изображения');
   IMG.style.color = 'Red';
}
</script>
 

<IMG width="640" height="480"
     id="viewport"
     src="http://localhost:874/avreg-cgi/jpg/image.cgi?camera=3&ab=dmlld2VyOg=="
     alt="Загружается изображение с Камеры №3 ..."
     border="1px"
     onclick="img_onclick();" onload="img_onload();" onerror="img_onerror();">
 

<script type="text/javascript">
/* FIXME правильней исп. dom_ready или хотя бы body_onload  */
var IMG = document.getElementById('viewport');
</script>
 
</body>
</html>
manual/applications/video2page.txt · Последние изменения: 2014-09-29