Mengambil foto dan mengontrol setelan kamera

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

Image Capture adalah API untuk mengambil gambar diam dan mengonfigurasi setelan hardware kamera. API ini tersedia di Chrome 59 di 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, Image Capture memungkinkan Anda mengakses kemampuan resolusi penuh dari kamera perangkat atau webcam 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 kemudian memiliki dua metode pengambilan takePhoto() dan grabFrame() serta cara mengambil kemampuan dan setelan kamera, serta 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 dapat dilakukan dengan dua cara: frame penuh dan snapshot cepat. takePhoto() menampilkan Blob, hasil dari satu eksposur fotografis, yang dapat didownload, disimpan oleh browser, atau ditampilkan dalam 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 pada <canvas>, lalu diproses pasca-pemrosesan untuk mengubah nilai warna secara selektif. Perhatikan bahwa ImageBitmap hanya akan memiliki resolusi sumber video — yang biasanya akan lebih rendah daripada 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 pengambilan, bergantung pada apakah perubahan akan tercermin dalam MediaStreamTrack atau hanya dapat dilihat setelah takePhoto(). Misalnya, perubahan tingkat zoom segera disebarkan ke MediaStreamTrack, sedangkan pengurangan mata merah, jika ditetapkan, 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, misalnya rentang zoom yang didukung atau mode white balance yang diizinkan. Demikian pula, MediaStreamTrack.getSettings() menampilkan MediaTrackSettings dengan setelan saat ini yang konkret. Mode zoom, kecerahan, dan senter 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. Demikian pula, mulai Chrome 61, ImageCapture.getPhotoSettings() akan menampilkan objek PhotoSettings dengan setelan saat ini yang konkret. Resolusi foto, pengurangan efek 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 batasan applyConstraints() pratinjau MediaStreamTrack, 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 di dalam proses perender, sedangkan takePhoto() mengganggu MediaStream, mengonfigurasi ulang kamera, mengambil foto (biasanya dalam format yang dikompresi, sehingga Blob), lalu melanjutkan MediaStreamTrack. Pada dasarnya, ini berarti takePhoto() memberikan akses ke kemampuan resolusi gambar diam penuh dari kamera. Sebelumnya, Anda hanya dapat 'mengambil foto' 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> ditetapkan ke resolusi streaming video, sedangkan ukuran alami <img> adalah resolusi gambar statis maksimum kamera. CSS, tentu saja, digunakan untuk menetapkan ukuran tampilan keduanya.

Rentang lengkap resolusi kamera yang tersedia untuk gambar diam dapat diperoleh dan ditetapkan menggunakan nilai MediaSettingsRange untuk PhotoCapabilities.imageHeight dan imageWidth. Perhatikan bahwa batasan lebar dan tinggi minimum dan maksimum untuk getUserMedia() adalah untuk video, yang (seperti yang telah 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 sebelum versi 59 dengan fitur Platform Web Eksperimental diaktifkan.

Cari tahu selengkapnya