You, Me & The Future of Online Video - BlendConf 2014Loading...@darcy

You, Me & the Future of Online Video

A presentation by @darcy

About

  • UX Developer, Designer & Advocate
  • Based in Toronto, Canada
  • Github: @darcyclarke

@darcy

Work

  • Co-Founded Themify
  • Fi (Fantasy Interactive), Jet Cooper, Polar Mobile, Say Yeah!, Playground, Blast Radius, Bnotions, Daily Challenge, Pinpoint Social, My City Lives, Viafoura, Flixel,  OneMethod ...
  • Google, Microsoft, Nike, Samsung, Porsche, Ducati, Disney, Red Bull, CBS, Panasonic, Nestlé ...
  • jQuery, DSS, Frontend Developer Interview Questions, Watch.js, Repo.js, Modernizr ...

blanche

My Last 12 Months

  • Documentation
  • Open Source
  • Standards & Accessibility
  • Progressive Enhancement
  • Feature Detection & Polyfills
  • Build Tools
  • Server-side Rendering
  • Language Abstractions & Preprocessors
  • Typography
  • Responsive Images
  • * Video

We'll Cover

History, Manipulation, Experiences, Encoders, Decoders, DRM & EME

History

Codecs, Containers & Playback

1986 - Sony release D1

  • First digital video recording format
  • Stored 94 minutes
  • Uncompressed

1988 - Sony & Ampex release D2

  • Offered simultaneous playback
  • Stored composite video over component
  • Still uncompressed

1988 - H.261 is released

  • First member of the H.26x family
  • Most all subsequent video coding standards are based on it
  • Used compression

*Codec

Coder + Decoder

Compresion + Decompresion

Video Playback 1991 - 2007

1991

1995

1996

1997

The Aftermath...

Fragmentation

February 28th, 2007

Opera Proposes <video> element

~ W3C Mailing List Thread Announcment

*Implement it that same day

7 years later

http://caniuse.com/#feat=video

mediaelement.js

http://mediaelementjs.com/

Manipulation

Canvas Filters

http://html5demos.com/gum-canvas

Canvas Explosion

http://craftymind.com/factory/html5video/CanvasVideo.html

WebGL Filters

http://kuramo.ch/webgl/videoeffects/

Three.js WebGL Materials

http://alteredqualia.com/three/examples/webgl_materials_video.html

WebGL Face Detection

http://auduno.github.io/clmtrackr/examples/facesubstitution.html

Going Further

Interactive Experiences

Realtime Color Histogram

http://senchalabs.org/philogl/PhiloGL/examples/histogram/

WebRTC Chat Rooms

https://talky.io/filive

PeerJS

http://peerjs.com/

Arcade Fire: Just a Reflektor

https://justareflektor.com/

Pharrell Williams: 24 Hours of Happy

http://24hoursofhappy.com/

Popcorn.js

http://popcornjs.org/

The Bleeding Edge

Encoders & Decoders

JavaScript Video Encoders

videoconverter.js

http://bgrins.github.io/videoconverter.js/

videoconverter.js

Slow

Memory-intensive

JavaScript Video Decoders

*No Audio

MPEG1: JSMPEG

http://github.com/phoboslab/jsmpeg

MPEG1: JSMPEG

  • Narrow file requirements
  • Picky implementation
  • MPEG1 is a poor, out-dated format

WEBM: vp8-webm-js-decoder

http://libwebpjs.hohenlimburg.org/vp8/webm-javascript-decoder-2

WEBM: vp8-webm-js-decoder

  • Performance on desktop ~20-30fps
  • Performance on mobile <10fps

APNG: PNG.js

http://github.com/devongovett/png.js

APNG: PNG.js

  • APNG is bloated
  • Generating files is painful

Sprite PNG + JSON: anim_encoder

http://github.com/sublimehq/anim_encoder

DVD.js

https://github.com/gmarty/DVD.js

~ Guillaume C. Marty (Mozilla)

DVD.js

  • IFO files are parsed to JSON
  • Chapters are generated as WebVTT
  • NAV packets are extracted to JSON
  • The buttons size/position are saved to CSS
  • The menu still frames are saved to PNG
  • VM commands are compiled into JavaScript
  • The video is encoded to WebM

Today I Saw the Future

May 3rd, 2013

Brendan Eich

Mozilla and OTOY deliver the power of native PC applications to the Web, unveil next generation JavaScript video codec for movies and cloud gaming

~ brendaneich.com/2013/05/today-i-saw-the-future

What makes this interesting?

ORBX.js Features

  • 25% better compression than H.264
  • Adaptive bit-rate (while streaming)
  • Better color depth
  • Better intra-frame coding
  • IP-blind runtime
  • Flexibile
  • Open Source

But there's more

  • Major studios are looking at it as a solution to video-on-demand watermarking (DRM free)

Future Headaches

Digital Rights Management (DRM)

Encripted Media Extensions (EME)

Defective By Design on DRM

http://defectivebydesign.org

DRM creates a damaged good; it prevents you from doing what would be possible without it. This concentrates control over production and distribution of media, giving DRM peddlers the power to carry out massive digital book burnings and conduct large scale surveillance over people's media viewing habits.

"EME WTF?"

http://html5rocks.com/en/tutorials/eme/basics/

Encrypted Media Extensions provides an API that enables web applications to interact with content protection systems, to allow playback of encrypted audio and video.

The Future of Video is?

  • Encrypted Media Extensions
  • Immersive, Interactive Experiences
  • JavaScript Video Codec