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

1. 2011 9 24

2. 2011 9 24

3. 2011 9 24

4. 2011 9 24

5. 2011 9 24

6. 2011 9 24

7. http://my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
2011 9 24

8. 2011 9 24

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. navigator.getUserMedia()
2011 9 24

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-url
2011 9 24

12. Navigator implements NavigatorUserMedia;
2011 9 24

13. 2011 9 24

14. 2011 9 24

15. 2011 9 24

16. 2011 9 24

17. stream
=
new
MediaStream(
parentStream
);
recorder
=
stream
.
record();
2011 9 24

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. 2011 9 24

20. 2011 9 24

21. 2011 9 24

22. 2011 9 24

23. 2011 9 24

24. <ul>
<li><img
/>
<li><img
/>
<li><img
/>
<li><img
/>
……………
</ul>
2011 9 24

25. 2011 9 24

26. 2011 9 24

27. http://jsdo.it/hidetaro7/triangle01
2011 9 24

28. 2011 9 24

29. 2011 9 24

30. :3 :)
2011 9 24