Geekly articles weekly

Vídeo da câmera de vigilância no site gratuitamente e sem SMS

Havia uma necessidade de mostrar o vídeo da câmera no site online. Vi várias opções (complementarei as opções dos comentários, se houver):

  • Dê acesso à câmera. Basta dar acesso à câmera não vale a pena por razões de segurança. A câmera já está deitada com uma carga muito pequena.
  • Serviço comercial. Damos a eles acesso à câmera e dinheiro, eles nos dão um link para postar no site. Eles resolvem o problema de compatibilidade da câmera e do navegador do usuário, desempenho e disponibilidade do canal
  • Nas suas instalações. Entre o usuário e a câmera, é colocado algo responsável pela compatibilidade, desempenho e acessibilidade do navegador. Nós mesmos resolvemos os problemas.

Vamos considerar esta opção abaixo. Porque " flash morreu " ou " flash está prestes a morrer " , a opção de colocar um flash player em um site não foi considerada. O caminho difícil de encontrar soluções na Internet não levou a uma solução pronta para uso. Eu tive que inventar uma bicicleta.

Mais invenções sob o gato.

Descrição da bicicleta resultante em mais detalhes:


  • Fluxos de câmera de CFTV via protocolo rtsp .
  • O ffmpeg pega um fluxo de vídeo da câmera e cria um vídeo para exibição através da tag de vídeo do padrão html5 .
  • nginx fornece arquivos criados para usuários
  • mostre o vídeo na página usando hls , mais precisamente, essa implementação

Mais sobre configurações


Em cada fluxo da câmera, você precisa executar o ffmpeg para converter rtsp em arquivos que o hls entenderá .

ffmpeg e stream com som


/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
ffmpeg na inicialização grava 25 fps em FullHD
Guessed Channel Layout for  Input Stream #0.1 : mono
Input #0, rtsp, from 'rtsp://192.168.X.X:554/user=admin_password=tlJwpbo6_channel=1_stream=0.sdp?':
  Metadata:
    title           : RTSP Session
  Duration: N/A, start: 0.000000, bitrate: N/A
    Stream #0:0: Video: h264 (Baseline), yuv420p, 1920x1080, 25 fps, 9 tbr, 90k tbn, 50 tbc
    Stream #0:1: Audio: pcm_alaw, 8000 Hz, 1 channels, s16, 64 kb/s
Output #0, hls, to '/tmp/www/index1.m3u8':
  Metadata:
    title           : RTSP Session
    encoder         : Lavf56.25.101
    Stream #0:0: Video: h264, yuv420p, 1920x1080, q=2-31, 25 fps, 9 tbr, 90k tbn, 25 tbc
    Stream #0:1: Audio: aac, 44100 Hz, mono, fltp, 128 kb/s
    Metadata:
      encoder         : Lavc56.26.100 aac
Stream mapping:
  Stream #0:0 -> #0:0 (copy)
  Stream #0:1 -> #0:1 (pcm_alaw (native) -> aac (native))
, .
noname.

Como funciona:


Tomamos um fluxo, sem transcodificação, criamos arquivos e uma lista para reprodução na pasta / tmp / www / .

nginx


Reduzimos o arquivo padrão do pacote debian para, por exemplo, este:

/ etc / nginx / sites-enabled / padrão
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;
        }
}

Página de exemplo com vídeo:

/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>

O script deve ser colocado localmente, não possui dependências externas. Saiba mais sobre as configurações de hls .

Como funciona:


hls está conectado na página e reproduz arquivos da lista index1.m3u8. A lista e os arquivos são atualizados pelo ffmpeg.

O que aconteceu:


  • Isso funciona;
  • A maior carga é o ffmpeg, em um processador Atom há três anos;
    • Resolução da câmera Full HD sem som - 1%;
    • Resolução da câmera Full HD com som - 5%;

  • Número de processos nginx - assista por carga e canal disponível. Não conseguimos ver a carga no processador - não é preciso muito para simplesmente fazer upload de arquivos pequenos.;
  • Um servidor com ffmpeg e nginx pode ser colocado em qualquer lugar, não necessariamente em uma hospedagem ou no local das câmeras;
  • O atraso do fluxo depende do número de arquivos na lista e do tamanho (em segundos) do arquivo. Por exemplo, um atraso de 10 segundos realmente não afeta a visualização do processo de construção de um arranha-céu;
  • Os arquivos de vídeo são melhor colocados em tmpfs, são pequenos e geralmente substituídos;
  • Todo o serviço deve ser colocado em um contêiner. Todos os pacotes são padrão para FROM debian:jessie;
  • Como resultado da operação, o ffmpeg às vezes trava, é necessário monitorá-lo e reiniciar se ele trava.

    Topo de saída do contêiner:
    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
  • Você pode assisti-lo em computadores e dispositivos móveis com navegadores modernos;
  • No futuro previsível, não será necessária intervenção.

Referências:


» Implementação de hls
» Demonstração de hls
» ffmpeg
» nginx
» O texto expandido e expandido do artigo no meu blog

Source: https://habr.com/ru/post/pt401107/

More articles:


All Articles