Видео-скриншоты
О видео-скриншотах
Преимущества видео-скриншотов
Видео-скриншоты очень экономят ресурсы сервера. Мы разработали их, чтобы решить проблемы 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:80/clock/preview.mp4
-
Скриншоты DVR архива. Для них укажите дату и время (точное или приблизительное) как часть URL - об этом далее на этой странице.
http://flussonic:80/clock/2017/04/21/12/10/05-preview.mp4
-
Скриншоты файлов (VoD). Для них указывайте время относительно начала файла (ЧЧ-ММ-СС). См. далее на этой странице.
http://flussonic:80/vod/bunny.mp4/preview-01-23-55.mp4
-
Скриншот первого кадра в файле. Первый кадр иногда содержит просто черный фон.
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>