MediaDevices

MediaDevices インターフェイスは、カメラやマイク、さらに画面共有などの接続されたメディア入力デバイスへのアクセスを提供します。要するに、メディアデータのソースであるハードウェアにアクセスすることができるようになります。

プロパティ

親インターフェイスである EventTarget のプロパティを継承しています。

イベント

devicechange
メディアの入力または出力機器がユーザーのコンピューターに接続されたり取り外されたりしたときに発生します。
ondevicechange プロパティから利用することもできます。

メソッド

親インターフェイスである EventTarget のメソッドを継承しています。

enumerateDevices()
システム上で使用できる入出力メディアデバイスについての情報を持つ配列を取得します。
getSupportedConstraints()
MediaTrackSupportedConstraints に適合するオブジェクトを返します。このオブジェクトは MediaStreamTrack インターフェイスで対応している制約可能なプロパティを表します。制約に関する詳細や使い方については、 Capabilities and constraints in Media Capture and Streams API (Media Streams)を参照してください。
getDisplayMedia()
共有または録画の目的で MediaStream としてキャプチャする、画面または画面の一部 (ウィンドウなど) をユーザーに選択させます。 MediaStream で解決する Promise を返します。
getUserMedia()
ユーザーの許可に基づいて、システム上のカメラや画面共有機能、マイクを起動して、入力と共にビデオトラックやオーディオトラックを含む MediaStream を提供します。

'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);
  }
}

仕様書

仕様書 状態 備考
Media Capture and Streams
MediaDevices の定義
勧告候補 初回定義

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
MediaDevicesChrome 完全対応 47Edge 完全対応 ≤18Firefox 完全対応 33IE 未対応 なしOpera 完全対応 30Safari 完全対応 11WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 36Opera Android 完全対応 30Safari iOS 完全対応 11Samsung Internet Android 完全対応 5.0
devicechange eventChrome 完全対応 57Edge 完全対応 12Firefox 完全対応 52IE 未対応 なしOpera 完全対応 34Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android ? Opera Android 完全対応 43Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
enumerateDevicesChrome 完全対応 47Edge 完全対応 12Firefox 完全対応 63
補足 無効
完全対応 63
補足 無効
補足 Prior to Firefox 63, enumerateDevices() only returned input devices. Starting with Firefox 63, output devices are also included if the media.setsinkid.enabled preference is enabled.
無効 From version 63: this feature is behind the media.setsinkid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 39
IE 未対応 なしOpera 完全対応 34Safari 完全対応 11WebView Android 完全対応 47Chrome Android 完全対応 47Firefox Android 完全対応 63
補足 無効
完全対応 63
補足 無効
補足 Prior to Firefox 63, enumerateDevices() only returned input devices. Starting with Firefox 63, output devices are also included if the media.setsinkid.enabled preference is enabled.
無効 From version 63: this feature is behind the media.setsinkid.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 39
Opera Android 完全対応 34Safari iOS 完全対応 11Samsung Internet Android 完全対応 5.0
getDisplayMedia()Chrome 完全対応 72
完全対応 72
未対応 70 — 72
補足 無効
補足 Available as a member of Navigator instead of MediaDevices in Chrome 70 and 71.
無効 From version 70 until version 72 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 79
完全対応 79
完全対応 17
補足
補足 Available as a member of Navigator instead of MediaDevices.
Firefox 完全対応 66
完全対応 66
未対応 33 — 66
補足
補足 Since Firefox 33 you can capture screen data using getUserMedia(), with a video constraint called mediaSource. Prior to 52 it relied on a client-configurable whitelist.
IE 未対応 なしOpera 完全対応 60
完全対応 60
未対応 57 — 60
補足 無効
補足 Available as a member of Navigator instead of MediaDevices in Opera 57 and 58.
無効 From version 57 until version 60 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Safari 完全対応 13WebView Android 未対応 なし
補足
未対応 なし
補足
補足 API is available, but will always fail with NotAllowedError.
Chrome Android 未対応 なしFirefox Android 未対応 なし
補足
未対応 なし
補足
補足 API is available, but will always fail with NotAllowedError.
Opera Android 未対応 なしSafari iOS 完全対応 13Samsung Internet Android 未対応 なし
getSupportedConstraintsChrome 完全対応 53Edge 完全対応 12Firefox 完全対応 44IE 未対応 なしOpera 完全対応 40Safari 完全対応 11WebView Android 完全対応 53Chrome Android 完全対応 52Firefox Android 完全対応 50Opera Android 完全対応 41Safari iOS 完全対応 11Samsung Internet Android 完全対応 6.0
getUserMediaChrome 完全対応 52
完全対応 52
未対応 47 — 52
補足 無効
補足 Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
無効 From version 47 until version 52 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Edge 完全対応 12Firefox 完全対応 36
補足
完全対応 36
補足
補足 Older versions of Firefox implement navigator.mozGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
補足 Before Firefox 55, getUserMedia() incorrectly returns NotSupportedError when the list of constraints specified is empty, or has all constraints set to false. Starting in Firefox 55, this situation now correctly calls the failure handler with a TypeError.
補足 When using the Firefox-specific video constraint called mediaSource to request display capture, Firefox 66 and later consider values of screen and window to both cause a list of screens and windows to be shown.
補足 Starting in Firefox 66, getUserMedia() can no longer be used in sandboxed <iframe>s or data URLs entered in the address bar by the user.
IE 未対応 なしOpera 完全対応 40
完全対応 40
未対応 34 — 40
補足 無効
補足 Older versions of Opera implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
無効 From version 34 until version 40 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Safari 完全対応 11WebView Android 完全対応 53Chrome Android 完全対応 52
完全対応 52
未対応 47 — 52
補足 無効
補足 Older versions of Chrome implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
無効 From version 47 until version 52 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
Firefox Android 完全対応 36
補足
完全対応 36
補足
補足 Older versions of Firefox implement navigator.mozGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
補足 Before Firefox 55, getUserMedia() incorrectly returns NotSupportedError when the list of constraints specified is empty, or has all constraints set to false. Starting in Firefox 55, this situation now correctly calls the failure handler with a TypeError.
補足 When using the Firefox-specific video constraint called mediaSource to request display capture, Firefox 66 and later consider values of screen and window to both cause a list of screens and windows to be shown.
補足 Starting in Firefox 66, getUserMedia() can no longer be used in sandboxed <iframe>s or data URLs entered in the address bar by the user.
Opera Android 完全対応 41
完全対応 41
未対応 34 — 41
補足 無効
補足 Older versions of Opera implement navigator.webkitGetUserMedia, a prefixed form of the legacy navigator.getUserMedia API.
無効 From version 34 until version 41 (exclusive): this feature is behind the Experimental Web Platform features preference (needs to be set to Enabled).
Safari iOS 完全対応 11Samsung Internet Android 完全対応 6.0
ondevicechangeChrome 完全対応 57Edge 完全対応 12Firefox 完全対応 52
完全対応 52
未対応 51 — 52
補足 無効
補足 MediaDevices.ondevicechange is supported only on macOS.
無効 From version 51 until version 52 (exclusive): this feature is behind the media.ondevicechange.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 34Safari 未対応 なしWebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 ありOpera Android 完全対応 34Safari iOS 未対応 なしSamsung Internet Android 未対応 なし
Stereo audio captureChrome ? Edge ? Firefox 完全対応 55IE 未対応 なしOpera ? Safari 未対応 なしWebView Android ? Chrome Android ? Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android ?

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。

関連情報