js conf 2014 - playing dvd in javascript for the sake of interoperability - guillaume marty

PlayingDVDin

JavaScript

@g_marty guy living in London,

Working at on

I have DVDs

I use Google Play Music

I love JavaScript

I want Google Play Music for DVDsA service that streams my DVDs

from the cloudto my (mobile) browser

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.

I implemented this in JavaScriptbut faced problems

The structureDVD = Digital Versatile Disc

The DVD specs...... is a paying document,

but was reverse engineered from discs

Files organisation2 folders:

AUDIO_TS/ (optional)VIDEO_TS/

File typesInfo files (*.IFO, *.BUP)Video files (*.VOB)

IFO filesPlayback logicChaptersLanguages available

VOB filesVideo / AudioSubtitlesMenu UI

DVD Virtual Machine16 general parameter registers (≈ variables)24 system parameter registers (language,region...)36 commands (jump, compare, set, goto...)

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);}

Playing DVDon the fly

libdvdreadlibdvdnav

Experiment 1The browser reads the disc directly

Direct disc reading

Parsing IFO filesTyped arraysDataView

Playing VOB filesProblems occur

Browsers can't play the codecsMpeg 2AAC

Browsers can't handle huge filesVOB files can be as big as 1 Gb

Experiment 2Encode video on demand

Server in Node.js

That doesn't workPlayback is jerky

Experiment 3Encode video beforehand to webm

Preencoded video

This kind of works, but...

Server / client out of syncNeeds a powerful configuration

But most of allthis isn't the web

Reintroducing theweb

Using a converter

Advantages

Host it yourselfVideos take a lot of server spaceStatic server runs on low-end hardware

Mobile friendly

Demo: Sita Sings the BluesDVD

A movie by Nina Paley published underthe Creative Commons license

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

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

Playback<x-video> a video player on steroids

github.com/gmarty/x-video

Lessons learnedBrowsers can't play DVD on the fly

but the web platform is powerful

JavaScript handles formatsMP3PDFFlashnow DVD!

the web is versatile

the web can give a 2nd life to old formats

Where's the code?github.com/gmarty/DVD.js

What's next?

BonusShow me the code

Guillaume C. Marty @g_marty gmarty