Проблемы с созданием миниатюры для потока dash.js?

Вопрос или проблема

<AdaptationSet contentType="image" id="5" mimeType="image/jpeg">
  <BaseURL>
    http://origin.yourdomain.com/storage/thumbs/video_id/
  </BaseURL>
  <SegmentTemplate duration="120" media="$RepresentationID$/number/tile$Number%03d$.jpg" startNumber="1"/>
  <Representation bandwidth="12895" height="432" id="thumbnails_256x144" width="1024">
    <EssentialProperty schemeIdUri="http://dashif.org/guidelines/thumbnail_tile" value="4x3"/>
  </Representation>
</AdaptationSet>

ffmpeg -i {file} -deadline good -movflags +faststart -map_metadata -1 \
    -c:a libopus -c:v libvpx-vp9 -pix_fmt yuv420p \
    -map 0:a:0 -b:a:0 128k \
    -map 0:v:0 -filter:v:0 scale=-1:144,fps=30 -b:v:0 60k
    -init_seg_name "init-$RepresentationID$.$ext$"\
    -media_seg_name "sg-$RepresentationID$-$Number%05d$.$ext$" \
    -dash_segment_type webm \
    -use_template 1 -use_timeline 1 -seg_duration 9 \
    -adaptation_sets "id=0, streams=v id=0, streams=a" \
    -f dash {path}manifest.mpd

Ответ или решение

Создание миниатюрной дорожки для DASH-потока с использованием dash.js может показаться сложной задачей, особенно если вы хотите добавить такие миниатюры к существующим дорожкам видео и аудио. Давайте рассмотрим, как можно это реализовать.

1. Структура манифеста: Как вы правильно заметили, для добавления миниатюр необходимо создать отдельный AdaptationSet для миниатюр в вашем MPD-файле. В вашем примере структура выглядит корректно:

<AdaptationSet contentType="image" id="5" mimeType="image/jpeg">
  <BaseURL>
    http://origin.yourdomain.com/storage/thumbs/video_id/
  </BaseURL>
  <SegmentTemplate duration="120" media="$RepresentationID$/number/tile$Number%03d$.jpg" startNumber="1"/>
  <Representation bandwidth="12895" height="432" id="thumbnails_256x144" width="1024">
    <EssentialProperty schemeIdUri="http://dashif.org/guidelines/thumbnail_tile" value="4x3"/>
  </Representation>
</AdaptationSet>

2. Настройка FFMpeg: Чтобы добавить поток миниатюр в ваш существующий процесс кодирования с помощью FFMpeg, необходимо внести изменения в команду, которую вы используете. Ваш текущий вызов выглядит следующим образом:

ffmpeg -i {file} -deadline good -movflags +faststart -map_metadata -1 \
    -c:a libopus -c:v libvpx-vp9 -pix_fmt yuv420p \
    -map 0:a:0 -b:a:0 128k \
    -map 0:v:0 -filter:v:0 scale=-1:144,fps=30 -b:v:0 60k
    -init_seg_name "init-$RepresentationID$.$ext$"\
    -media_seg_name "sg-$RepresentationID$-$Number%05d$.$ext$" \
    -dash_segment_type webm \
    -use_template 1 -use_timeline 1 -seg_duration 9 \
    -adaptation_sets "id=0, streams=v id=0, streams=a" \
    -f dash {path}manifest.mpd

3. Добавление миниатюр: Чтобы добавить поток миниатюр, нужно сделать следующее:

• Задать новый -map для миниатюрного видео. В этом примере добавим новое видео с миниатюрами.
• Добавить параметры фильтров, чтобы генерировать миниатюры в нужном формате и размере.

Пример команды с добавлением миниатюр

ffmpeg -i {file} -deadline good -movflags +faststart -map_metadata -1 \
    -c:a libopus -map 0:a:0 -b:a:0 128k \
    -c:v libvpx-vp9 -map 0:v:0 -filter:v:0 scale=-1:144,fps=30 -b:v:0 60k \
    -map 0:v:0 -vf "thumbnail,scale=1024:432" -frames:v 1 -b:v:1 128k \
    -init_seg_name "init-$RepresentationID$.$ext$"\
    -media_seg_name "sg-$RepresentationID$-$Number%05d$.$ext$" \
    -dash_segment_type webm \
    -use_template 1 -use_timeline 1 -seg_duration 9 \
    -adaptation_sets "id=0, streams=v id=0, streams=a, id=5, streams=v" \
    -f dash {path}manifest.mpd

В этой команде:

• -map 0:v:0 -vf "thumbnail,scale=1024:432" -frames:v 1 -b:v:1 128k позволяет извлекать миниатюры из основного видео с заданными параметрами.

4. Использование provideThumbnail: После создания манифеста и корректного его наполнения, вы можете использовать метод provideThumbnail() в dash.js, передавая ему соответствующий временной метник, чтобы извлечь нужную миниатюру во время воспроизведения. Например:

player.provideThumbnail(timestamp);

Таким образом, вы можете интегрировать дополнительные потоки миниатюр в ваше DASH-видео и успешно управлять ими через dash.js. Надеюсь, это поможет вам успешно реализовать вашу задачу. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их!