English subtitles

← Live input - Mobile Web Development

Get Embed Code
4 Languages

Showing Revision 4 created 05/24/2016 by Udacity Robot.

  1. We can get Live Input, Audio and Video, directly
  2. under our App by using an API called getUserMedia. This
  3. is a simple example where we just call getUserMedia,
  4. passing some constraints that say we want video, and then
  5. we assign the resulting stream to a video element
  6. in the page. Of course, this just gives us a
  7. rectangle with live Video Input. We probably want to
  8. do something with it. If we want to grab Snapshots
  9. like if we want to implement a Camera Application, we can
  10. do this with a canvas context and DrawImage. Whenever we want
  11. to take a Snapshot, we simply grab the image from
  12. the video and we draw it to the camera with DrawImage.
  13. Of course a canvas in different than an image. You
  14. can't directly copy a canvas and paste it somewhere else, or
  15. download it your hard drive or post it to your
  16. social networks. Or any of the other typical User flows centred
  17. around images, but it turns out, canvas has a
  18. handy function to encode itself as an image. The canvas
  19. toDataURL method. Here, instead of displaying the canvas itself,
  20. we're copying the canvas contents as a data earl to
  21. the source of an image tag. And if you
  22. want to save these images to the Mobile's local storage,
  23. you can do that, too, by forcing a download of
  24. a link using the download attribute on an anchor element.
  25. This isn't really downloading the data per se, it's encoded in
  26. the link itself, so you're not really transferring things over the network.