Видео с камеры наблюдения на сайте бесплатно и без смс

Появилась необходимость показывать видео с камеры на сайте в режиме онлайн. Виделось несколько вариантов (дополню вариантами из комментов, если будут):

Дать доступ к камере. Просто доступ к камере давать не стоит по соображениям безопасности. Камера ляжет уже при очень небольшой нагрузке.
Коммерческая услуга. Мы им доступ к камере и деньги, они нам ссылку для размещения на сайте. Они же решают проблему совместимости камеры и браузеров пользователей, производительности канала и доступности
На своих мощностях. Между пользователем и камерой ставится нечто, что отвечает за совместимость с браузерами, производительность и доступность. Проблемы решаем сами.

Этот вариант рассмотрим ниже. Т.к. "flash умер" или "flash вот-вот умрет", вариант с размещением flash плейера на сайте не рассматривался. Тернистый путь поисков решений в интернетах не привел к готовому решению. Пришлось изобрести велосипед.

Подробнее изобретения под катом.

Описание полученного велосипеда подробнее:

камера видеонаблюдения отдает поток по протоколу rtsp ^[1].
ffmpeg ^[2] берет видео поток с камеры и создает видео для показа через тег video стандарта html5 ^[3].
nginx ^[4] отдает созданные файлы пользователям
видео на странице показываем с помощью hls ^[5], точнее вот эта реализация ^[6]

Подробнее о настройках

На каждый поток с камеры надо запустить ffmpeg ^[2] для преобразования rtsp ^[1] в файлы который поймет hls ^[5].

ffmpeg и поток со звуком

/usr/bin/ffmpeg 
  -i  rtsp://<этот путь можно найти через ONVIF Device Manager>  
  -ar 44100 
  -acodec aac -ac 1 -strict -2 -crf 18 
  -c:v copy -preset ultrafast 
  -flags -global_header 
  -fflags flush_packets -tune zerolatency 
-hls_time 1 -hls_list_size 3 -hls_wrap 4 -hls_flags delete_segments -start_number 0 
  /tmp/www/index1.m3u8

Как работает:

Берем поток, без перекодирования создаем файлы и список для воспроизведения в папке /tmp/www/.

nginx

Сокращаем стандартный для пакета debian ^[7]файл default до, например, такого:

/etc/nginx/sites-enabled/default

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        access_log off;
        error_log /dev/null;
        root /tmp/www;
        index index.html;
        server_name _;
        location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }
}

Пример страницы с видео:

/tmp/www/index.html

<!DOCTYPE html>
<html>
<head>
<title>Заголовок</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/hls.js/latest/hls.min.js"></script>
<video id="video"></video>
<script>
  if(Hls.isSupported()) {
    var video = document.getElementById('video');
    var hls = new Hls();
    hls.loadSource('/index1.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
      video.play();
  });
 }
</script>

Скрипт стоит разместить локально, он не имеет внешних зависимостей. Подробнее о настройках hls ^[8].

Как работает:

на странице подключается hls и воспроизводит файлы из списка index1.m3u8. Список и файлы обновляются ffmpeg.

Что получилось:

Работает;
Самую большую нагрузку создает ffmpeg, на процессоре Atom трехлетней давности;
- Разрешение камеры HD без звука — 1%;
- Разрешение камеры HD со звуком — 5%;
Количество процессов nginx — смотреть по нагрузке и доступному каналу. Нагрузку на процессор увидеть не удалось — не очень много надо на просто отдачу небольших файлов.;
Сервер с ffmpeg и nginx можно разместить где угодно, не обязательно на хостинге ^[9] или в месте расположения камер;
Отставание от потока зависит от количества файлов в списке и размера(в секундах) файла. Например отставание в 10 секунд не очень влияет на просмотр процесса строительства многоэтажки;
Видеофайлы лучше размещать на tmpfs, они имеют небольшие размеры и часто они перезаписываются;
Весь сервис стоит поместить в контейнер. Все пакеты стандартные для FROM debian:jessie;

По итогам эксплуатации ffmpeg иногда падает, за ним нужно следить и перезапускать если упал.

Вывод top из контейнера:

top - 11:05:20 up 6 days, 12:15,  0 users,  load average: 1.29, 1.09, 1.03
Tasks:  17 total,   1 running,  16 sleeping,   0 stopped,   0 zombie
%Cpu(s): 38.8 us,  1.0 sy,  0.0 ni, 59.6 id,  0.0 wa,  0.0 hi,  0.5 si,  0.0 st
KiB Mem:  16359132 total, 16027988 used,   331144 free,   782968 buffers
KiB Swap:  6369276 total,     3776 used,  6365500 free. 12784916 cached Mem

  PID USER      PR  NI    VIRT    RES    SHR S  %CPU %MEM     TIME+ COMMAND
  281 root      20   0  341040  29192  19632 S   4.7  0.2  10:08.39 ffmpeg
   16 root      20   0  315888  27944  18984 S   1.0  0.2   2:50.95 ffmpeg
    9 root      20   0   46916  15128   6408 S   0.3  0.1   0:58.04 supervisord

Смотреть можно на десктопах и мобильных устройствах с современными браузерами;
В обозримом будущем не потребует вмешательства.

Ссылки:

» Реализация hls ^[6]
» Демо работы hls ^[10]
» ffmpeg ^[11]
» nginx ^[12]
» Дополненный и расширенный текст статьи на моём блоге ^[13]

Автор: ErshoFF

Источник ^[14]

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/nginx/238779

Ссылки в тексте:

[1] rtsp: https://ru.wikipedia.org/wiki/RTSP

[2] ffmpeg: https://ffmpeg.org

[3] video стандарта html5: http://htmlbook.ru/html/video

[4] nginx: http://nginx

[5] hls: https://ru.wikipedia.org/wiki/HLS

[6] реализация: https://github.com/dailymotion/hls.js/tree/master

[7] debian : https://www.debian.org/index.ru.html

[8] Подробнее о настройках hls: https://github.com/dailymotion/hls.js/tree/master#getting-started

[9] хостинге: https://www.reg.ru/?rlink=reflink-717

[10] Демо работы hls: http://dailymotion.github.io/hls.js/demo/

[11] ffmpeg: https://ffmpeg.org/

[12] nginx: https://nginx.org/ru/

[13] Дополненный и расширенный текст статьи на моём блоге: https://blog.erchov.ru/2017/01/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-%D1%81-%D0%BA%D0%B0%D0%BC%D0%B5%D1%80%D1%8B-%D0%BD%D0%B0%D0%B1%D0%BB%D1%8E%D0%B4%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-%D1%81%D0%B0%D0%B9%D1%82%D0%B5-%D0%B1%D0%B5%D1%81/

[14] Источник: https://geektimes.ru/post/285342/

Нажмите здесь для печати.