CameraContext.takePhoto

Cập nhật lần cuối: 11/06/2024

Bắt đầu hỗ trợ ở phiên bản:

• SDK: 2.39.0

Chụp ảnh từ camera.

Parameters

Property	Type	Default	Required	Description	Minimum Version
cameraFrameProps	PhotoConstraint		true	Cấu hình cho ảnh chụp.

PhotoConstraint object

Property	Type	Default	Required	Description	Minimum Version
width	number			Chiều rộng của ảnh
height	number			Chiều cao của ảnh
format	PhotoFormat	PhotoFormat.JPEG		Định dạng ảnh.
quality	PhotoQuality	PhotoQuality.NORMAL		Chất lượng ảnh nén. Lưu ý: với ảnh PNG không nén, thông số này không có tác dụng
useVideoSourceSize	boolean			Ảnh sẽ lấy theo kích thước của video
minScreenshotWidth	number			Chiều rộng tối thiểu của khung ảnh
minScreenshotHeight	number			Chiều cao tối thiểu của khung ảnh

Lưu ý: để xác định kích thước ảnh sdk sẽ lấy theo thứ tự sau:

1. width, height: ảnh sẽ theo đúng thông số này, không đảm bảo sẽ giữ đúng tỉ lệ ảnh so với video source.
2. useVideoSourceSize: sẽ lấy kích thước của video element.
3. minScreenshotWidth, minScreenshotHeight: ảnh đảm bảo giữ nguyên tỉ lệ ảnh so với video source, với kích thước tối thiểu theo thông số này. (Khuyến nghị dùng)

PhotoFormat enum

• WEBP: "image/webp" (ảnh nén)
• PNG: "image/png" (ảnh không nén)
• JPEG: "image/jpeg" (ảnh nén)

PhotoQuality enum

• HIGH: "high"
• NORMAL = "normal"
• LOW = "low"

Return Values

PhotoFrame object

Property	Type	Default	Required	Description	Minimum Version
data	string			Data URL của ảnh
width	number			Chiều rộng của ảnh
height	number			Chiều cao của ảnh

import React, { useEffect, useRef, useState } from "react";
import { Box, Button, Page } from "zmp-ui";
import api, {
  FacingMode,
  PhotoFormat,
  PhotoFrame,
  PhotoQuality,
  ZMACamera,
} from "zmp-sdk";

const HomePage = () => {
  const cameraRef = (useRef < ZMACamera) | (null > null);
  const videoRef = useRef < HTMLVideoElement > null;
  const [data, setData] = useState("");
  useEffect(() => {
    const videoElement = videoRef.current;
    if (!videoElement) {
      console.log("Media component not ready");
      return;
    }
    if (!cameraRef.current) {
      cameraRef.current = api.createCameraContext({
        videoElement: videoElement,
        mediaConstraints: {
          width: 640,
          height: 480,
          facingMode: FacingMode.BACK,
          audio: false,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        <video
          style={{ width: "50vw", height: "auto" }}
          ref={videoRef}
          muted
          playsInline
          webkit-playsinline
        />
        <img
          id="image"
          src={data}
          alt={""}
          style={{ width: "50vw", height: "auto", objectFit: "contain" }}
        ></img>
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Button
          size={"small"}
          className="mb-2"
          variant="primary"
          onClick={async () => {
            const camera = cameraRef.current;
            await camera?.start();
          }}
        >
          Start Stream
        </Button>
      </Box>

      <Box className="mb-2" flex alignContent={"center"}>
        <Button
          size={"small"}
          variant="primary"
          onClick={() => {
            let result: PhotoFrame = cameraRef.current?.takePhoto({
              quality: PhotoQuality.NORMAL,
              format: PhotoFormat.JPEG,
              minScreenshotHeight: 1000,
            });
            if (result) {
              setData(result.data);
            } else {
              console.log("No data");
            }
          }}
        >
          Take Photo
        </Button>
      </Box>
    </Page>
  );
};

export default HomePage;