blob: 8ff19d33963dc1d3049744efbb0386b34e525aef (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
---
title: MediaDevices.enumerateDevices()
slug: Web/API/MediaDevices/enumerateDevices
tags:
- API
- Experimental
- MediaDevices
- Method
translation_of: Web/API/MediaDevices/enumerateDevices
---
<p>{{APIRef("WebRTC")}}{{SeeCompatTable}}</p>
<p><strong><code>MediaDevices.enumeratedDevices()</code></strong> メソッドは、システム上で利用できる入出力メディアデバイスの情報を収集します。</p>
<h2 id="構文">構文</h2>
<pre class="syntaxbox">navigator.mediaDevices.enumerateDevices();</pre>
<h3 id="戻り値">戻り値</h3>
<p>列挙が成功した場合、使用できる入出力メディアデバイスの情報を持つ<font face="Courier New">MediaDeviceInfo</font>オブジェクトの配列で満たされた{{ domxref("Promise") }} が返されます。</p>
<p>次の情報が返されます。プライバシーへの配慮のため、コールした時に現在のページにアクティブな{{domxref("MediaStream")}} オブジェクトがあるか、ユーザーがページのオリジンに対して認可に対して許可を出していない限り、<font face="Courier New">label</font>情報は空文字です。</p>
<p><code>MediaDeviceInfoは以下の情報を含みます。</code></p>
<dl>
<dt><code>deviceId</code></dt>
<dd>deviceIdはセッション間で一貫性のあるデバイスを表現するための識別子である{{domxref("DOMString")}} です。これはほかのアプリケーションから推測できず、呼び出されたアプリケーションのオリジンごとにユニークです。ユーザーがcookieをクリアしたときにリセットされます（プライベートブラウジングのためには、セッション間で一貫性のない異なる識別子が使われます）。</dd>
<dt><code>groupId</code></dt>
<dd>groupIdはグループ識別子である{{domxref("DOMString")}} です。同じ物理デバイスに所属する場合、2つのデバイスは同じグループ識別子を持ちます。たとえば、組み込みのカメラとマイクの両方があるモニターです。</dd>
<dt><code>kind</code></dt>
<dd>kindは "<font face="Courier New">videoinput</font>"、"<font face="Courier New">audioinput</font>" か "<font face="Courier New">audiooutput</font>"のいづれかが列挙された値です。</dd>
<dt><code>label</code></dt>
<dd>labelはこのデバイスを表すラベルである {{domxref("DOMString")}} です（たとえば、"External USB Webcam）。MediaStreamがアクティブな間か認可が許可されているときだけ使用できます。</dd>
</dl>
<h2 id="例">例</h2>
<p><code>mediaDevices.enumerateDevices()</code>の使用例を示します。</p>
<pre class="brush: js">if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
console.log("enumerateDevices() not supported.");
return;
}
// List cameras and microphones.
navigator.mediaDevices.enumerateDevices()
.then(function(devices) {
devices.forEach(function(device) {
console.log(device.kind + ": " + device.label +
" id = " + device.deviceId);
});
})
.catch(function(err) {
console.log(err.name + ": " + err.message);
});
</pre>
<p>実行例：<br>
<br>
<code>videoinput: id = csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=<br>
audioinput: id = RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=<br>
audioinput: id = r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=</code><br>
<br>
つ以上のMediaStreamがアクティブか、認可に対する許可がある場合：</p>
<p><code>videoinput: FaceTime HD Camera (Built-in) id=csO9c0YpAf274OuCPUA53CNE0YHlIr2yXCi+SqfBZZ8=<br>
audioinput: default (Built-in Microphone) id=RKxXByjnabbADGQNNZqLVLdmXlS0YkETYCIbg+XxnvM=<br>
audioinput: Built-in Microphone id=r2/xw1xUPIyZunfV1lGrKOma5wTOvCkWfZ368XCndm0=</code></p>
<h2 id="認可">認可</h2>
<p>インストールできるアプリケーション（たとえば、 <a href="/ja/Apps/Build/Building_apps_for_Firefox_OS/Firefox_OS_app_beginners_tutorial"><u><font color="#0066cc">Firefox OS app</font></u></a>）で<font face="Courier New">enumerateDevices()</font> を使用するには、マニフェストファイルに1つまたは両方の次のフィールドを設定する必要があります。</p>
<pre class="brush: js">"permissions": {
"audio-capture": {
"description": "Required to capture audio using getUserMedia()"
},
"video-capture": {
"description": "Required to capture video using getUserMedia()"
}
}</pre>
<p>さらなる情報は<a href="/ja/Apps/Developing/App_permissions#audio-capture">permission: audio-capture</a>と<a href="/ja/Apps/Developing/App_permissions#video-capture">permission: video-capture</a>を見てください。</p>
<h2 id="仕様">仕様</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
<tr>
<td>{{SpecName('Media Capture', '#mediadevices', 'mediaDevices.enumerateDevices')}}</td>
<td>{{Spec2('Media Capture')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>Stream API </td>
<td>{{CompatChrome(45.0)}} [1]</td>
<td>39</td>
<td>{{CompatNo}} </td>
<td>
<p>{{CompatNo}}</p>
</td>
<td>{{CompatNo}} </td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>Firefox OS (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Stream API </td>
<td>{{CompatNo}} </td>
<td>39</td>
<td>39</td>
<td>{{CompatNo}} </td>
<td>{{CompatNo}}</td>
<td>{{CompatNo}} </td>
</tr>
</tbody>
</table>
</div>
<p>[1] Behind a flag.</p>
<h3 id="ChromeとOperaの実装">ChromeとOperaの実装</h3>
<ul>
<li><a href="https://github.com/webrtc/adapter"><u><font color="#0066cc">adapter.js</font></u></a>のポリフィルを通して、ChromeとOperaでこのインターフェイスを使用できます。</li>
</ul>
<h2 id="関連項目">関連項目</h2>
<ul>
<li><a href="https://developer.mozilla.org/ja/docs/Web/API/MediaDevices/getUserMedia" title="mediaDevices.getUserMedia">navigator.mediaDevices.getUserMedia</a></li>
<li><a href="/en-US/docs/WebRTC" title="WebRTC">WebRTC</a> - APIの導入ページ</li>
<li><a href="/en-US/docs/WebRTC/MediaStream_API" title="WebRTC/MediaStream_API">MediaStream API</a> - media streamオブジェクトの導入ページ</li>
<li><a href="/en-US/docs/WebRTC/taking_webcam_photos" title="WebRTC/taking_webcam_photos">Taking webcam photos</a> - videoよりも写真を撮るために<code>getUserMedia()を使用するためのチュートリアル</code></li>
</ul>
|
