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

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

Transcript

1. <Bu 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> Давайте декодируем кодеки!
3. 3 co-dec <Bu 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>
4. Зачем мне что-то знать о кодекаx? Видео-кодеки генерируют примерно 80% нашего трафика Пригодится для WebRTC Можно улучшить качество изображений и видео, что положительно влияет на Core WebVitals Открываются новые интересные возможности 4
5. 5 Зачем вообще что-то сжимать?
6. 6 Что же выбрать?
7. 7 Картинки в 2021 году
8. 8 Raw 512Kb JPEG 15Kb AVIF 8Kb
11. Compression: intra & inter 11
12. Видео и картинки это почти одно и то же :) 12
14. Codec-agnostic and generic image container format: ISO/IEC 23000–12 standard (a.k.a. HEIF) от MPEG 14
19. 19 VP* (WebP), AV1 (AVIF) - royalty-free А у JPEG все патенты уже истекли :)
20. Intraframe compression 101 20
21. 1. Меняем color space + Subsampling 21
22. 22 YUV (YCbCr, Y’CbCr)
23. 23 Subsampling
24. 2. Разбиваем все на блоки 24
25. 25 Разбиваем на блоки
26. 26 Иерархия блоков
27. 3. Предсказываем содержимое блоков 27
28. 28 Предсказания по направлениям
29. 29 Какие еще бывают предсказания (AV1) 1. DC 2. Smooth (Vertical + Horizontal) 3. Recursive-based fi ltering 4. Chroma from luma 5. Color Palette 6. Intra Block Copy
30. 4. Подготавливаем разницу между предсказаниями и настоящими значениями для сжатия 30
31. Обычный базис 31
32. 32 DCT-преобразование
33. 33 Transforms 1. DCT (I, II) 2. Wavelets (JPEG-2000) 3. DST 4. ADST ( fl ipADST) 5. KLT (Karhunen-Loeve in the future)
34. 5. Вносим потери 34
35. 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
36. 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
37. 6. Сжимаем то что получилось без потерь 37
38. 6. Убираем артефакты 38
39. 39 Фильтры 1. Deblocking fi lter 2. Constrained directional enhancement fi lter 3. Loop restoration fi lters
40. 7. И еще пара трюков 40
41. 41 Progressive & SVC
42. 42 SVC
43. 43 AV1 1. Film Grain Synthesis 2. Superscaling
44. 44 Multithreading & hardware 1. Hardware extensions 2. Tiles / Slices
45. 45 Adaptive transforms, fi lters & quantization
46. 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
47. 47 Так что же лучше?
48. 48 Есть стандарт и есть реализация JPEG: mozJPEG H.264: x264, OpenH264 H.265: x265 VP8/VP9: libvpx AV1: libaom, SVT-AV1, rav1e, dav1d, libavif
49. 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;
50. 50 PSNR SSIM MS-SSIM VMAF (IQA networks) Нужно выбрать правильную метрику
51. 51 Шум Качество видео Контент … и правильный dataset
55. Новые классные апишки • WebCodecs • WebGPU • insertable-streams 55
56. const decoder = new VideoDecoder({ output: (frame) => {/* do something */}, error: console.log }); await videoDecoder.configure({codec: 'vp8'}); decoder.decode(chunk); WebCodecs
57. 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);
58. Что можно использовать? 58 Decode Encode JPEG WebP AVIF H.264/AVC H.265/HEVC VP8 VP9 AV1
59. Не бойтесь экспериментировать :) 59
63. Спасибо! @polina_gurtovaya @pgurtovaya hellsquirrel@evl.ms @evilmartians @evilmartians_ru evilmartians.com http:/ /bit.ly/en-co-de