Geekly articles weekly

Vidéo de la caméra de surveillance sur le site gratuitement et sans SMS

Il était nécessaire de montrer la vidéo de la caméra sur le site en ligne. J'ai vu plusieurs options (je compléterai les options des commentaires, le cas échéant):

  • Donnez accès à la caméra. Donner simplement accès à la caméra n'en vaut pas la peine pour des raisons de sécurité. La caméra se couchera déjà à une très petite charge.
  • Service commercial. Nous leur donnons accès à la caméra et à l'argent, ils nous donnent un lien pour poster sur le site. Ils résolvent le problème de la compatibilité de la caméra et du navigateur utilisateur, des performances et de la disponibilité des canaux
  • Dans leurs installations. Entre l'utilisateur et la caméra, quelque chose est placé qui est responsable de la compatibilité, des performances et de l'accessibilité du navigateur. Nous résolvons les problèmes nous-mêmes.

Nous considérerons cette option ci-dessous. Parce que « flash est mort » ou « flash est sur le point de mourir », l'option de placer un lecteur flash sur un site n'a pas été envisagée. La voie épineuse de trouver des solutions sur Internet n'a pas conduit à une solution clé en main. J'ai dû inventer un vélo.

Plus d'inventions sous chat.

Description plus détaillée du vélo résultant:


  • Flux de caméras de vidéosurveillance via le protocole rtsp .
  • ffmpeg prend un flux vidéo de la caméra et crée une vidéo à afficher via le tag vidéo de la norme html5 .
  • nginx donne les fichiers créés aux utilisateurs
  • afficher la vidéo sur la page en utilisant hls , plus précisément, cette implémentation

En savoir plus sur les paramètres


Sur chaque flux de la caméra, vous devez exécuter ffmpeg pour convertir rtsp en fichiers que hls comprendra .

ffmpeg et stream avec son


/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 au démarrage écrit 25 fps sur 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.

Comment ça marche:


Nous prenons un flux, sans transcodage, créons des fichiers et une liste pour la lecture dans le dossier / tmp / www / .

nginx


Nous raccourcissons le fichier par défaut du paquet debian à, par exemple, ceci:

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

Exemple de page avec vidéo:

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

Le script doit être placé localement, il n'a pas de dépendances externes. En savoir plus sur les paramètres hls .

Comment ça marche:


hls est connecté sur la page et lit les fichiers de la liste index1.m3u8. La liste et les fichiers sont mis à jour par ffmpeg.

Que s'est-il passé:


  • Ça marche;
  • La plus grosse charge est ffmpeg, sur un processeur Atom il y a trois ans;
    • Résolution de la caméra Full HD sans son - 1%;
    • Résolution de la caméra Full HD avec son - 5%;

  • Nombre de processus nginx - veillez par charge et par canal disponible. Nous n'avons pas pu voir la charge du processeur - il ne faut pas grand-chose pour simplement télécharger de petits fichiers.
  • Un serveur avec ffmpeg et nginx peut être placé n'importe où, pas nécessairement sur un hébergement ou à l'emplacement des caméras;
  • Le décalage du flux dépend du nombre de fichiers dans la liste et de la taille (en secondes) du fichier. Par exemple, un décalage de 10 secondes n'affecte pas vraiment la visualisation du processus de construction d'un immeuble de grande hauteur;
  • Les fichiers vidéo sont mieux placés sur tmpfs, ils sont petits et souvent écrasés;
  • Tout service doit être placé dans un conteneur. Tous les packages sont standard pour FROM debian:jessie;
  • À la suite de l'opération, ffmpeg se bloque parfois, vous devez le surveiller et redémarrer s'il se bloque.

    Sortie supérieure du conteneur:
    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
  • Vous pouvez le regarder sur des ordinateurs de bureau et des appareils mobiles avec des navigateurs modernes;
  • Dans un avenir prévisible, aucune intervention ne sera nécessaire.

Références:


» Implémentation de hls
» Démo de hls
» ffmpeg
» nginx
» Le texte étendu et développé de l'article sur mon blog

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

More articles:


All Articles