html5 media capture 

look ma, no plugins!

wassat?




audio and video capture without plugins, boom!




fin.

(not really)

a secret history


  • 3rd spec - previous contenders: 
  • <input type="file" accept="video/*;capture=camcorder">

  • <device type="media" onchange="update(this.data)"></device>
  • Part of Web RTC (even shinier-er)

how?

                                   function onSuccess(stream) {
                                      // do stuff
                                   }


                                   navigator.getUserMedia({

                                        video: true,

                                        audio: true

                                    },

                                    onSuccess,

                                    onFail);

how, really?


                function onSuccess(stream) {
  var video = document.querySelector('video');
           video.src = window.URL.createObjectURL(stream);
                }

                if (navigator.webkitGetUserMedia) {
                    navigator.webkitGetUserMedia({

                                        video: true

                    },

                    onSuccess,

                    onFail);
                 }

i think you'll find it's a bit more complicated than that


  • prefixes
  • Slightly different implementations

moar compatibility


...but there's a polyfill (with Flash fallback :c )

Or you could fall back to an animated gif?


Security


  • Video Popup
  • Favicon

so Why bother?






Cool demos!