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

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

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

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

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

Note

Видео-скриншоты совместимы только с H.264 потоками.

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

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

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

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

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

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

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

Note

Не забудьте удалить опцию thumbnails из настроек потока, она нужна только для JPEG-скриншотов.

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

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

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

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

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

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

http://FLUSSONIC-IP:80/STREAM_NAME/preview.mp4
Скриншоты DVR архива. Для них укажите дату и время (точное или приблизительное) как часть URL - об этом далее на этой странице.

http://FLUSSONIC-IP:80/STREAM_NAME/1654242430-preview.mp4
Скриншоты файлов (VoD). Для них указывайте время относительно начала файла (ЧЧ-ММ-СС). См. далее на этой странице.

http://FLUSSONIC-IP:80/vod/bunny.mp4/preview-01-23-55.mp4
Скриншот первого кадра в файле. Первый кадр иногда содержит просто черный фон.

http://FLUSSONIC-IP: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 скриншот. Для UTC таймстемпа 1654242430 (чтo соответствует 3 июня 2022 г, 07:47:10 GMT) скриншот будет доступен по URL:

http://FLUSSONIC-IP:80/STREAM_NAME/1654242430-preview.mp4

Человекочитаемый формат времени GMT также поддерживается для совместимости:

http://FLUSSONIC-IP:80/2022/06/03/07/47/10-preview.mp4

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

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

http://FLUSSONIC-IP:80/STREAM_NAME/1654241830-preview.mp4

Для существующего скриншота Flussonic Media Server пришлет HTTP header X-Thumbnail-Utc: 1654242430. Его можно использовать для получения настоящего 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>