CameraContext.pause

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

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

• SDK: 2.39.0

Tạm dừng streaming

StreamType

• VIDEO: Stream Camera
• AUDIO: Stream Micro

import React, { useEffect, useRef } from "react";
import { Box, Button, Page, Text } from "zmp-ui";
import api, { FacingMode, StreamType, ZMACamera } from "zmp-sdk";

const HomePage = () => {
  const cameraRef = (useRef < ZMACamera) | (null > null);
  const videoRef = useRef < HTMLVideoElement > null;
  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 mx={4} mb={4} mt={5}>
        <Box mt={5} flex alignContent={"center"}>
          <Button
            size={"small"}
            variant="primary"
            onClick={async () => await cameraRef.current?.start()}
          >
            Start Stream
          </Button>
        </Box>

        <Box className="mb-2" flex alignContent={"center"}>
          <Text className="mb-2 mr-2">Video:</Text>
          <Button
            size={"small"}
            variant="primary"
            onClick={async () => {
              await cameraRef.current?.resume(StreamType.VIDEO);
            }}
          >
            ON
          </Button>
          <Button
            size={"small"}
            variant="primary"
            onClick={async () => {
              await cameraRef.current?.pause(StreamType.VIDEO);
            }}
          >
            OFF
          </Button>
        </Box>

        <Box className="mb-2" flex alignContent={"center"}>
          <Text className="mb-2 mr-2">Audio:</Text>
          <Button
            size={"small"}
            variant="primary"
            onClick={async () => {
              await cameraRef.current?.resume(StreamType.AUDIO);
            }}
          >
            ON
          </Button>
          <Button
            size={"small"}
            variant="primary"
            onClick={async () => {
              await cameraRef.current?.pause(StreamType.AUDIO);
            }}
          >
            OFF
          </Button>
        </Box>
      </Box>
    </Page>
  );
};

export default HomePage;