Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5west

1,529 views

Published on

2011.9.24、HTML5-WEST.jp勉強会で発表した「HTMLでつくるカメラ&落書きアプリ」のスライドです。

Published in: Technology
  • Be the first to comment

Html5west

  1. 1. 2011 9 24
  2. 2. 2011 9 24
  3. 3. 2011 9 24
  4. 4. 2011 9 24
  5. 5. 2011 9 24
  6. 6. 2011 9 24
  7. 7. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview2011 9 24
  8. 8. 2011 9 24
  9. 9. var  video  =  document.getElementsByTagName()[0];  if(navigator.getUserMedia)  {    navigator.getUserMedia(video,  successCallback);    function  successCallback(  stream  )  {      video.src  =  stream;    }  } <video  autoplay></video>2011 9 24
  10. 10. navigator.getUserMedia()2011 9 24
  11. 11. http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection http://www.whatwg.org/specs/web-apps/current-work/complete/video-conferencing-and-peer- to-peer-communication.html#blob-url2011 9 24
  12. 12. Navigator implements NavigatorUserMedia;2011 9 24
  13. 13. 2011 9 24
  14. 14. 2011 9 24
  15. 15. 2011 9 24
  16. 16. 2011 9 24
  17. 17. stream  =  new  MediaStream(  parentStream  ); recorder  =  stream  .  record();2011 9 24
  18. 18. navigator.getUserMedia(audio, gotStream, noStream); var msgStream, msgStreamRecorder; function gotStream(stream) { msgStream = stream; msgStreamRecorder = stream.record(); MediaStreamRecorder stream.onended = function () { msgStop(); } } function msgStop() { report(Creating file...); msgStream.onended = null; msgStream.stop(); msgStreamRecorder.getRecordedData(msgSave); } function msgSave(blob) { report(Uploading file...); var x = new XMLHttpRequest(); x.open(POST, uploadMessage); x.send(blob); x.onload = function () { report(Done! To record a new message, press the ⚫ button.); }; }2011 9 24
  19. 19. 2011 9 24
  20. 20. 2011 9 24
  21. 21. 2011 9 24
  22. 22. 2011 9 24
  23. 23. 2011 9 24
  24. 24. <ul> <li><img  /> <li><img  /> <li><img  /> <li><img  /> …………… </ul>2011 9 24
  25. 25. 2011 9 24
  26. 26. 2011 9 24
  27. 27. http://jsdo.it/hidetaro7/triangle012011 9 24
  28. 28. 2011 9 24
  29. 29. 2011 9 24
  30. 30. :3 :)2011 9 24

×