Pengambilan Gambar adalah API untuk mengambil gambar diam dan mengonfigurasi setelan hardware kamera. API ini tersedia di Chrome 59 untuk Android dan desktop. Kami juga telah memublikasikan library polyfill ImageCapture.
API ini memungkinkan kontrol atas fitur kamera seperti zoom, kecerahan, kontras, ISO, dan white balance. Yang terbaik dari semuanya, Pengambilan Gambar memungkinkan Anda mengakses kemampuan resolusi penuh dari kamera atau webcam perangkat yang tersedia. Teknik sebelumnya untuk mengambil foto di Web telah menggunakan snapshot video, yang resolusinya lebih rendah daripada yang tersedia untuk gambar diam.
Objek ImageCapture
dibuat dengan MediaStreamTrack
sebagai sumber. API tersebut kemudian memiliki dua metode pengambilan gambar takePhoto()
dan grabFrame()
, serta cara untuk mengambil kemampuan dan setelan kamera, serta untuk mengubah setelan tersebut.
Konstruksi
Image Capture API mendapatkan akses ke kamera melalui MediaStreamTrack
yang diperoleh
dari 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);
}
Anda dapat mencoba kode ini dari konsol DevTools.
Rekam
Pengambilan gambar dapat dilakukan dengan dua cara: frame penuh dan snapshot cepat. takePhoto()
menampilkan Blob
, hasil dari eksposur fotografi tunggal,
yang dapat didownload, disimpan oleh browser, atau ditampilkan di elemen
<img>
. Metode ini menggunakan resolusi kamera fotografi tertinggi yang tersedia.
Contoh:
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()
menampilkan objek ImageBitmap
, snapshot video live,
yang dapat (misalnya) digambar di <canvas
> lalu diproses kembali untuk
mengubah nilai warna secara selektif. Perlu diperhatikan bahwa ImageBitmap
hanya akan memiliki
resolusi sumber video — yang biasanya lebih rendah dari kemampuan
gambar diam kamera. Contoh:
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));
Kemampuan dan setelan
Ada sejumlah cara untuk memanipulasi setelan perekaman, bergantung pada
apakah perubahan akan ditampilkan di MediaStreamTrack
atau hanya dapat
dilihat setelah takePhoto()
. Misalnya, perubahan level zoom
akan langsung
disebarkan ke MediaStreamTrack
sedangkan pengurangan mata merah, jika disetel, hanya diterapkan saat foto diambil.
Kemampuan dan setelan kamera "live" dimanipulasi melalui pratinjau
MediaStreamTrack
: MediaStreamTrack.getCapabilities()
menampilkan
kamus MediaTrackCapabilities
dengan kemampuan konkret yang didukung dan rentang atau nilai yang
diizinkan, mis. rentang zoom yang didukung atau mode white balance yang diizinkan.
Dengan demikian, MediaStreamTrack.getSettings()
akan menampilkan
MediaTrackSettings
dengan setelan konkret saat ini. Mode zoom, kecerahan, dan torch termasuk dalam
kategori ini, misalnya:
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;
}
Kemampuan dan setelan kamera "Non-Live" dimanipulasi melalui
objek ImageCapture
: ImageCapture.getPhotoCapabilities()
menampilkan
objek PhotoCapabilities
yang memberikan akses ke kemampuan kamera "Non-Live" yang tersedia.
Dengan demikian, mulai Chrome 61, ImageCapture.getPhotoSettings()
menampilkan
objek PhotoSettings
dengan setelan saat ini yang konkret. Resolusi foto, pengurangan mata
merah, dan mode flash (kecuali senter) termasuk dalam bagian ini, misalnya:
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));
Mengonfigurasi
Setelan kamera "Live" dapat dikonfigurasi melalui
MediaStreamTrack
applyConstraints()
batasan
pratinjau, misalnya:
var zoomSlider = document.querySelector('input[type=range]');
mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
.catch(error => console.error('Uh, oh, applyConstraints() error:', error));
Setelan kamera "Non-Live" dikonfigurasi dengan kamus
PhotoSettings
opsional takePhoto()
, misalnya:
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));
Kemampuan kamera
Jika menjalankan kode di atas, Anda akan melihat perbedaan dimensi antara hasil grabFrame()
dan takePhoto()
.
Metode takePhoto()
memberikan akses ke resolusi maksimum kamera.
grabFrame()
hanya mengambil VideoFrame
berikutnya yang tersedia di MediaStreamTrack
dalam proses perender, sedangkan takePhoto()
mengganggu MediaStream
,
mengonfigurasi ulang kamera, mengambil foto (biasanya dalam format terkompresi,
sehingga Blob
) lalu melanjutkan MediaStreamTrack
. Intinya, ini berarti takePhoto()
memberikan akses ke kemampuan resolusi gambar diam penuh dari kamera. Sebelumnya, 'mengambil foto' hanya dapat dilakukan dengan
memanggil drawImage()
pada elemen canvas
, menggunakan video sebagai sumber (sesuai
contoh di sini).
Informasi selengkapnya dapat ditemukan di bagian README.md.
Dalam demo ini, dimensi <canvas>
disetel ke resolusi streaming
video, sedangkan ukuran alami <img>
adalah resolusi gambar diam
maksimum kamera. Tentu saja, CSS digunakan untuk
mengatur ukuran tampilan keduanya.
Berbagai resolusi kamera yang tersedia untuk gambar diam dapat diperoleh dan disetel
menggunakan nilai MediaSettingsRange
untuk PhotoCapabilities.imageHeight
dan
imageWidth
. Perhatikan bahwa batasan lebar serta tinggi minimum dan maksimum untuk
getUserMedia()
adalah untuk video, yang (seperti yang dibahas) mungkin berbeda dengan
kemampuan kamera untuk gambar diam. Dengan kata lain, Anda mungkin tidak dapat
mengakses kemampuan resolusi penuh perangkat saat menyimpan dari
getUserMedia()
ke kanvas. Demo batasan resolusi WebRTC menunjukkan cara menetapkan batasan getUserMedia()
untuk resolusi.
Ada lagi?
Shape Detection API berfungsi baik dengan Pengambilan Gambar:
grabFrame()
dapat dipanggil berulang kali untuk mengirimkanImageBitmap
keFaceDetector
atauBarcodeDetector
. Cari tahu selengkapnya tentang API ini dari postingan blog Paul Kinlan.Flash kamera (lampu perangkat) dapat diakses melalui
FillLightMode
dalamPhotoCapabilities
, tetapi mode Flash (flash terus-menerus) dapat ditemukan diMediaTrackCapabilities
.
Demo dan contoh kode
Dukungan
- Chrome 59 di Android dan desktop.
- Chrome Canary di Android dan desktop versi sebelumnya hingga 59 dengan fitur Eksperimental Web Platform diaktifkan.