Flussonic Media Server documentation

Video Thumbnails

About video thumbnails Anchor Anchor x2

Why use video thumbnails

If you want to minimize system overhead, use our JPEG-less video thumbnails. Video thumbnails eliminate the drawbacks of JPEG thumbnails: increased CPU usage and increased disk space usage. We can make screenshots available without creating JPEG files. This way, the overhead is almost 0%.

video-thumbnails

Note. JPEG-less video thumbnails work with H.264 video only.

How video thumbnails work

JPEG-less video thumbnails are essentially fragments of H.264 video each containing one frame. If you have an H.264 stream with keyframes, then you already have compressed images in it — keyframes.

Because Flussonic can obtain these images from a video on the fly, there's no need to store them separately. There is no need to produce them either — so CPU time is saved immensely. All you need is to access ready keyframes.

Flussonic takes the first keyframe from each segment and creates an MP4 file from it. This file is sent to the browser, where it is then shown as a picture. This is a video thumbnail.

An example of code for showing a video thumbnail in a browser:

<video src="http://flussonic:8080/clock/preview.mp4" style="width: 640px; height: 480px;" autoplay />

When you insert such a tag to your HTML page, the page will show the thumbnail. It is also possible to access video thumbnails on mobile browsers, or in DVR and VOD player.

Note. Don't forget to remove the thumbnails option from a stream's configuration, it is required only for JPEG.

How to access video thumbnails

To view a thumbnail in a web browser, you should request it by using a special URL. You can use this URL in the HTML tag <video>.

In general, URLs look like this:

http://<domain>/<stream name or path to file>/preview.mp4

Such URLs differ for live, VoD, and DVR thumbnails depending on the place in a video that you want to show on a thumbnail. But they always contain a preview.mp4 file. There are 4 situations:

  1. Live video thumbnails (of a live stream) – in this case, the very latest keyframe is used to create a thumbnail.

    http://flussonic:8080/clock/preview.mp4

  2. Video thumbnails of a DVR archive. You can obtain them by specifying date and time as part of URL. See details later on this page.

    http://flussonic:8080/clock/2017/04/21/12/10/05-preview.mp4

  3. Video thumbnails of a file (VoD). You can obtain them by specifying time passed from the befinning of the file (HH-MM-SS). See details later on this page.

    http://flussonic:8080/vod/bunny.mp4/preview-01-23-55.mp4

  4. A video thumbnail of the first keyframe in a file. The drawback is that the first keyframe sometimes contains a black picture.

    http://flussonic:8080/vod/bunny.mp4/preview.mp4

Video thumbnails of files in VoD Anchor Anchor x2

You can get Flussonic's video thumbnails of any place in a file, not only the beginning. You specify the time and Flussonic shows the nearest keyframe. Technically, Flussonic takes only one (the first) keyframe of each segment.

To access a thumbnail, add time to the URL and put this URL in a <video> tag that you insert into a web page. Use the following syntax for the URL:

http://<domain>/<path>/<filename>.mp4/preview-<Hour-Minute-Second>.mp4

To show the very first keyframe, use the URL without time:

http://<domain>/<path>/<filename>.mp4/preview.mp4

This example shows a thumbnail of the video at 02:24:45:

<video src="http://flussonic:8080/vod/bunny.mp4/preview-02-24-45.mp4" style="width: 640px; height: 480px;" autoplay />

Flussonic redirects to the URL that has a calculated keyframe number instead of the specified time.

Video thumbnails of DVR Anchor Anchor x2

It is possible to access video thumbnails from DVR in the same manner as with JPEG thumbnails: for the timestamp 1492776605 you need to request http://flussonic:8080/clock/2017/04/21/12/10/05-preview.mp4

But we have implemented a more convenient way to access these thumbnails. If you know that somewhere in 10 minutes after a point in time you have recorded video, you can request unexistent URL. For 1492776530, request http://flussonic:8080/clock/2017/04/21/12/08/50-preview.mp4:

$ curl -v http://localhost:8080/clock/2017/04/21/12/08/50-preview.mp4
*   Trying ::1...
* Connected to localhost (::1) port 8080 (#0)
> GET /clock/2017/04/21/12/08/50-preview.mp4 HTTP/1.1
> Host: localhost:8080
> User-Agent: curl/7.43.0
> Accept: */*
> 
< HTTP/1.1 302 Found
< Connection: keep-alive
< Date: Fri, 21 Apr 2017 14:03:15 GMT
< Content-Length: 70
< Server: Flussonic
< X-Route-Time: 664
< X-Run-Time: 13522
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: GET, OPTIONS
< Access-Control-Expose-Headers: Server, range, X-Run-Time, Content-Length
< Access-Control-Allow-Headers: x-vsaas-session, origin, authorization, accept, range
< Location: http://localhost:8080/clock/2017/04/21/12/10/05-preview.mp4
< 
Location: http://localhost:8080/clock/2017/04/21/12/10/05-preview.mp4

Flussonic Media Server can forward your browser to a really existing thumbnail. This approach will save your cache: browser will make two requests, but only existing one will be saved to browser cache, it prevents it from spoiling.

For existing thumbnail Flussonic Media Server will send header X-Thumbnail-Utc: 1492776605, you can use it to understand real URL of thumbnails as browser will not tell you about redirect.

Video thumbnails on mobile Anchor Anchor x2

It is rather tricky to show video thumbnails on mobile phones, but we give you a hint how to do it:

<video id="previewSource" src="http://flussonic:8080/clock/preview.mp4" style="display: none;" autoplay/></video>
<canvas id="preview" style="width: 640px; height: 480px;"></canvas>
<script>
  var previewSource = document.getElementById("previewSource");
  var preview = document.getElementById("preview");

  previewSource.addEventListener("loadeddata", function() {
    var context = preview.getContext("2d");
    var w = previewSource.videoWidth;
    var h = previewSource.videoHeight;

    preview.width = w;
    preview.height = h;

    context.fillRect(0, 0, w, h);
    context.drawImage(previewSource, 0, 0, w, h);
  });
</script>