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
|
---
title: MediaDevices
slug: Web/API/MediaDevices
tags:
- API
- Audio
- Conference
- Devices
- Interface
- Media
- Media Capture and Streams API
- Media Streams API
- MediaDevices
- Reference
- Screen Capture
- Screen Capture API
- Sharing
- Video
- WebRTC
- インターフェイス
- メディアストリーム
- 画面キャプチャ
translation_of: Web/API/MediaDevices
---
<div>{{APIRef("Media Capture and Streams")}}</div>
<p><span class="seoSummary"><strong><code>MediaDevices</code></strong> インターフェイスは、カメラやマイク、さらに画面共有などの接続されたメディア入力デバイスへのアクセスを提供します。要するに、メディアデータのソースであるハードウェアにアクセスすることができるようになります。</span></p>
<h2 id="Properties" name="Properties">プロパティ</h2>
<p><em>親インターフェイスである {{domxref("EventTarget")}} のプロパティを継承しています。</em></p>
<h2 id="Handlers" name="Handlers">イベント</h2>
<dl>
<dt>{{domxref("MediaDevices/devicechange_event", "devicechange")}}</dt>
<dd>メディアの入力または出力機器がユーザーのコンピューターに接続されたり取り外されたりしたときに発生します。<br>
{{domxref("MediaDevices/ondevicechange", "ondevicechange")}} プロパティから利用することもできます。</dd>
</dl>
<h2 id="Methods" name="Methods">メソッド</h2>
<p><em>親インターフェイスである {{domxref("EventTarget")}} のメソッドを継承しています。</em></p>
<dl>
<dt>{{ domxref("MediaDevices.enumerateDevices", "enumerateDevices()") }}</dt>
<dd>システム上で使用できる入出力メディアデバイスについての情報を持つ配列を取得します。</dd>
<dt>{{domxref("MediaDevices.getSupportedConstraints", "getSupportedConstraints()")}}</dt>
<dd>{{domxref("MediaTrackSupportedConstraints")}} に適合するオブジェクトを返します。このオブジェクトは {{domxref("MediaStreamTrack")}} インターフェイスで対応している制約可能なプロパティを表します。制約に関する詳細や使い方については、 {{SectionOnPage("/ja/docs/Web/API/Media_Streams_API", "Capabilities and constraints")}}を参照してください。</dd>
<dt>{{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}}</dt>
<dd>共有または録画の目的で {{domxref("MediaStream")}} としてキャプチャする、画面または画面の一部 (ウィンドウなど) をユーザーに選択させます。 <code>MediaStream</code> で解決する Promise を返します。</dd>
<dt>{{ domxref("MediaDevices.getUserMedia", "getUserMedia()") }}</dt>
<dd>ユーザーの許可に基づいて、システム上のカメラや画面共有機能、マイクを起動して、入力と共にビデオトラックやオーディオトラックを含む {{domxref("MediaStream")}} を提供します。</dd>
</dl>
<h2 id="Example" name="Example">例</h2>
<pre class="brush:js">'use strict';
// Put variables in global scope to make them available to the browser console.
var video = document.querySelector('video');
var constraints = window.constraints = {
audio: false,
video: true
};
var errorElement = document.querySelector('#errorMsg');
navigator.mediaDevices.getUserMedia(constraints)
.then(function(stream) {
var videoTracks = stream.getVideoTracks();
console.log('Got stream with constraints:', constraints);
console.log('Using video device: ' + videoTracks[0].label);
stream.onremovetrack = function() {
console.log('Stream ended');
};
window.stream = stream; // make variable available to browser console
video.srcObject = stream;
})
.catch(function(error) {
if (error.name === 'ConstraintNotSatisfiedError') {
errorMsg('The resolution ' + constraints.video.width.exact + 'x' +
constraints.video.width.exact + ' px is not supported by your device.');
} else if (error.name === 'PermissionDeniedError') {
errorMsg('Permissions have not been granted to use your camera and ' +
'microphone, you need to allow the page access to your devices in ' +
'order for the demo to work.');
}
errorMsg('getUserMedia error: ' + error.name, error);
});
function errorMsg(msg, error) {
errorElement.innerHTML += '<p>' + msg + '</p>';
if (typeof error !== 'undefined') {
console.error(error);
}
}</pre>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
<th scope="col">備考</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('Media Capture', '#mediadevices', 'MediaDevices')}}</td>
<td>{{Spec2('Media Capture')}}</td>
<td>初回定義</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<div>
<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>
<p>{{Compat("api.MediaDevices")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Web/API/Media_Streams_API">Media Capture and Streams API</a>: このインターフェイスが所属する API。</li>
<li><a href="/ja/docs/Web/API/Screen_Capture_API">Screen Capture API</a>: {{domxref("MediaDevices.getDisplayMedia", "getDisplayMedia()")}} メソッドを定義している API。</li>
<li><a href="/ja/docs/Web/API/WebRTC_API">WebRTC API</a></li>
<li>{{domxref("Navigator.mediaDevices")}}: 機器にアクセスするために使用することができる <code>MediaDevices</code> への参照を返します。</li>
<li><a href="https://github.com/chrisjohndigital/CameraCaptureJS">CameraCaptureJS:</a> HTML5 による動画キャプチャおよび再生で、 <code>MediaDevices</code> および MediaStream Recording API を使用しています (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">GitHub 上のソース</a>)</li>
<li><a href="https://github.com/chrisjohndigital/OpenLang">OpenLang</a>: HTML5 による動画言語研究ウェブアプリケーションで、 <code>MediaDevices</code> および MediaStream Recording API を録画に使用しています (<a href="https://github.com/chrisjohndigital/OpenLang">GitHub 上のソース</a>)。</li>
</ul>
|
