2011   9   24
2011   9   24
2011   9   24
2011   9   24
2011   9   24
2011   9   24
http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview2011   9   24
2011   9   24
var	  video	  =	  document.getElementsByTagName()[0];                	  if(navigator.getUserMedia)	  {                	  	...
navigator.getUserMedia()2011   9   24
http://dev.w3.org/2011/webrtc/editor/webrtc.html#peerconnection       http://www.whatwg.org/specs/web-apps/current-work/co...
Navigator implements NavigatorUserMedia;2011   9   24
2011   9   24
2011   9   24
2011   9   24
2011   9   24
stream	  =	  new	  MediaStream(	  parentStream	  );       recorder	  =	  stream	  .	  record();2011   9   24
navigator.getUserMedia(audio, gotStream, noStream);       var msgStream, msgStreamRecorder;        function gotStream(stre...
2011   9   24
2011   9   24
2011   9   24
2011   9   24
2011   9   24
<ul>                 <li><img	  />                 <li><img	  />                 <li><img	  />                 <li><img	  ...
2011   9   24
2011   9   24
http://jsdo.it/hidetaro7/triangle012011   9   24
2011   9   24
2011   9   24
:3 :)2011   9   24
Upcoming SlideShare
Loading in...5
×

Html5west

1,268

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,268
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×