ImageCapture: takePhoto() メソッド
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
takePhoto() は ImageCapture インターフェイスのメソッドで、 MediaStreamTrack をソースとする動画キャプチャ端末を使用して単一の撮影を行い、データを格納した Blob で解決するプロミス (Promise) を返します。
構文
js
takePhoto()
takePhoto(photoSettings)
引数
photoSettings省略可-
写真を撮るためのオプションを設定するオブジェクト。利用できるオプションは以下の通りです。
fillLightMode-
このキャプチャ機器のフラッシュ設定です。
"auto"、"off"、"flash"のいずれかです。 imageHeight-
画像の希望の高さを整数で指定します。ブラウザーが離散的な高さしか対応していない場合は、この設定に最も近い高さの値を選択します。
imageWidth-
画像の希望の幅を整数で指定します。ブラウザーが離散的な幅しか対応していない場合は、この設定に最も近い幅の値を選択します。
redEyeReduction-
論理値で、赤目軽減が利用できる場合に使用するかどうかを示します。
返値
例外
InvalidStateErrorDOMException-
コンストラクターで渡した
MediaStreamTrackのreadyStateプロパティがliveでない場合に発生します。 UnknownErrorDOMException-
何らかの理由で処理を完了できない場合に発生します。
例
この例は、このシンプルな画像キャプチャのデモから抜粋したものです。 takePhoto() が返す Promise を使用して、返された Blob を <img> 要素にコピーする方法を示しています。簡単にするために、 ImageCapture オブジェクトをインスタンス化する方法は示していません。
js
let takePhotoButton = document.querySelector("button#takePhoto");
let canvas = document.querySelector("canvas");
takePhotoButton.onclick = takePhoto;
function takePhoto() {
imageCapture
.takePhoto()
.then((blob) => {
console.log("Took photo:", blob);
img.classList.remove("hidden");
img.src = URL.createObjectURL(blob);
})
.catch((error) => {
console.error("takePhoto() error: ", error);
});
}
仕様書
| Specification |
|---|
| MediaStream Image Capture> # dom-imagecapture-takephoto> |
ブラウザーの互換性
Loading…