js conf 2014 - playing dvd in javascript for the sake of interoperability - guillaume marty
TRANSCRIPT
![Page 1: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/1.jpg)
PlayingDVDin
JavaScript
![Page 3: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/3.jpg)
I have DVDs
![Page 4: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/4.jpg)
I use Google Play Music
![Page 5: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/5.jpg)
I love JavaScript
![Page 6: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/6.jpg)
I want Google Play Music for DVDsA service that streams my DVDs
from the cloudto my (mobile) browser
![Page 7: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/7.jpg)
But why?!!!1!1!ONEQ: Y U NO Netflix?
A: Not interesting for me.Q: Y U NO rip the video?
A: DVDs are more than just video.
![Page 8: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/8.jpg)
I implemented this in JavaScriptbut faced problems
![Page 9: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/9.jpg)
The structureDVD = Digital Versatile Disc
![Page 10: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/10.jpg)
The DVD specs...... is a paying document,
but was reverse engineered from discs
![Page 11: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/11.jpg)
Files organisation2 folders:
AUDIO_TS/ (optional)VIDEO_TS/
![Page 12: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/12.jpg)
File typesInfo files (*.IFO, *.BUP)Video files (*.VOB)
![Page 13: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/13.jpg)
IFO filesPlayback logicChaptersLanguages available
![Page 14: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/14.jpg)
VOB filesVideo / AudioSubtitlesMenu UI
![Page 15: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/15.jpg)
DVD Virtual Machine16 general parameter registers (≈ variables)24 system parameter registers (language,region...)36 commands (jump, compare, set, goto...)
![Page 16: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/16.jpg)
Example of command30 25 00 0A 00 03 01 02
If (GPRM1 == GPRM2) JumpVTS_PTT (PTT:10, VTS:3)
30 25 00 0A 00 03 01 02JumpVTS_PTT 10 (PTT) == 3 (VTS) 1 (GPRM1) 2 (GPRM2)if (gprm[1] === gprm[2]) { dvd.playTitle(3); dvd.playChapter(10);}
![Page 17: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/17.jpg)
Playing DVDon the fly
![Page 18: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/18.jpg)
libdvdreadlibdvdnav
![Page 19: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/19.jpg)
Experiment 1The browser reads the disc directly
![Page 20: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/20.jpg)
Direct disc reading
![Page 21: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/21.jpg)
Parsing IFO filesTyped arraysDataView
![Page 22: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/22.jpg)
Playing VOB filesProblems occur
![Page 23: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/23.jpg)
Browsers can't play the codecsMpeg 2AAC
![Page 24: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/24.jpg)
Browsers can't handle huge filesVOB files can be as big as 1 Gb
![Page 25: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/25.jpg)
Experiment 2Encode video on demand
![Page 26: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/26.jpg)
Server in Node.js
![Page 27: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/27.jpg)
That doesn't workPlayback is jerky
![Page 28: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/28.jpg)
Experiment 3Encode video beforehand to webm
![Page 29: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/29.jpg)
Preencoded video
![Page 30: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/30.jpg)
This kind of works, but...
![Page 31: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/31.jpg)
Server / client out of syncNeeds a powerful configuration
![Page 32: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/32.jpg)
But most of allthis isn't the web
![Page 33: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/33.jpg)
Reintroducing theweb
![Page 34: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/34.jpg)
Using a converter
![Page 35: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/35.jpg)
Advantages
![Page 36: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/36.jpg)
Host it yourselfVideos take a lot of server spaceStatic server runs on low-end hardware
![Page 37: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/37.jpg)
Mobile friendly
![Page 38: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/38.jpg)
Demo: Sita Sings the BluesDVD
A movie by Nina Paley published underthe Creative Commons license
![Page 39: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/39.jpg)
![Page 40: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/40.jpg)
How?DVD feature Web platform
VOB files (video) <video>VOB files (subtitles) <track> & WebVTT
Multi-angle and multi-audio MediaControllerChapters <track kind="chapters">
Menu buttons <button> & PNGDVD VM JavaScript
![Page 41: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/41.jpg)
DVD converter1. IFO files are parsed to JSON2. Chapters are generated as WebVTT3. NAV packets are extracted to JSON4. The buttons size/position are saved to CSS5. The menu still frames are saved to PNG6. VM commands are compiled into JavaScript7. The video is encoded to Webm
![Page 42: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/42.jpg)
Playback<x-video> a video player on steroids
github.com/gmarty/x-video
![Page 43: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/43.jpg)
Lessons learnedBrowsers can't play DVD on the fly
![Page 44: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/44.jpg)
but the web platform is powerful
![Page 45: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/45.jpg)
JavaScript handles formatsMP3PDFFlashnow DVD!
![Page 46: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/46.jpg)
the web is versatile
![Page 47: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/47.jpg)
the web can give a 2nd life to old formats
![Page 49: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/49.jpg)
What's next?
![Page 50: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/50.jpg)
BonusShow me the code
![Page 51: JS Conf 2014 - Playing DVD in JavaScript for the sake of interoperability - Guillaume Marty](https://reader034.vdocuments.site/reader034/viewer/2022052700/55cbbbf6bb61eb467a8b45dc/html5/thumbnails/51.jpg)