getusermedia example

1// Prefer camera resolution nearest to 1280x720.
2var constraints = { audio: true, video: { width: 1280, height: 720 } }; 
3
4navigator.mediaDevices.getUserMedia(constraints)
5.then(function(mediaStream) {
6  var video = document.querySelector('video');asdfds
7  video.srcObject = mediaStream;
8  video.onloadedmetadata = function(e) {
9    video.play();
10  };
11})
12.catch(function(err) { console.log(err.name + ": " + err.message); }); // always check for errors at the end.
13

1The deprecated Navigator.getUserMedia() method prompts the user for permission
2to use up to one video input device (such as a camera or shared screen) and up
3to one audio input device (such as a microphone) as the source for a
4MediaStream.
5
6If permission is granted, a MediaStream whose video and/or audio tracks come
7from those devices is delivered to the specified success callback.  If
8permission is denied, no compatible input devices exist, or any other error
9condition occurs, the error callback is executed with a MediaStreamError object
10describing what went wrong. If the user instead doesn't make a choice at all,
11neither callback is executed.

1if (navigator.mediaDevices && navigator.mediaDevices.enumerateDevices) {
2    // Firefox 38+ seems having support of enumerateDevicesx
3    navigator.enumerateDevices = function(callback) {
4        navigator.mediaDevices.enumerateDevices().then(callback);
5    };
6}
7
8var MediaDevices = [];
9var isHTTPs = location.protocol === 'https:';
10var canEnumerate = false;
11
12if (typeof MediaStreamTrack !== 'undefined' && 'getSources' in MediaStreamTrack) {
13    canEnumerate = true;
14} else if (navigator.mediaDevices && !!navigator.mediaDevices.enumerateDevices) {
15    canEnumerate = true;
16}
17
18var hasMicrophone = false;
19var hasSpeakers = false;
20var hasWebcam = false;
21
22var isMicrophoneAlreadyCaptured = false;
23var isWebcamAlreadyCaptured = false;
24
25function checkDeviceSupport(callback) {
26    if (!canEnumerate) {
27        return;
28    }
29
30    if (!navigator.enumerateDevices && window.MediaStreamTrack && window.MediaStreamTrack.getSources) {
31        navigator.enumerateDevices = window.MediaStreamTrack.getSources.bind(window.MediaStreamTrack);
32    }
33
34    if (!navigator.enumerateDevices && navigator.enumerateDevices) {
35        navigator.enumerateDevices = navigator.enumerateDevices.bind(navigator);
36    }
37
38    if (!navigator.enumerateDevices) {
39        if (callback) {
40            callback();
41        }
42        return;
43    }
44
45    MediaDevices = [];
46    navigator.enumerateDevices(function(devices) {
47        devices.forEach(function(_device) {
48            var device = {};
49            for (var d in _device) {
50                device[d] = _device[d];
51            }
52
53            if (device.kind === 'audio') {
54                device.kind = 'audioinput';
55            }
56
57            if (device.kind === 'video') {
58                device.kind = 'videoinput';
59            }
60
61            var skip;
62            MediaDevices.forEach(function(d) {
63                if (d.id === device.id && d.kind === device.kind) {
64                    skip = true;
65                }
66            });
67
68            if (skip) {
69                return;
70            }
71
72            if (!device.deviceId) {
73                device.deviceId = device.id;
74            }
75
76            if (!device.id) {
77                device.id = device.deviceId;
78            }
79
80            if (!device.label) {
81                device.label = 'Please invoke getUserMedia once.';
82                if (!isHTTPs) {
83                    device.label = 'HTTPs is required to get label of this ' + device.kind + ' device.';
84                }
85            } else {
86                if (device.kind === 'videoinput' && !isWebcamAlreadyCaptured) {
87                    isWebcamAlreadyCaptured = true;
88                }
89
90                if (device.kind === 'audioinput' && !isMicrophoneAlreadyCaptured) {
91                    isMicrophoneAlreadyCaptured = true;
92                }
93            }
94
95            if (device.kind === 'audioinput') {
96                hasMicrophone = true;
97            }
98
99            if (device.kind === 'audiooutput') {
100                hasSpeakers = true;
101            }
102
103            if (device.kind === 'videoinput') {
104                hasWebcam = true;
105            }
106
107            // there is no 'videoouput' in the spec.
108
109            MediaDevices.push(device);
110        });
111
112        if (callback) {
113            callback();
114        }
115    });
116}
117
118// check for microphone/camera support!
119checkDeviceSupport(function() {
120    document.write('hasWebCam: ', hasWebcam, '<br>');
121    document.write('hasMicrophone: ', hasMicrophone, '<br>');
122    document.write('isMicrophoneAlreadyCaptured: ', isMicrophoneAlreadyCaptured, '<br>');
123    document.write('isWebcamAlreadyCaptured: ', isWebcamAlreadyCaptured, '<br>');
124});