MediaStream Image Capture API

このロケールの翻訳が存在しないため、英語バージョンのコンテンツを表示しています。 Help us translate this article!

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

MediaStream Image Capture API は、写真デバイスから画像やビデオをキャプチャするためのAPIです。データをキャプチャするだけでなく、画像サイズ、赤目軽減、フラッシュの有無、現在の設定などのデバイス機能に関する情報を取得することもできます。逆に、API では、デバイスが許可する制限内で機能を設定できます。

MediaStream image capture の概念と使用方法

画像またはビデオストリームを検索するプロセスは、以下のように行われます。サンプルコードは、Chrome の Image Capture の例を基にしています。

First, get a reference to a device by calling MediaDevices.getUserMedia(). The example below simply says give me whatever video device is available, though the getUserMedia() method allows more specific capabilities to be requested. This method returns a Promise that resolves with a MediaStream object. 

navigator.mediaDevices.getUserMedia({ video: true })
.then(mediaStream => {
  // Do something with the stream.
})

Next, isolate the visual part of the media stream. Do this by calling MediaStream.getVideoTracks(). This returns an array of MediaStreamTrack objects. The code below assumes that the first item in the MediaStreamTrack array is the one to use. You can use the properties of the MediaStreamTrack objects to select the one you need.

const track = mediaStream.getVideoTracks()[0];

At this point, you might want to configure the device capabilities before capturing an image. You can do this by calling applyConstraints() on the track object before doing anything else.   

let zoom = document.querySelector('#zoom');
const capabilities = track.getCapabilities()
// Check whether zoom is supported or not.
if (!capabilities.zoom) {
  return;
}track.applyConstraints({advanced : [{zoom: zoom.value}] });

Finally, pass the MediaStreamTrack object to the ImageCapture.ImageCapture() constructor. Though a MediaStream holds several types of tracks and provides multiple methods for retrieving them, the ImageCapture constructor will throw a DOMException of type NotSupportedError if MediaStreamTrack.kind is not "video"

let imageCapture = new ImageCapture(track);

インターフェイス

ImageCapture
有効な MediaStreamTrack を通じて参照される写真デバイスから画像をキャプチャするためのインタフェース。
PhotoCapabilities
接続されている写真デバイスに利用可能な設定オプションを提供します。 ImageCapture.getPhotoCapabilities() を呼び出して PhotoCapabilities オブジェクトを取得します。

仕様

仕様書 ステータス コメント
MediaStream Image Capture 草案 初期定義

ブラウザの互換性

ImageCapture

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
ImageCapture
実験的
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
ImageCapture() constructor
実験的
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
getPhotoCapabilities
実験的
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
getPhotoSettings
実験的
Chrome 完全対応 61Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 61Chrome Android 完全対応 61Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 あり
grabFrame
実験的
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0
takePhoto
実験的
Chrome 完全対応 60
完全対応 60
未対応 59 — 60
補足
補足 photoSettings argument not supported.
Edge ? Firefox ? IE ? Opera 完全対応 47
完全対応 47
未対応 46 — 47
補足
補足 photoSettings argument not supported.
Safari ? WebView Android 完全対応 60
完全対応 60
未対応 59 — 60
補足
補足 photoSettings argument not supported.
Chrome Android 完全対応 60
完全対応 60
未対応 59 — 60
補足
補足 photoSettings argument not supported.
Firefox Android ? Opera Android 完全対応 44
完全対応 44
未対応 43 — 44
補足
補足 photoSettings argument not supported.
Safari iOS ? Samsung Internet Android 完全対応 7.0
track
実験的
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android 完全対応 7.0

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

PhotoCapabilities

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
PhotoCapabilities
実験的非標準
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android ?
fillLightMode
実験的非標準
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android ?
imageHeight
実験的非標準
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android ?
imageWidth
実験的非標準
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android ?
redEyeReduction
実験的非標準
Chrome 完全対応 59Edge ? Firefox ? IE ? Opera 完全対応 46Safari ? WebView Android 完全対応 59Chrome Android 完全対応 59Firefox Android ? Opera Android 完全対応 43Safari iOS ? Samsung Internet Android ?

凡例

完全対応  
完全対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。
非標準。ブラウザー間の互換性が低い可能性があります。

あわせて参照