これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

プロパティ

親クラスであるEventTargetのプロパティを継承しています。

イベントハンドラ

MediaDevices.ondevicechange
devicechangeイベントのイベントハンドラです。このイベントは、メディア入力または出力のデバイスがユーザーのコンピュータへ接続された時または解除された時に、 MediaDevicesへ配信されます。

メソッド

親クラスであるEventTargetのメソッドを継承しています。

EventTarget.addEventListener()
指定されたイベントタイプへのイベントハンドラを登録します。
MediaDevices.enumerateDevices()
システム上で使用できる入出力メディアデバイスについての情報を持つ配列を取得します。
MediaDevices.getSupportedConstraints()
MediaTrackSupportedConstraintsに適合するオブジェクトを返します。このオブジェクトはMediaStreamTrackインタフェースでサポートしている制約可能なプロパティを表します。制約に関する詳細や使い方については、Capabilities and constraints in Media Capture and Streams API (Media Streams)を参照してください。
MediaDevices.getUserMedia()
ユーザの許可を元に、システム上のカメラや画面共有機能、マイクを起動して、入力と共にビデオトラックやオーディオトラックを含む MediaStream を提供します。
EventTarget.removeEventListener()
イベントリスナーを削除します。

'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.onended = 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 の定義
勧告候補 初回定義。

ブラウザ実装状況

現在、互換性データを可読形式の JSON フォーマットに置き換えているところです。 この互換性一覧は古い形式を使っており、これに含まれるデータの置き換えが済んでいません。 手助けしていただける場合は、こちらから!

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 未サポート 36.0 (36.0) 未サポート 未サポート 未サポート
enumerateDevices() 45.0[1] ? 未サポート 未サポート 未サポート
Feature Android Firefox Mobile (Gecko) Firefox OS IE Mobile Opera Mobile Safari Mobile Chrome for Android
基本サポート 未サポート 未サポート 36.0 (36.0) 2.2 未サポート 未サポート 未サポート 未サポート
enumerateDevices() 未サポート 未サポート ? ? 未サポート 未サポート 未サポート 未サポート

[1] Behind a flag.

関連項目

ドキュメントのタグと貢献者

このページの貢献者: e53e04ac, dskmori, YuichiNukiyama, teoli
最終更新者: e53e04ac,