How Video Works?

How Video Works?

5dc4abe3dc14c25021ff2295fc380d73?s=128

Flávio Ribeiro

December 02, 2017
Tweet

Transcript

  1. How Video Works?
 Flavio Ribeiro, 2017

  2. Flavio Ribeiro

  3. Flavio Ribeiro

  4. Flavio Ribeiro { , } / flavioribeiro http://flavioribeiro.com

  5. None
  6. None
  7. Leandro Moreira / leandromoreira

  8. Leandro Moreira / leandromoreira

  9. Leandro Moreira / leandromoreira

  10. what is video?

  11. video is a composition of images called frames

  12. video is a composition of images called frames

  13. what is a frame?

  14. Composition of Pixels composition 
 of pixels

  15. but, what
 is a pixel?

  16. None
  17. this is a black pixel!

  18. this is a black pixel!

  19. this is a black pixel! white pixel here

  20. how pixels are represented?

  21. how pixels are represented? BITS

  22. how pixels are represented? 1 bit (1 or 0)

  23. how pixels are represented? 1 bit (1 or 0) 2

    bits (11, 10, 01 or 00)
  24. how pixels are represented? 1 bit (1 or 0) 2

    bits (11, 10, 01 or 00) 8 bits (you got that, right?)
  25. colors

  26. colors

  27. None
  28. pixels in displays TV CRT PC CRT LCD

  29. pixels in displays TV CRT PC CRT LCD

  30. let’s do math

  31. grayscale image width height 4 x 4 x 8 bits

    = 128 bits = 16 Bytes
  32. width height colored image

  33. width height color colored image

  34. colored image 3 x 4 x 4 x 8 bits

    = 384 bits = 48 Bytes
  35. 3 x 1920 x 1080 x 8 bits = 49,766,400

    bits ≈ 6.2 MB
  36. do you remember that…

  37. video is a composition of images called frames do you

    remember that…
  38. our eyes can detect motion at 24 frames per second

  39. None
  40. None
  41. 3 x 1920 x 1080 x 8 bits x 24

    frames ≈ 149 MB
  42. 3 x 1920 x 1080 x 8 bits x 24

    frames x 60 minutes ≈ .5 TB
  43. It would take… 04 days and 15 hours to download

    it in a 10 Mbps connection 11 hours to download it in a 100 Mbps connection
  44. what can be done?

  45. None
  46. exploit our vision

  47. exploit our vision reduce redundancy in space

  48. exploit our vision reduce redundancy in space reduce redundancy
 over

    time
  49. exploit our vision

  50. None
  51. the eye contains about 120M rod cells and 6M cone

    cells.
  52. we’re better noticing traces than colors

  53. we’re better noticing traces than colors

  54. an alternative to RGB

  55. an alternative to RGB

  56. Y (luma) U (chroma blue) V (chroma red) an alternative

    to RGB
  57. Y (luma) U (chroma blue) V (chroma red) an alternative

    to RGB
  58. None
  59. 12 bits per pixel 24 bits per pixel

  60. reduce redundancy in space

  61. lots of similarities

  62. lots of similarities

  63. None
  64. None
  65. repeat x times repeat y times

  66. None
  67. patterns / vectors

  68. correlations in time

  69. correlations in time

  70. 00:22 00:23

  71. 00:22 00:23

  72. 00:22 00:23

  73. 00:22 00:23

  74. frame 0 frame 1 frame 2 frame 3 103 kb

    103 kb 103 kb 103 kb
  75. #qacodec FRAME DIFFERENCE 103 kb 103 kb

  76. #qacodec FRAME DIFFERENCE COST 4 kb

  77. frame 0 frame 1 diff + reference 4 kb 103

    kb
  78. exploit our vision reduce redundancy reduce redundancy
 over time we

    just described how a codec works
  79. exploit our vision reduce redundancy reduce redundancy
 over time codec

  80. exploit our vision reduce redundancy reduce redundancy
 over time is

    the short for COmpressor / DECompressor
  81. beyond codecs

  82. containers

  83. None
  84. this is a container

  85. this is a container video here

  86. this is a container video here

  87. this is a container video here audio here

  88. this is a container video here audio here

  89. this is a container video here audio here stuff

  90. MP4 H.264 MP3 Subtitles, metadata, etc

  91. WebM VP8 Vorbis Subtitles, metadata, etc

  92. bitrate

  93. bitrate

  94. bitrate: amount of bits used to represent a given media

  95. bitrate: amount of bits used to represent a given media

  96. bitrate: amount of bits used to represent a given media

  97. bitrate: amount of bits used to represent a given media

  98. deliver
 video on internet

  99. progressive download

  100. adaptive http streaming

  101. None
  102. None
  103. recap

  104. recap

  105. None
  106. video

  107. video images (frames)

  108. video images (frames) pixels

  109. video images (frames) pixels bits

  110. video images (frames) pixels colors bits

  111. video images (frames) pixels colors RGB bits

  112. video images (frames) pixels colors RGB 24 frames bits

  113. video images (frames) pixels colors RGB 24 frames bits lots

    of information
  114. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression
  115. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye
  116. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye reduce redundancy
  117. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye reduce redundancy correlations in time
  118. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye reduce redundancy correlations in time codec
  119. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye reduce redundancy correlations in time codec codec != container
  120. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye reduce redundancy correlations in time codec codec != container bitrate
  121. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye reduce redundancy correlations in time codec codec != container bitrate progressive download
  122. video images (frames) pixels colors RGB 24 frames bits lots

    of information compression exploit the eye reduce redundancy correlations in time codec codec != container bitrate progressive download adaptive bitrate
  123. thanks! { , } / flavioribeiro http://flavioribeiro.com

  124. thanks! { , } / flavioribeiro http://flavioribeiro.com