Geekly articles weekly

Video dari kamera pengintai di situs gratis dan tanpa SMS

Ada kebutuhan untuk menampilkan video dari kamera di situs online. Saya melihat beberapa opsi (saya akan melengkapi opsi dari komentar, jika ada):

  • Berikan akses ke kamera. Hanya memberikan akses ke kamera tidak layak untuk alasan keamanan. Kamera akan berbaring pada beban yang sangat kecil.
  • Layanan komersial. Kami memberi mereka akses ke kamera dan uang, mereka memberi kami tautan untuk memposting di situs. Mereka memecahkan masalah kompatibilitas kamera dan browser pengguna, kinerja saluran dan ketersediaan
  • Di fasilitas mereka. Antara pengguna dan kamera, sesuatu ditempatkan yang bertanggung jawab atas kompatibilitas, kinerja, dan aksesibilitas browser. Kami memecahkan masalah sendiri.

Kami akan mempertimbangkan opsi ini di bawah ini. Karena " flash meninggal " atau " flash akan mati, " opsi menempatkan flash player di situs tidak dipertimbangkan. Jalur sulit menemukan solusi di Internet belum mengarah ke solusi turnkey. Saya harus menciptakan sepeda.

Lebih banyak penemuan di bawah kucing.

Deskripsi sepeda yang dihasilkan lebih detail:


  • Kamera CCTV stream melalui protokol rtsp .
  • ffmpeg mengambil streaming video dari kamera dan membuat video untuk ditampilkan melalui tag video standar html5 .
  • nginx memberikan file yang dibuat kepada pengguna
  • menunjukkan video pada halaman menggunakan hls , lebih tepatnya, implementasi ini

Lebih lanjut tentang pengaturan


Pada setiap streaming dari kamera, Anda perlu menjalankan ffmpeg untuk mengkonversi rtsp ke file yang akan dimengerti oleh hls .

ffmpeg dan streaming dengan suara


/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 saat startup menulis 25 fps di 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.

Cara kerjanya:


Kami mengambil aliran, tanpa transcoding, membuat file dan daftar untuk pemutaran di folder / tmp / www / .

nginx


Kami mempersingkat file default untuk paket debian ke, misalnya, ini:

/ etc / nginx / situs-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;
        }
}

Halaman contoh dengan video:

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

Script harus ditempatkan secara lokal, tidak memiliki dependensi eksternal. Pelajari lebih lanjut tentang pengaturan hls .

Cara kerjanya:


hls terhubung pada halaman dan memutar file dari daftar index1.m3u8. Daftar dan file diperbarui oleh ffmpeg.

Apa yang terjadi:


  • Itu bekerja;
  • Beban terbesar adalah ffmpeg, pada prosesor Atom tiga tahun lalu;
    • Resolusi kamera Full HD tanpa suara - 1%;
    • Resolusi kamera Full HD dengan suara - 5%;

  • Jumlah proses nginx - menonton dengan memuat dan saluran yang tersedia. Kami tidak dapat melihat beban pada prosesor - tidak banyak yang diperlukan untuk hanya mengunggah file kecil.;
  • Server dengan ffmpeg dan nginx dapat ditempatkan di mana saja, tidak harus di hosting atau di lokasi kamera;
  • Kelambatan dari aliran tergantung pada jumlah file dalam daftar dan ukuran (dalam detik) dari file. Misalnya, jeda 10 detik tidak benar-benar memengaruhi tampilan proses pembangunan gedung bertingkat tinggi;
  • File video lebih baik ditempatkan di tmpfs, mereka kecil dan sering ditimpa;
  • Semua layanan harus ditempatkan dalam wadah. Semua paket standar untuk FROM debian:jessie;
  • Sebagai hasil dari operasi, ffmpeg kadang-kadang crash, Anda perlu memonitor dan me-restart jika crash.

    Output atas dari wadah:
    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
  • Anda dapat menontonnya di desktop dan perangkat seluler dengan browser modern;
  • Di masa mendatang tidak akan memerlukan intervensi.

Referensi:


» Implementasi hls
» Demo hls
» ffmpeg
» nginx
» Teks artikel yang diperluas dan diperluas di blog saya

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

More articles:


All Articles