CameraContext.getCameraList

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

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

• SDK: 2.39.0

Lấy danh sách camera đang active. Lưu ý: chỉ trả danh sách đầy đủ sau khi đã gọi start.

Return Values

< Array<MediaDevice>>

Property	Type	Description	Minimum Version
kind	string	Loại thiết bị, vd: videoinput
label	string	Tên của cam, vd: tele camera, ultra wide camera
deviceId	string	ID của MediaDevice

import React, {useEffect, useRef, useState} from "react";
import {Box, Button, Page, Select} from "zmp-ui";
const { Option } = Select;
import api, {FacingMode, MediaDevice, ZMACamera} from "zmp-sdk";

const HomePage = () => {
  const cameraRef = useRef<ZMACamera | null>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [cameraList, setCameraList] = useState<MediaDevice[]>([]);
  const [deviceId, setDeviceId] = 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: "100vw", height: "auto" } } ref={videoRef} muted playsInline webkit-playsinline />
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Button size={"small"} className="mb-2" variant="primary"
                onClick={ async () => {
                  const camera = cameraRef.current;
                  await camera?.start();
                  const list = camera?.getCameraList();
                  if (list) {
                    setCameraList(list);
                  }
                } }>
          Start Stream
        </Button>
      </Box>
      {
         (
          <Box className="mb-2" flex alignContent={"center"}>
            <Select
              label="Danh sách camera"
              value={deviceId}
              defaultValue={deviceId}
              onChange={(e) => {
                setDeviceId(String(e));
              }}
            >
              {
                cameraList.map((item, index) => {
                  return (
                    <Option key={index} value={item.deviceId} title={item.label} />
                  )
                })
              }
            </Select>
          </Box>
        )
      }

    </Page>
  );
};

export default HomePage;