Видео-скриншоты

О видео-скриншотах

Преимущества видео-скриншотов

Видео-скриншоты очень экономят ресурсы сервера. Мы разработали их, чтобы решить проблемы JPEG-скриншотов — большое потребление времени процессора и места на диске. При этом способе ресурсы не потребляются, потому что JPEG файлы не создаются. Скриншоты, полученные новым способом, называются видео-скриншоты.

Как устроены видео-скриншоты

По сути, видео-скриншоты — это фрагменты видео, содержащие всего один кадр. Если у вас есть видеопоток, сжатый по стандарту H.264, то он уже содержит необходимые изображения — ключевые кадры.

Их не нужно получать путем декодирования, тем самым значительно экономится время процессора. А поскольку Flussonic может извлекать эти кадры из видео "на лету", то можно не сохранять их на диске. Всё, что требуется — получить доступ к готовым кадрам.

Flussonic берет первый ключевой кадр из сегмента и делает из него MP4 файл. Он отсылает этот файл браузеру, где он отображается как картинка. Это и есть видео-скриншот.

Пример кода для показа скриншота в браузере:

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

При вставке этого тэга на веб-страницу отобразится скриншот. Можно запрашивать скриншоты для отображения в мобильном браузере, а также они есть в веб-интерфейсе в VoD и в DVR плеере.

Как получить видео-скриншоты

Видео-скриншоты нужно запрашивать по специальному URL. Этот URL можно открыть в браузере или поместить в тэг <video>, чтобы показать на сайте.

В общем случае, URL имеет вид:

http://<домен>/<имя потока или путь к файлу>/preview.mp4

Дополнительно, нужно указать место в видео, на основе которого будет создан скриншот. И здесь есть различия для live потоков, файлов и DVR архивов. Всего четыре случая:

1. Скриншоты live потоков – в этом случае Flussonic использует последний ключевой кадр.

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

2. Скриншоты DVR архива. Для них укажите дату и время (точное или приблизительное) как часть URL - об этом далее на этой странице.

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

3. Скриншоты файлов (VoD). Для них указывайте время относительно начала файла (ЧЧ-ММ-СС). См. далее на этой странице.

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

4. Скриншот первого кадра в файле. Первый кадр иногда содержит просто черный фон.

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

Получение видео-скриншотов файла

Используя видео-скриншоты Flussonic, вы можете получить скриншот любого места внутри файла, а не только первого ключевого кадра. Вы указываете время, и Flussonic находит ближайший ключевой кадр. На самом деле, Flussonic берет только первый ключевой кадр из каждого сегмента.

Чтобы получить скриншот из файла, добавьте время к URL скриншоту и укажите URL в HTML тэге <video>, который вставьте на веб-страницу. Синтаксис URL:

http://<domain>/<path>/<filename>.mp4/preview-<часы-минуты-секунды>.mp4

Если не указывать время, то получим изображение самого первого ключевого кадра в файле:

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

Пример ниже показывает, как получить скриншот с момента 02:24:45:

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

Flussonic производит редирект на URL с номером вычисленного ключевого кадра вместо указанного времени.

Получение видео-скриншотов из архива

Видеоскриншот из архива доступен тем же способом, что и JPEG скриншот: для таймстемпа 1492776605 скриншот будет доступен по URL: http://flussonic:80/clock/2017/04/21/12/10/05-preview.mp4.

Но мы разработали более удобный способ доступа к таким скриншотам. Если вы знаете, что где-то на протяжении 10 минут после заданного момента во времени у вас есть записанное видео, вы можете сделать запрос по несуществующему URL.

Для таймстемпа 1492776530 запросите http://flussonic:80/clock/2017/04/21/12/08/50-preview.mp4:

$ curl -v http://localhost:80/clock/2017/04/21/12/08/50-preview.mp4

*   Trying ::1...
* Connected to localhost (::1) port 80 (#0)
> GET /clock/2017/04/21/12/08/50-preview.mp4 HTTP/1.1
> Host: localhost:80
> 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:80/clock/2017/04/21/12/10/05-preview.mp4
<
Location: http://localhost:80/clock/2017/04/21/12/10/05-preview.mp4

Flussonic Media Server перенаправит ваш браузер на действительно существующий скриншот. Этот способ сбережёт ваш кэш: браузер сделает два запроса, но только существующий будет сохранён в кэше.

Для существующих скриншотов Flussonic Media Server будет присылать HTTP header X-Thumbnail-Utc: 1492776605. Его можно использовать для получения настоящего URL скриншота, так как браузер не сообщает вам о редиректе.

Видео скриншоты в мобильном браузере

Показать видео-скриншот на мобильном достаточно непросто, но мы дадим вам представление о том, как это сделать:

<video id="previewSource" src="http://flussonic:80/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>