Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Давайте декодируем кодеки

Давайте декодируем кодеки

Доклад о форматах видео и картинок для web

Polina Gurtovaya

May 29, 2021
Tweet

More Decks by Polina Gurtovaya

Other Decks in Programming

Transcript

  1. ff
    er 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49
    48 44 52 00 00 01 f4 00 00 01 5e 08 06 00 00 00
    73 51 ed 02 00 00 00 04 67 41 4d 41 00 00 b1 8f
    0b fc 61 05 00 ... 160035 more bytes>
    Давайте декодируем
    кодеки!

    View full-size slide

  2. 3
    co-dec
    ff
    er 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49
    48 44 52 00 00 01 f4 00 00 01 5e 08 06 00 00 00
    73 51 ed 02 00 00 00 04 67 41 4d 41 00 00 b1 8f
    0b fc 61 05 00 ... 160035 more bytes>

    View full-size slide

  3. Зачем мне что-то знать о кодекаx?
    Видео-кодеки генерируют
    примерно 80% нашего трафика


    Пригодится для WebRTC


    Можно улучшить качество
    изображений и видео, что
    положительно влияет на Core
    WebVitals


    Открываются новые интересные
    возможности
    4

    View full-size slide

  4. 5
    Зачем вообще что-то сжимать?

    View full-size slide

  5. 6
    Что же выбрать?

    View full-size slide

  6. 7
    Картинки в 2021 году

    View full-size slide

  7. 8
    Raw
    512Kb
    JPEG
    15Kb
    AVIF
    8Kb

    View full-size slide

  8. Compression: intra & inter
    11

    View full-size slide

  9. Видео и картинки это почти
    одно и то же :)
    12

    View full-size slide

  10. Codec-agnostic and generic image container format:
    ISO/IEC 23000–12 standard (a.k.a. HEIF) от MPEG
    14

    View full-size slide

  11. 19
    VP* (WebP), AV1 (AVIF) - royalty-free


    А у JPEG все патенты уже истекли :)

    View full-size slide

  12. Intraframe compression 101
    20

    View full-size slide

  13. 1. Меняем color space +
    Subsampling
    21

    View full-size slide

  14. 22
    YUV (YCbCr, Y’CbCr)

    View full-size slide

  15. 23
    Subsampling

    View full-size slide

  16. 2. Разбиваем все на блоки
    24

    View full-size slide

  17. 25
    Разбиваем на блоки

    View full-size slide

  18. 26
    Иерархия блоков

    View full-size slide

  19. 3. Предсказываем
    содержимое блоков
    27

    View full-size slide

  20. 28
    Предсказания по направлениям

    View full-size slide

  21. 29
    Какие еще бывают предсказания (AV1)
    1. DC


    2. Smooth (Vertical + Horizontal)


    3. Recursive-based
    fi
    ltering


    4. Chroma from luma


    5. Color Palette


    6. Intra Block Copy

    View full-size slide

  22. 4. Подготавливаем разницу между
    предсказаниями и настоящими
    значениями для сжатия
    30

    View full-size slide

  23. Обычный базис
    31

    View full-size slide

  24. 32
    DCT-преобразование

    View full-size slide

  25. 33
    Transforms
    1. DCT (I, II)


    2. Wavelets (JPEG-2000)


    3. DST


    4. ADST (
    fl
    ipADST)


    5. KLT (Karhunen-Loeve in the future)

    View full-size slide

  26. 5. Вносим потери
    34

    View full-size slide

  27. Quantization
    35
    128 -163 7 -27 -3 3 -8 -
    3

    103 122 73 -1 -15 -17 0
    6

    148 20 -24 -44 -13 6 -6 -
    3

    12 -36 -67 4 13 -5 2 -
    4

    -41 -5 -1 -21 6 0 5
    3

    -40 -3 5 -2 5 7 -4 -
    1

    -35 11 10 16 -1 -2 -2 -
    1

    -7 -4 10 15 1 0 -5 -
    3

    8 8 8 9 13 19 28 4
    3

    8 9 10 14 17 20 27 3
    8

    8 10 12 16 22 31 46 6
    8

    9 14 16 20 27 37 53 7
    8

    13 17 22 27 35 47 66 9
    5

    19 20 31 37 47 62 85 11
    9

    28 27 46 53 66 85 113 15
    6

    43 38 68 78 95 119 156 20
    9

    View full-size slide

  28. 16 -19 1 -2 0 0 0
    0

    13 14 7 0 0 0 0
    0

    18 2 -1 -2 0 0 0
    0

    1 -2 -3 0 0 0 0
    0

    -2 0 0 0 0 0 0
    0

    -1 0 0 0 0 0 0
    0

    0 0 0 0 0 0 0
    0

    0 0 0 0 0 0 0 0
    Quantization
    36
    8 8 8 9 13 19 28 4
    3

    8 9 10 14 17 20 27 3
    8

    8 10 12 16 22 31 46 6
    8

    9 14 16 20 27 37 53 7
    8

    13 17 22 27 35 47 66 9
    5

    19 20 31 37 47 62 85 11
    9

    28 27 46 53 66 85 113 15
    6

    43 38 68 78 95 119 156 20
    9

    View full-size slide

  29. 6. Сжимаем то что
    получилось без потерь
    37

    View full-size slide

  30. 6. Убираем артефакты
    38

    View full-size slide

  31. 39
    Фильтры
    1. Deblocking
    fi
    lter


    2. Constrained directional
    enhancement
    fi
    lter


    3. Loop restoration
    fi
    lters

    View full-size slide

  32. 7. И еще пара трюков
    40

    View full-size slide

  33. 41
    Progressive & SVC

    View full-size slide

  34. 43
    AV1
    1. Film Grain Synthesis


    2. Superscaling

    View full-size slide

  35. 44
    Multithreading & hardware
    1. Hardware extensions


    2. Tiles / Slices

    View full-size slide

  36. 45
    Adaptive transforms,
    fi
    lters & quantization


    View full-size slide

  37. 46
    JPEG H.264 VP8(WebP) H.265 AV1 (AVIF)
    Блоки
    Фиксированные


    8 x 8
    Дерево


    От 16 x 16 до 4 x 4
    Дерево


    От 16 x 16 до 4 x 4
    Дерево


    От 64 x 64


    до 4 x 4
    Дерево


    От 128 x 128


    До 4 x 4
    Фильтры - Deblocking Deblocking Deblocking + … Deblocking + CDEF


    + еще 2


    Предсказания -
    DC/
    directional(V+H)/
    Plane
    DC/directional (V +
    H)/TM
    DC/directional
    (33)/Planar
    DC/directional (56
    directions)/Paeth/
    Smooth/CfL/IBC
    Transform DCT DCT DCT/WHT DCT/DST
    DCT/ADST/
    FlipADST/IDTX
    Сжатие без потерь Hu
    ff
    man
    Boolean Arithmetic
    Coder
    Boolean Arithmetic
    Coder
    CABAC
    Multi-symbol
    Entropy Coding


    Quantization
    Одна
    произвольная
    матрица на весь
    файл
    Adaptive Adaptive Adaptive Adaptive
    Royalty-free

    View full-size slide

  38. 47
    Так что же лучше?

    View full-size slide

  39. 48
    Есть стандарт и есть реализация
    JPEG: mozJPEG


    H.264: x264, OpenH264


    H.265: x265


    VP8/VP9: libvpx


    AV1: libaom, SVT-AV1, rav1e, dav1d, libavif

    View full-size slide

  40. 49
    У каждой реализации есть свой
    набор параметров
    arg_def_t cpu_used_av1;


    arg_def_t rowmtarg;


    arg_def_t tile_cols;


    arg_def_t tile_rows;


    arg_def_t enable_tpl_model;


    arg_def_t enable_keyframe_filtering;


    arg_def_t tile_width;


    arg_def_t tile_height;


    arg_def_t lossless;


    arg_def_t enable_cdef;


    arg_def_t enable_restoration;


    arg_def_t enable_rect_partitions;


    arg_def_t enable_ab_partitions;


    arg_def_t enable_1to4_partitions;


    arg_def_t min_partition_size;


    arg_def_t max_partition_size;


    arg_def_t enable_dual_filter;


    arg_def_t enable_chroma_deltaq;


    arg_def_t enable_intra_edge_filter;


    arg_def_t enable_order_hint;


    arg_def_t enable_tx64;


    arg_def_t enable_flip_idtx;


    arg_def_t enable_rect_tx;


    arg_def_t enable_dist_wtd_comp;


    arg_def_t enable_masked_comp;


    arg_def_t enable_onesided_comp;


    arg_def_t enable_interintra_comp;


    arg_def_t enable_smooth_interintra;


    arg_def_t enable_diff_wtd_comp;


    arg_def_t enable_interinter_wedge;


    arg_def_t enable_interintra_wedge;


    arg_def_t enable_global_motion;


    arg_def_t enable_warped_motion;


    arg_def_t enable_filter_intra;


    arg_def_t enable_smooth_intra;


    arg_def_t enable_paeth_intra;


    arg_def_t enable_cfl_intra;


    arg_def_t enable_diagonal_intra;


    arg_def_t force_video_mode;


    arg_def_t enable_obmc;


    arg_def_t enable_overlay;


    arg_def_t enable_palette;


    arg_def_t enable_intrabc;


    arg_def_t enable_angle_delta;


    arg_def_t disable_trellis_quant;


    arg_def_t enable_qm;


    arg_def_t qm_min;


    arg_def_t qm_max;


    arg_def_t reduced_tx_type_set;


    arg_def_t use_intra_dct_only;


    arg_def_t use_inter_dct_only;


    arg_def_t use_intra_default_tx_only;


    arg_def_t quant_b_adapt;


    arg_def_t coeff_cost_upd_freq;


    arg_def_t mode_cost_upd_freq;


    arg_def_t mv_cost_upd_freq;


    arg_def_t num_tg;


    arg_def_t mtu_size;


    arg_def_t timing_info;


    View full-size slide

  41. 50
    PSNR


    SSIM


    MS-SSIM


    VMAF (IQA networks)
    Нужно выбрать правильную
    метрику

    View full-size slide

  42. 51
    Шум


    Качество видео


    Контент
    … и правильный dataset

    View full-size slide

  43. Новые классные апишки
    • WebCodecs


    • WebGPU


    • insertable-streams
    55

    View full-size slide

  44. const decoder = new VideoDecoder({


    output: (frame) => {/* do something */},


    error: console.log


    });


    await videoDecoder.configure({codec: 'vp8'});


    decoder.decode(chunk);


    WebCodecs

    View full-size slide

  45. Insertable-streams
    const stream = await getUserMedia({ video: true });


    const track = stream.getVideoTracks()[0];


    const processor = new MediaStreamTrackProcessor({ track });


    const generator = new MediaStreamTrackGenerator({ kind: 'video' });


    const transformer = new TransformStream({


    async transform(frame, controller) {


    const newFrame = processFrameSomehow(frame);


    videoFrame.close();


    controller.enqueue(newFrame);


    },


    });


    trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);


    trackGenerator.readableControl.pipeTo(trackProcessor.writableControl);


    View full-size slide

  46. Что можно использовать?
    58
    Decode Encode
    JPEG
    WebP
    AVIF
    H.264/AVC
    H.265/HEVC
    VP8
    VP9
    AV1

    View full-size slide

  47. Не бойтесь
    экспериментировать :)
    59

    View full-size slide

  48. Спасибо!
    @polina_gurtovaya
    @pgurtovaya
    [email protected]
    @evilmartians
    @evilmartians_ru
    evilmartians.com
    http:/
    /bit.ly/en-co-de

    View full-size slide