SlideShare uma empresa Scribd logo
1 de 40
Thumb.co.il
How we got here...
Who am I?
Nom de Plume:
Email:
HLS:
Transmuxer:
Thumbcoil Lib:
Thumb.co.il UI:
Jon-Carlos Rivera
jrivera@brightcove.com
https://github.com/videojs/videojs-contrib-hls
https://github.com/videojs/mux.js
https://github.com/videojs/thumbcoil
https://github.com/videojs/thumb.co.il
What is Thumbcoil?
Thumbcoil is a web-based video inspector for:
- MPEG2-TS (also M2TS or just TS)
- fMP4 (fragmented MP4)
- FLV
"If you gaze long into a file format, the file format also gazes into you."
-- Nietzsche, probably
In the beginning, there was no Thumbcoil
Thumbcoil eventual grew out of our home-grown web-based video format
transmuxer…
Mux.js!
https://github.com/videojs/mux.js
(Did I mention it's open source?)
What is Transmuxing a Container?
Container
Synchronization Synchronization
Bitstream
Info
Audio
Bitstream
Audio
Bitstream
Bitstream
Info
Video
Bitstream
Video
Bitstream
What is Transmuxing a Container?
M2TS
PES PES
PMT Audio
Bitstream
Audio
Bitstream
PMT Video
Bitstream
Video
Bitstream
MP4
Sample Sample
TRAK Audio
Bitstream
Audio
Bitstream
TRAK Video
Bitstream
Video
Bitstream
Transmuxing
Re-muxingDe-muxing
MPEG2-TS
Metadata
Video
Audio
MP4
Key Browser
FLV
Transmuxer
video-js-swf
NetStream
Browser
FLV
Transmuxer
video-js-swf
NetStream
MSE
SourceBuffer
MP4
Transmuxer
Browser
Mux.js
M2TS Demux
video-js-swf
NetStream
MSE
SourceBuffer
fMP4 RemuxFLV Remux
2013 2014 2015
Transmuxing on the web…
Native (JS)
Flash
Uggh!
Life was great until...
Life was great until...
Pretty quickly we ran into issues with fMP4 & MSE
Life was great until...
Pretty quickly we ran into issues with fMP4 & MSE
Flash playback of FLV was very resilient
Life was great until...
Pretty quickly we ran into issues with fMP4 & MSE
Flash playback of FLV was very resilient
Browser MSE implementations with MP4 were NOT
Life was great until...
Pretty quickly we ran into issues with fMP4 & MSE
Flash playback of FLV was very resilient
Browser MSE implementations with MP4 were NOT
MSE was very strict about EVERYTHING
Life was great until...
Pretty quickly we ran into issues with fMP4 & MSE
Flash playback of FLV was very resilient
Browser MSE implementations with MP4 were NOT
MSE was very strict about EVERYTHING
(But it has improved somewhat)
End result?
End result?
Lots of perfectly valid HLS just didn't work!
End result?
Lots of perfectly valid HLS just didn't work!
...But worked in Flash
End result?
Lots of perfectly valid HLS just didn't work!
...But worked in Flash
...And Safari
End result?
Lots of perfectly valid HLS just didn't work!
...But worked in Flash
...And Safari
...And Quicktime
End result?
Lots of perfectly valid HLS just didn't work!
...But worked in Flash
...And Safari
...And Quicktime
...And VLC
The debugging nightmare
How do you inspect a video to do some sanity checking?
Run ffprobe!
- Seems useful at first
- The output is ofttimes just a pack of lies
- ...because ffprobe hates you
How does ffprobe hate?
Problem: Detecting M2TS segments that did not begin with an i-frame
Solution: ffprobe --show_frames ?
Now you have two problems!
Our struggle...
Solution: Use mux.js to inspect videos!
Our struggle...
Solution: Use mux.js to inspect videos!
It was a GREAT IDEA...
Our struggle...
Solution: Use mux.js to inspect videos!
It was a GREAT IDEA...
...so we didn't do that.
Instead, we kept struggling with ffprobe.
Solve all of the easy problems...
...and all that remains are the hard problems.
(ffprobe doesn't help you here!)
We needed to go deeper...
...inside the bitstreams.
I'm going to level with you
I was mostly just curious
Thumbcoil is born
● I (re)wrote a parser for H.264 bitstreams from scratch
● None of the bitstream parsing code is shared with mux.js
● Implemented using PARSER COMBINATORS...
...for science!
http://beta.thumb.co.il
(Did I mention it's open source?)
Parser Combinators
One goal was for NAL unit parsers to read like the H.264 spec:
Parser Combinators
One goal was for NAL unit parsers to read like the H.264 spec:
Parser Combinators
You build a parser by composing high-order functions
All of the combinators in Thumbcoil are designed as "codecs"
- They have a decode function that takes a bitstream and returns an object
representation of the data
- They have an encode function that can take the object representation
and return a bitstream
This is mostly a fun trick that has never been used for anything cool. (Yet!)
Let's Parse Audio Bitstreams!
Let's Parse Audio Bitstreams!
Worst.
Let's Parse Audio Bitstreams!
Worst.
Decision.
Let's Parse Audio Bitstreams!
Worst.
Decision.
Ever.
What is parsing AAC like?
Imagine trying to find a word in a dictionary where pages appear blank unless
you've completely and accurately read the previous page.
It's like that but worse… because the words are also huffman coded.
Using one of any 15 codebooks... per letter.
And each codeword can code for more than one letter...
...and there are no spaces.
...and most of the words are homonyms.
Demo Time
Old Interface: http://thumb.co.il
New Interface: http://beta.thumb.co.il
The future...
● Improved GOP view
○ More sorting and display options
● Hex-view
● ID3 Parsing
● Bring back MP4 and FLV parsing
● Support MPEG-DASH manifests
● <Your Idea Here> (Did I mention it's open source?)
Fin
Questions?

Mais conteúdo relacionado

Mais procurados (7)

vimshell made other shells legacy
vimshell made other shells legacyvimshell made other shells legacy
vimshell made other shells legacy
 
Rails development environment talk
Rails development environment talkRails development environment talk
Rails development environment talk
 
Exploring the ABC's of Raspberry Pi with Python
Exploring the ABC's of Raspberry Pi with PythonExploring the ABC's of Raspberry Pi with Python
Exploring the ABC's of Raspberry Pi with Python
 
Up and running with Raspberry Pi
Up and running with Raspberry PiUp and running with Raspberry Pi
Up and running with Raspberry Pi
 
Exploring the abc's of raspberry pi and python(day 2)
Exploring the abc's of raspberry pi and python(day 2)Exploring the abc's of raspberry pi and python(day 2)
Exploring the abc's of raspberry pi and python(day 2)
 
Such a weird Processor: messing with opcodes (...and a little bit of PE) (Has...
Such a weird Processor: messing with opcodes (...and a little bit of PE) (Has...Such a weird Processor: messing with opcodes (...and a little bit of PE) (Has...
Such a weird Processor: messing with opcodes (...and a little bit of PE) (Has...
 
Infrastructure as code might be literally impossible part 2
Infrastructure as code might be literally impossible part 2Infrastructure as code might be literally impossible part 2
Infrastructure as code might be literally impossible part 2
 

Semelhante a Thumbcoil: How we got here...

Building an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learnedBuilding an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learned
Wojciech Koszek
 
what_is_a_codec_2010
what_is_a_codec_2010what_is_a_codec_2010
what_is_a_codec_2010
Justin Giles
 
Beginning html5 media, 2nd edition
Beginning html5 media, 2nd editionBeginning html5 media, 2nd edition
Beginning html5 media, 2nd edition
ser
 
Listen and look at your PHP code
Listen and look at your PHP codeListen and look at your PHP code
Listen and look at your PHP code
Gabriele Santini
 

Semelhante a Thumbcoil: How we got here... (20)

Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...
Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...
Nerd sniping myself into a rabbit hole... Streaming online audio to a Sonos s...
 
Sensepost assessment automation
Sensepost assessment automationSensepost assessment automation
Sensepost assessment automation
 
Reverse Engineering in Linux - The tools showcase
Reverse Engineering in Linux - The tools showcaseReverse Engineering in Linux - The tools showcase
Reverse Engineering in Linux - The tools showcase
 
The challenges of file formats
The challenges of file formatsThe challenges of file formats
The challenges of file formats
 
Building an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learnedBuilding an Open Source iOS app: lessons learned
Building an Open Source iOS app: lessons learned
 
Codebits Handivi
Codebits HandiviCodebits Handivi
Codebits Handivi
 
Open frameworks 101_fitc
Open frameworks 101_fitcOpen frameworks 101_fitc
Open frameworks 101_fitc
 
Rasmus, Think Again! Agile Framework == Happy Php Developer
Rasmus, Think Again! Agile Framework == Happy Php DeveloperRasmus, Think Again! Agile Framework == Happy Php Developer
Rasmus, Think Again! Agile Framework == Happy Php Developer
 
what_is_a_codec_2010
what_is_a_codec_2010what_is_a_codec_2010
what_is_a_codec_2010
 
Steelcon 2014 - Process Injection with Python
Steelcon 2014 - Process Injection with PythonSteelcon 2014 - Process Injection with Python
Steelcon 2014 - Process Injection with Python
 
2014 pablo ruiz tuenti webrtc
2014 pablo ruiz tuenti webrtc2014 pablo ruiz tuenti webrtc
2014 pablo ruiz tuenti webrtc
 
3stages Wdn08 V3
3stages Wdn08 V33stages Wdn08 V3
3stages Wdn08 V3
 
Beginning html5 media, 2nd edition
Beginning html5 media, 2nd editionBeginning html5 media, 2nd edition
Beginning html5 media, 2nd edition
 
Launching Learning Content with xAPI
Launching Learning Content with xAPILaunching Learning Content with xAPI
Launching Learning Content with xAPI
 
Design and Evolution of cyber-dojo
Design and Evolution of cyber-dojoDesign and Evolution of cyber-dojo
Design and Evolution of cyber-dojo
 
Packer Genetics: The selfish code
Packer Genetics: The selfish codePacker Genetics: The selfish code
Packer Genetics: The selfish code
 
python into.pptx
python into.pptxpython into.pptx
python into.pptx
 
Listen and look at your PHP code
Listen and look at your PHP codeListen and look at your PHP code
Listen and look at your PHP code
 
Dmk audioviz
Dmk audiovizDmk audioviz
Dmk audioviz
 
Happy hacking with Plone
Happy hacking with PloneHappy hacking with Plone
Happy hacking with Plone
 

Último

Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
 

Último (20)

Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
presentation ICT roal in 21st century education
presentation ICT roal in 21st century educationpresentation ICT roal in 21st century education
presentation ICT roal in 21st century education
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slideHistor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
04-2024-HHUG-Sales-and-Marketing-Alignment.pptx
 
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day PresentationGenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
 
Developing An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of BrazilDeveloping An App To Navigate The Roads of Brazil
Developing An App To Navigate The Roads of Brazil
 

Thumbcoil: How we got here...

  • 2. Who am I? Nom de Plume: Email: HLS: Transmuxer: Thumbcoil Lib: Thumb.co.il UI: Jon-Carlos Rivera jrivera@brightcove.com https://github.com/videojs/videojs-contrib-hls https://github.com/videojs/mux.js https://github.com/videojs/thumbcoil https://github.com/videojs/thumb.co.il
  • 3. What is Thumbcoil? Thumbcoil is a web-based video inspector for: - MPEG2-TS (also M2TS or just TS) - fMP4 (fragmented MP4) - FLV
  • 4. "If you gaze long into a file format, the file format also gazes into you." -- Nietzsche, probably
  • 5. In the beginning, there was no Thumbcoil Thumbcoil eventual grew out of our home-grown web-based video format transmuxer… Mux.js! https://github.com/videojs/mux.js (Did I mention it's open source?)
  • 6. What is Transmuxing a Container? Container Synchronization Synchronization Bitstream Info Audio Bitstream Audio Bitstream Bitstream Info Video Bitstream Video Bitstream
  • 7. What is Transmuxing a Container? M2TS PES PES PMT Audio Bitstream Audio Bitstream PMT Video Bitstream Video Bitstream MP4 Sample Sample TRAK Audio Bitstream Audio Bitstream TRAK Video Bitstream Video Bitstream
  • 10. Life was great until...
  • 11. Life was great until... Pretty quickly we ran into issues with fMP4 & MSE
  • 12. Life was great until... Pretty quickly we ran into issues with fMP4 & MSE Flash playback of FLV was very resilient
  • 13. Life was great until... Pretty quickly we ran into issues with fMP4 & MSE Flash playback of FLV was very resilient Browser MSE implementations with MP4 were NOT
  • 14. Life was great until... Pretty quickly we ran into issues with fMP4 & MSE Flash playback of FLV was very resilient Browser MSE implementations with MP4 were NOT MSE was very strict about EVERYTHING
  • 15. Life was great until... Pretty quickly we ran into issues with fMP4 & MSE Flash playback of FLV was very resilient Browser MSE implementations with MP4 were NOT MSE was very strict about EVERYTHING (But it has improved somewhat)
  • 17. End result? Lots of perfectly valid HLS just didn't work!
  • 18. End result? Lots of perfectly valid HLS just didn't work! ...But worked in Flash
  • 19. End result? Lots of perfectly valid HLS just didn't work! ...But worked in Flash ...And Safari
  • 20. End result? Lots of perfectly valid HLS just didn't work! ...But worked in Flash ...And Safari ...And Quicktime
  • 21. End result? Lots of perfectly valid HLS just didn't work! ...But worked in Flash ...And Safari ...And Quicktime ...And VLC
  • 22. The debugging nightmare How do you inspect a video to do some sanity checking? Run ffprobe! - Seems useful at first - The output is ofttimes just a pack of lies - ...because ffprobe hates you
  • 23. How does ffprobe hate? Problem: Detecting M2TS segments that did not begin with an i-frame Solution: ffprobe --show_frames ? Now you have two problems!
  • 24. Our struggle... Solution: Use mux.js to inspect videos!
  • 25. Our struggle... Solution: Use mux.js to inspect videos! It was a GREAT IDEA...
  • 26. Our struggle... Solution: Use mux.js to inspect videos! It was a GREAT IDEA... ...so we didn't do that. Instead, we kept struggling with ffprobe.
  • 27. Solve all of the easy problems... ...and all that remains are the hard problems. (ffprobe doesn't help you here!) We needed to go deeper... ...inside the bitstreams.
  • 28. I'm going to level with you I was mostly just curious
  • 29. Thumbcoil is born ● I (re)wrote a parser for H.264 bitstreams from scratch ● None of the bitstream parsing code is shared with mux.js ● Implemented using PARSER COMBINATORS... ...for science! http://beta.thumb.co.il (Did I mention it's open source?)
  • 30. Parser Combinators One goal was for NAL unit parsers to read like the H.264 spec:
  • 31. Parser Combinators One goal was for NAL unit parsers to read like the H.264 spec:
  • 32. Parser Combinators You build a parser by composing high-order functions All of the combinators in Thumbcoil are designed as "codecs" - They have a decode function that takes a bitstream and returns an object representation of the data - They have an encode function that can take the object representation and return a bitstream This is mostly a fun trick that has never been used for anything cool. (Yet!)
  • 33. Let's Parse Audio Bitstreams!
  • 34. Let's Parse Audio Bitstreams! Worst.
  • 35. Let's Parse Audio Bitstreams! Worst. Decision.
  • 36. Let's Parse Audio Bitstreams! Worst. Decision. Ever.
  • 37. What is parsing AAC like? Imagine trying to find a word in a dictionary where pages appear blank unless you've completely and accurately read the previous page. It's like that but worse… because the words are also huffman coded. Using one of any 15 codebooks... per letter. And each codeword can code for more than one letter... ...and there are no spaces. ...and most of the words are homonyms.
  • 38. Demo Time Old Interface: http://thumb.co.il New Interface: http://beta.thumb.co.il
  • 39. The future... ● Improved GOP view ○ More sorting and display options ● Hex-view ● ID3 Parsing ● Bring back MP4 and FLV parsing ● Support MPEG-DASH manifests ● <Your Idea Here> (Did I mention it's open source?)

Notas do Editor

  1. Talk about FLV being the easiest format in the world to work with. Why do transmuxing outside of Flash in the first place? Captions and ID3.
  2. STOP
  3. STOP
  4. STOP
  5. Two reasons: To make sure we were parsing correctly in mux.js To craft the parsers such that they looked similar to the specification to reduce the chance of errors
  6. STOP
  7. http://zencodertesting.s3.amazonaws.com/justin/typical-hls-examples/basic_mbr/TinaFey-playlist.m3u8 http://zencodertesting.s3.amazonaws.com/justin/typical-hls-examples/basic_mbr/TinaFey-file-1040k-00001.ts