Mengambil foto dan mengontrol setelan kamera

Miguel Casas-Sanchez
X GitHub
Sam Dutton
François Beaufort
François Beaufort
GitHub

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?

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.

Cari tahu selengkapnya