ImageCapture
Giao diện ImageCapture thuộc MediaStream Image Capture API cung cấp các phương thức để chụp ảnh hoặc ảnh tĩnh từ camera hoặc thiết bị chụp ảnh khác. Giao diện này cho phép chụp ảnh từ một thiết bị chụp ảnh được tham chiếu qua một MediaStreamTrack hợp lệ.
Hàm khởi tạo
ImageCapture()-
Tạo một đối tượng
ImageCapturemới có thể dùng để chụp ảnh tĩnh từ mộtMediaStreamTrackđại diện cho luồng video.
Thuộc tính phiên bản
ImageCapture.trackRead only-
Trả về tham chiếu đến
MediaStreamTrackđã được truyền vào hàm khởi tạo.
Phương thức phiên bản
ImageCapture.takePhoto()-
Chụp một ảnh đơn lẻ từ thiết bị quay video cung cấp
MediaStreamTrackvà trả về mộtPromisephân giải thành mộtBlobchứa dữ liệu ảnh. ImageCapture.getPhotoCapabilities()-
Trả về một
Promisephân giải thành một đối tượng chứa các phạm vi tùy chọn cấu hình có sẵn. ImageCapture.getPhotoSettings()-
Trả về một
Promisephân giải thành một đối tượng chứa các cài đặt cấu hình ảnh hiện tại. ImageCapture.grabFrame()-
Chụp một ảnh từ video trực tiếp trong
MediaStreamTrack, trả về mộtImageBitmapnếu thành công.
Ví dụ
Đoạn mã dưới đây được lấy từ Chrome's Grab Frame - Take Photo Sample. Vì ImageCapture cần một nguồn để chụp ảnh, ví dụ dưới đây bắt đầu với thiết bị media (tức là camera).
Ví dụ này minh họa, sơ lược, một MediaStreamTrack được trích xuất từ MediaStream của thiết bị. Track đó được dùng để tạo đối tượng ImageCapture, qua đó có thể gọi takePhoto() và grabFrame(). Cuối cùng, ví dụ chỉ cách áp dụng kết quả vào một đối tượng canvas.
let imageCapture;
function onGetUserMediaButtonClick() {
navigator.mediaDevices
.getUserMedia({ video: true })
.then((mediaStream) => {
document.querySelector("video").srcObject = mediaStream;
const track = mediaStream.getVideoTracks()[0];
imageCapture = new ImageCapture(track);
})
.catch((error) => console.error(error));
}
function onGrabFrameButtonClick() {
imageCapture
.grabFrame()
.then((imageBitmap) => {
const canvas = document.querySelector("#grabFrameCanvas");
drawCanvas(canvas, imageBitmap);
})
.catch((error) => console.error(error));
}
function onTakePhotoButtonClick() {
imageCapture
.takePhoto()
.then((blob) => createImageBitmap(blob))
.then((imageBitmap) => {
const canvas = document.querySelector("#takePhotoCanvas");
drawCanvas(canvas, imageBitmap);
})
.catch((error) => console.error(error));
}
/* Utils */
function drawCanvas(canvas, img) {
canvas.width = getComputedStyle(canvas).width.split("px")[0];
canvas.height = getComputedStyle(canvas).height.split("px")[0];
let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
let x = (canvas.width - img.width * ratio) / 2;
let y = (canvas.height - img.height * ratio) / 2;
canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);
canvas
.getContext("2d")
.drawImage(
img,
0,
0,
img.width,
img.height,
x,
y,
img.width * ratio,
img.height * ratio,
);
}
document.querySelector("video").addEventListener("play", () => {
document.querySelector("#grabFrameButton").disabled = false;
document.querySelector("#takePhotoButton").disabled = false;
});
Thông số kỹ thuật
| Specification |
|---|
| MediaStream Image Capture # imagecaptureapi |