Chụp ảnh và kiểm soát chế độ cài đặt của máy ảnh

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

Chụp ảnh là một API để chụp ảnh tĩnh và định cấu hình phần cứng của máy ảnh phần cài đặt. API này có trong Chrome 59 trên Android và máy tính. Chúng tôi cũng đã xuất bản thư viện polyfill ImageCapture.

API này cho phép kiểm soát các tính năng của máy ảnh như thu phóng, độ sáng, độ tương phản, ISO và cân bằng trắng. Hơn hết, Chụp ảnh cho phép bạn truy cập khả năng phân giải tối đa của bất kỳ máy ảnh hoặc webcam nào của thiết bị hiện có. Các kỹ thuật chụp ảnh trước đây trên Web đã sử dụng ảnh chụp nhanh video, Đây là độ phân giải thấp hơn so với độ phân giải hiện có cho hình ảnh tĩnh.

Đối tượng ImageCapture được tạo với MediaStreamTrack làm nguồn. Chiến lược phát hành đĩa đơn Sau đó, API có hai phương thức thu thập takePhoto() và grabFrame() cùng các cách để truy xuất các chức năng và chế độ cài đặt của máy ảnh cũng như để thay đổi những chức năng và chế độ cài đặt đó phần cài đặt.

Xây dựng

Image Capture API có quyền truy cập vào máy ảnh thông qua MediaStreamTrack thu được từ 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);
}

Bạn có thể dùng thử mã này trong bảng điều khiển Công cụ cho nhà phát triển.

Quay hình

Có hai cách chụp: toàn khung hình và chụp nhanh. takePhoto() trả về Blob, kết quả của một bức ảnh phơi sáng, mà trình duyệt có thể tải xuống, lưu trữ hoặc hiển thị trong <img> . Phương pháp này sử dụng độ phân giải cao nhất hiện có của máy ảnh. Ví dụ:

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() trả về một đối tượng ImageBitmap, một ảnh chụp nhanh của video trực tiếp, (ví dụ) có thể vẽ trên <canvas> sau đó được xử lý hậu kỳ để thay đổi có chọn lọc các giá trị màu. Xin lưu ý rằng ImageBitmap sẽ chỉ có đoạn mã độ phân giải của nguồn video — thường thấp hơn độ phân giải của camera các tính năng liên quan đến hình ảnh tĩnh. Ví dụ:

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));

Chức năng và chế độ cài đặt

Có một số cách để thao tác với cài đặt chụp, tùy thuộc vào liệu các thay đổi có được phản ánh trong MediaStreamTrack hay chỉ có thể được được xem sau takePhoto(). Ví dụ: cấp độ zoom sẽ thay đổi ngay lập tức được truyền đến MediaStreamTrack trong khi tính năng giảm mắt đỏ (khi được thiết lập) là chỉ được áp dụng khi ảnh đang được chụp.

"Trực tiếp" các chế độ cài đặt và chức năng của máy ảnh được điều chỉnh thông qua bản xem trước MediaStreamTrack: MediaStreamTrack.getCapabilities() trả về một MediaTrackCapabilities với các tính năng được hỗ trợ cụ thể và phạm vi hoặc phạm vi được phép giá trị, ví dụ: phạm vi thu phóng được hỗ trợ hoặc chế độ cân bằng trắng được phép. Tương ứng, MediaStreamTrack.getSettings() sẽ trả về một MediaTrackSettings bằng chế độ cài đặt cụ thể hiện tại. Chế độ thu phóng, độ sáng và đèn pin thuộc về danh mục này, ví dụ:

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;
}

"Không phát trực tiếp" các chế độ cài đặt và chức năng của camera được sửa đổi thông qua Đối tượng ImageCapture: ImageCapture.getPhotoCapabilities() trả về một PhotoCapabilities đối tượng cấp quyền truy cập vào trạng thái "Không hoạt động" các chức năng hiện có của camera. Tương ứng, bắt đầu từ Chrome 61, ImageCapture.getPhotoSettings() trả về một PhotoSettings bằng các chế độ cài đặt cụ thể hiện tại. Độ phân giải ảnh, mắt đỏ chế độ giảm kích thước và chế độ flash (ngoại trừ đèn pin) thuộc về phần này, ví dụ:

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));

Đang định cấu hình

"Trực tiếp" có thể định cấu hình chế độ cài đặt camera thông qua bản xem trước applyConstraints() của MediaStreamTrack quy tắc ràng buộc , ví dụ:

var zoomSlider = document.querySelector('input[type=range]');

mediaStreamTrack.applyConstraints({ advanced: [{ zoom: zoomSlider.value }]})
    .catch(error => console.error('Uh, oh, applyConstraints() error:', error));

"Không phát trực tiếp" Chế độ cài đặt camera được định cấu hình bằng tuỳ chọn của takePhoto() PhotoSettings từ điển, ví dụ:

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));

Chức năng của máy ảnh

Nếu chạy mã ở trên, bạn sẽ thấy sự khác biệt về kích thước giữa Kết quả grabFrame() và takePhoto().

Phương thức takePhoto() cho phép truy cập vào độ phân giải tối đa của máy ảnh.

grabFrame() chỉ lấy bài thi VideoFrame tiếp theo trong MediaStreamTrack bên trong quá trình kết xuất đồ hoạ, trong khi takePhoto() làm gián đoạn MediaStream, định cấu hình lại máy ảnh, chụp ảnh (thường ở định dạng nén, do đó Blob) rồi tiếp tục MediaStreamTrack. Về cơ bản, điều này có nghĩa là takePhoto() cấp quyền truy cập vào độ phân giải đầy đủ của hình ảnh tĩnh các chức năng khác của máy ảnh. Trước đây, tính năng "chụp ảnh" chỉ có thể "chụp ảnh" theo đang gọi drawImage() trên phần tử canvas, sử dụng một video làm nguồn (theo ví dụ tại đây).

Bạn có thể tìm thêm thông tin trong phần README.md.

Trong bản minh hoạ này, kích thước <canvas> được đặt thành độ phân giải của video luồng, trong khi kích thước tự nhiên của <img> là kích thước hình ảnh tĩnh tối đa độ phân giải của máy ảnh. Tất nhiên, CSS được dùng để thiết lập màn hình kích thước của cả hai.

Toàn bộ độ phân giải máy ảnh có sẵn cho hình ảnh tĩnh có thể được lấy và thiết lập bằng cách sử dụng các giá trị MediaSettingsRange cho PhotoCapabilities.imageHeight và imageWidth. Lưu ý rằng giới hạn chiều rộng và chiều cao tối thiểu và tối đa cho getUserMedia() dành cho video, (như đã thảo luận) có thể khác với các chức năng của máy ảnh đối với hình ảnh tĩnh. Nói cách khác, bạn không thể truy cập vào khả năng phân giải đầy đủ của thiết bị của bạn khi lưu từ getUserMedia() với một ảnh in trên vải canvas. Bản minh hoạ về quy tắc ràng buộc đối với độ phân giải của WebRTC cho biết cách đặt các điều kiện ràng buộc getUserMedia() để phân giải.

Còn thiết lập gì nữa không?

  • API Phát hiện hình dạng hoạt động tốt với tính năng Chụp ảnh: grabFrame() có thể được gọi nhiều lần để gửi nguồn cấp dữ liệu ImageBitmap đến FaceDetector hoặc BarcodeDetector. Tìm hiểu thêm về chính sách API từ bài đăng trên blog của Paul Kinlan.

  • Bạn có thể truy cập vào Camera flash (ánh sáng của thiết bị) qua FillLightMode inch PhotoCapabilities , nhưng bạn có thể tìm thấy Chế độ đèn pin (nhấp nháy liên tục) trong MediaTrackCapabilities

Bản minh hoạ và mã mẫu

Hỗ trợ

  • Chrome 59 trên Android và máy tính.
  • Chrome Canary trên Android và máy tính trước phiên bản 59 có Đã bật các tính năng Nền tảng web thử nghiệm.

Tìm hiểu thêm