Image Capture: 静止画像をキャプチャしてカメラ ハードウェアを設定するための API 設定。この API は Android 版とパソコン版 Chrome 59 で利用できます。また、 ImageCapture ポリフィル ライブラリを公開しました。
この API を使用すると、ズーム、明るさ、カメラ機能、 コントラスト、ISO、ホワイトバランスそして何より、Image Capture では デバイスのカメラやウェブカメラの最大解像度機能を使用できます。 ウェブで写真を撮影する以前の技術では、動画のスナップショットを使用していました。 解像度は静止画像より低い解像度です
ImageCapture オブジェクトは、MediaStreamTrack をソースとして構築されます。「
API には、takePhoto() と grabFrame() の 2 つのキャプチャ メソッドと、次のメソッドがあります。
カメラの機能と設定を取得し、それらを変更する
設定。
工事
Image Capture API は、取得した MediaStreamTrack を介してカメラにアクセスします。
getUserMedia() から:
navigator.mediaDevices.getUserMedia({video: true})
.then(gotMedia)
.catch(error => console.error('getUserMedia() error:', error));
function gotMedia(mediaStream) {
const mediaStreamTrack = mediaStream.getVideoTracks()[0];
const imageCapture = new ImageCapture(mediaStreamTrack);
console.log(imageCapture);
}
このコードは DevTools コンソールから試すことができます。
撮影
キャプチャには、フルフレームとクイック スナップショットの 2 つの方法があります。takePhoto()
Blob（1 回の写真の露出の結果）を返します。
ダウンロードしたり、ブラウザで保存したり、<img> に表示したりできる
要素です。この方法では、写真カメラの最高解像度を使用します。
例:
const img = document.querySelector('img');
// ...
imageCapture.takePhoto()
.then(blob => {
img.src = URL.createObjectURL(blob);
img.onload = () => { URL.revokeObjectURL(this.src); }
})
.catch(error => console.error('takePhoto() error:', error));
grabFrame() は、ImageBitmap オブジェクト（ライブ動画のスナップショット）を返します。
これは（たとえば）<canvas> に描画できます。処理してから
選択的に色の値を変更できます。なお、ImageBitmap には
（通常はカメラの解像度より低くなります）
静止画機能例:
const canvas = document.querySelector('canvas');
// ...
imageCapture.grabFrame()
.then(imageBitmap => {
canvas.width = imageBitmap.width;
canvas.height = imageBitmap.height;
canvas.getContext('2d').drawImage(imageBitmap, 0, 0);
})
.catch(error => console.error('grabFrame() error:', error));
機能と設定
キャプチャ設定を操作する方法は、
変更を MediaStreamTrack に反映させるか、それとも
takePhoto() より後に表示。たとえば、zoom レベルの変更は、すぐに
MediaStreamTrack に伝播されますが、赤目軽減を設定すると、
写真の撮影時にのみ適用されます。
「ライブ」カメラの機能と設定はプレビューを通じて操作されます
MediaStreamTrack: MediaStreamTrack.getCapabilities() は
MediaTrackCapabilities
サポートされる具体的な機能と許容される範囲や範囲を含む
例:使用可能なホワイト バランス モード。
それに応じて、MediaStreamTrack.getSettings() は
MediaTrackSettings
現状を打破しますズーム、明るさ、トーチモードの分類
たとえば、次のように指定します。
var zoomSlider = document.querySelector('input[type=range]');
// ...
const capabilities = mediaStreamTrack.getCapabilities();
const settings = mediaStreamTrack.getSettings();
if (capabilities.zoom) {
zoomSlider.min = capabilities.zoom.min;
zoomSlider.max = capabilities.zoom.max;
zoomSlider.step = capabilities.zoom.step;
zoomSlider.value = settings.zoom;
}
「非ライブ」カメラの機能や設定は、
ImageCapture オブジェクト: ImageCapture.getPhotoCapabilities() は
PhotoCapabilities
「非ライブ」アクセスを提供するオブジェクトです。使用できます。
これに対応して、Chrome 61 以降では ImageCapture.getPhotoSettings()
は
PhotoSettings
現在の設定を含むオブジェクトが作成されます。写真の解像度、赤目処理
軽減モードとフラッシュ モード（懐中電灯を除く）はこのセクションに属します。次に例を示します。
var widthSlider = document.querySelector('input[type=range]');
// ...
imageCapture.getPhotoCapabilities()
.then(function(photoCapabilities) {
widthSlider.min = photoCapabilities.imageWidth.min;
widthSlider.max = photoCapabilities.imageWidth.max;
widthSlider.step = photoCapabilities.imageWidth.step;
return imageCapture.getPhotoSettings();
})
.then(function(photoSettings) {
widthSlider.value = photoSettings.imageWidth;
})
.catch(error => console.error('Error getting camera capabilities and settings:', error));
構成
「ライブ」カメラの設定はプレビューで構成可能
MediaStreamTrack さんの applyConstraints()
制約
します。次に例を示します。
var zoomSlider = document.querySelector('input[type=range]');
mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
.catch(error => console.error('Uh, oh, applyConstraints() error:', error));
「非ライブ」カメラの設定は、takePhoto() のオプションの
PhotoSettings
たとえば、
var widthSlider = document.querySelector('input[type=range]');
imageCapture.takePhoto({ imageWidth : widthSlider.value })
.then(blob => {
img.src = URL.createObjectURL(blob);
img.onload = () => { URL.revokeObjectURL(this.src); }
})
.catch(error => console.error('Uh, oh, takePhoto() error:', error));
カメラ機能
上のコードを実行すると、2 つのモデルの間でディメンションに違いがあることがわかります。
grabFrame() と takePhoto() の結果。
takePhoto() メソッドは、カメラの最大解像度へのアクセスを提供します。
grabFrame() が、MediaStreamTrack で使用可能な次の VideoFrame を取得します
実行され、takePhoto() は MediaStream を中断します。
カメラが再設定され、写真が撮影されます（通常は圧縮形式で、
Blob のように指定して）から MediaStreamTrack を再開します。基本的に
takePhoto() により、最大解像度の静止画像にアクセスできます。
使用できます。これまでは写真を撮るだけで、×
canvas 要素で drawImage() を呼び出し、動画をソースとして使用（
例はこちらを参照）。
詳しくは、README.md のセクションをご覧ください。
このデモでは、<canvas> ディメンションが動画の解像度に設定されています。
一方、<img> の自然なサイズは、最大静止画像サイズです。
カメラの解像度です。表示設定にはもちろん CSS が使用されます。
同じです
静止画像で利用可能なカメラ解像度のフルレンジを取得、設定できます
PhotoCapabilities.imageHeight に MediaSettingsRange の値を使用し、
imageWidth。なお、スペースの幅と高さの最小値と最大値の制約は、
getUserMedia() は動画用ですが、前述のとおり、
使用できます。つまり、同じグループに対して
保存時にデバイスの最大解像度機能にアクセスする
キャンバスに getUserMedia()。WebRTC の解決制約のデモ
は、解決の getUserMedia() 制約を設定する方法を示しています。
さらに設定を続けますか？
Shape Detection API: は、画像のキャプチャで適切に機能します。
grabFrame()を繰り返し呼び出して、ImageBitmapをFaceDetectorまたはBarcodeDetectorに変更します。詳しくは、 Paul Kinlan のブログ投稿の API。カメラのフラッシュ（デバイスのライト）は、次の方法でアクセスできます。
FillLightModeインチPhotoCapabilitiesただし、懐中電灯モード（常時点灯）については、MediaTrackCapabilitiesを選択します。
デモとコードサンプル
サポート
- Android およびパソコン版 Chrome 59
- Chrome Canary 版（Android および 59 より前のパソコン） 試験運用版ウェブ プラットフォームの機能が有効であること。