Simple Web based video stream monitor. #490

mattheys · 2021-01-08T16:32:56Z

mattheys
Jan 8, 2021

Hi, just thought I would share my simple web based video monitor using MPEG-DASH to stream the video. This isn't strictly Frigate related but people might find it useful.

I like it as it's a quick way to pull up all my cameras in one go and because I'm only transcoding audio the cpu usage is really minimal. There is a slight delay on the streams, maybe 30s but I like this because if I've heard something I want to check out then it's still in the buffer when I open the page, plus I don't need any software installed to access it.

I'm still trying to work out how I can get the player to attempt to recconect if there is an interuption in the stream but a refresh on the page works as long as the stream has resumed.

TMPFS

First of all I created a tmpfs mount point to store the videos on, this gives you 100MB on /tmp/dash but depending on the number of cameras or history you want to keep you will need to adjust that value. You can't do this directly with docker as dockers tmpfs mounts can't be shared with other containers.

Add this to your /etc/fstab

tmpfs /tmp/dash tmpfs defaults,noatime,nosuid,nodev,mode=1777,size=100M 0 0

and then sudo mount -a

Docker

  dash-garage:
    container_name: dash-garage
    image: linuxserver/ffmpeg
    volumes:
      - /tmp/dash:/tmp/dash
    command: -i rtsp://192.168.1.90:8554/garage -c:v copy -c:a copy -ldash 1 -window_size 5 -remove_at_exit 1 -init_seg_name "init-garage-$$RepresentationID$$.$$ext$$"  -media_seg_name "garage-$$RepresentationID$$-$$Number%05d$$.$$ext$$" /tmp/dash/garage.mpd
    restart: unless-stopped

  dash-porch:
    container_name: dash-porch
    image: linuxserver/ffmpeg
    volumes:
      - /tmp/dash:/tmp/dash
    command: -i rtsp://192.168.1.90:8554/porch -c:v copy -c:a aac -bsf:a aac_adtstoasc -window_size 5 -remove_at_exit 1 -init_seg_name "init-porch-$$RepresentationID$$.$$ext$$"  -media_seg_name "porch-$$RepresentationID$$-$$Number%05d$$.$$ext$$" /tmp/dash/porch.mpd
    restart: unless-stopped

  dash-back:
    container_name: dash-back
    image: linuxserver/ffmpeg
    volumes:
      - /tmp/dash:/tmp/dash
    command: -i rtsp://192.168.1.90:8554/back -c:v copy -c:a aac -window_size 5 -remove_at_exit 1 -init_seg_name "init-back-$$RepresentationID$$.$$ext$$"  -media_seg_name "back-$$RepresentationID$$-$$Number%05d$$.$$ext$$" /tmp/dash/back.mpd
    restart: unless-stopped

  dash-nursery:
    container_name: dash-nursery
    image: linuxserver/ffmpeg
    volumes:
      - /tmp/dash:/tmp/dash
    command: -i rtsp://192.168.1.90:8554/nursery -c:v copy -c:a aac -window_size 5 -remove_at_exit 1 -init_seg_name "init-nursery-$$RepresentationID$$.$$ext$$"  -media_seg_name "nursery-$$RepresentationID$$-$$Number%05d$$.$$ext$$" /tmp/dash/nursery.mpd
    restart: unless-stopped

HTML

You need to include the dash javascript library otherwise the video tags don't work.

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' lang='' xml:lang=''>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/3.2.0/dash.all.min.js" integrity="sha512-wFaKU7BcXbvVVGi0vDUKv4GXc9Hrp4RjGZorG8KlpRurhpvgCXiLhcafCj3y/gKY5CKAuyu00b+BvJ+vyRD0Pg==" crossorigin="anonymous"></script>
        <style>
            video {
                width: 640px;
                height: 360px;
            }
        </style>
</head>
<body>

<video controls autoplay>
  <source width="320" height="240"  src="/dash/garage.mpd" type="application/dash+xml">
  Your browser does not support the video tag.
</video>
<video controls autoplay>
  <source width="320" height="240"  src="/dash/porch.mpd" type="application/dash+xml">
  Your browser does not support the video tag.
</video>
<video controls autoplay>
  <source width="320" height="240"  src="/dash/back.mpd" type="application/dash+xml">
  Your browser does not support the video tag.
</video>
<video controls autoplay>
  <source width="320" height="240"  src="/dash/nursery.mpd" type="application/dash+xml">
  Your browser does not support the video tag.
</video>


</body>
</html>

blakeblackshear · 2021-01-08T17:32:21Z

blakeblackshear
Jan 8, 2021
Maintainer

Why mpeg dash and not hls?

1 reply

mattheys Jan 8, 2021
Author

Because I got it working, I tried hls to start with but was having an issue with it and Firefox. FFMPEG can output hls at the same time but I was having an issue with the options to change the playlist name so I gave up, my version said that -hls_master_name didn't exist, going to try again with multiple folders so that the different streams can have the same playlist name in another folder.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simple Web based video stream monitor. #490

{{title}}

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Simple Web based video stream monitor. #490

mattheys Jan 8, 2021

TMPFS

Docker

HTML

Replies: 1 comment · 1 reply

blakeblackshear Jan 8, 2021 Maintainer

mattheys Jan 8, 2021 Author

mattheys
Jan 8, 2021

Replies: 1 comment 1 reply

blakeblackshear
Jan 8, 2021
Maintainer

mattheys Jan 8, 2021
Author