• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action
 

Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action

on

  • 1,681 views

Talk by Shwetank. ...

Talk by Shwetank.
Using getUserMedia you can now access the camera and microphone using just plain old JavaScript! In this talk, we'll take a look at the various use cases for it and what all possibilities it opens up for web applications in the future.

Statistics

Views

Total Views
1,681
Views on SlideShare
1,665
Embed Views
16

Actions

Likes
0
Downloads
1
Comments
0

1 Embed 16

https://twitter.com 16

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action Yahoo Hack India: Hyderabad 2013 | Mic, Camera, Action Presentation Transcript

    • Mic, Camera, Action! Shwetank Dixit Opera Software
    • about me Web Evangelist, Web Standards Team Member, W3C Mobile Web for Social Development Group Twitter: @shwetank Email: shwetankd@opera.com
    • The web is awesome!
    • but Native apps sometimes have an edge But that edge is getting smaller
    • We’re adding more ways to get input from the user
    • We’re making existing ways easier Like web forms
    • We want to Stop Writing boring JS
    • We want to Start Writing exciting JS
    • Mic
    • Mic DEMO
    • Mic Web Audio API + getUserMedia
    • getUserMedia if (navigator.getUserMedia){ navigator.getUserMedia({audio: true}, a_success, a_error); }
    • getUserMedia Mic returns raw audio samples Cannot be played natively by the audio player Need Web Audio API to process it and then play it
    • getUserMedia Create audio context and media stream source
    • getUserMedia //Create audio context and media stream source var audioContext = new AudioContext(); // Prefix it for various browsers // Create an AudioNode from the stream. var mediaStreamSource = audioContext.createMediaStreamSource( stream );
    • getUserMedia //Create audio context and media stream source var audioContext = new AudioContext(); // Prefix it for various browsers // Create an AudioNode from the stream. var mediaStreamSource = audioContext.createMediaStreamSource( stream ); // Connect audio loop to hear your own voice mediaStreamSource.connect(context.destination);
    • Recorder.js Great library to help you record mic input using getusermedia
    • Recorder.js buffers the raw audio samples. converts it to format which can be played by an <audio> control
    • Camera
    • Use camera with getusermedia var options = {audio: false, video: true};
    • Use camera with getusermedia var options = {audio: false, video: true}; navigator.getUserMedia(options, v_success, v_error);
    • Use camera with getusermedia // In the HTML var video = document.querySelector('video'); .... ..... // In the JS Code function v_success(stream){ video.src = window.URL.createObjectURL(stream) || stream; }
    • Use camera + Video + Canvas for new tricks var button = document.querySelector('#button'); button.addEventListener('click',snapshot, false); ... ... function snapshot(){ var c = document.querySelector('canvas'); var ctx = c.getContext('2d'); var cw = c.clientWidth; var ch = c.clientHeight; ctx.drawImage(video_element, 0, 0, cw, ch); }
    • Demo Notice you can click on a polaroid and save that image. You can create data URIs of canvases
    • Manipulating the image from the webcam
    • Once you get the snapshot of the webcam into canvas you can go crazy with it
    • DEMO Warholiser
    • Action!
    • Tracking user actions Motion detection gesture recognition
    • headtrackr.js https://github.com/auduno/headtrackr/
    • headtrackr.js http://auduno.tumblr.com/post/25125149521/head-tracking-with- webrtc
    • Face Detection X, Y position of face Width, Height of face relative to canvas headtrackr.js
    • Demo
    • Voice driven apps Voice modulation apps Native photo capture in web apps Live image manipulation and effects Video conferencing (using WebRTC) Accessibility enhancements to apps Possible use cases
    • Cheers! More questions? Ask me now or contact me at: shwetankd@opera.com or on twitter - @shwetank