This document discusses the NavigatorUserMedia interface which allows web applications access to audio and video input and output devices on supported user agents. Code examples are provided for accessing the webcam and microphone through getUserMedia and recording the media stream. Specifications from the W3C and WHATWG relating to peer-to-peer communication and video conferencing are also referenced.

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