---
sourceType: api-reference
sourceTypeMatchedRule: api-prefix
slug: MA/api/media/camera/cameraContext/updateMediaConstraints
title: CameraContext.updateMediaConstraints
---
Update cấu hình streaming.

## Parameters

| Property         | Type                                                                | Default | Required | Description         | Minimum Version |
| ---------------- | ------------------------------------------------------------------- | ------- | -------- | ------------------- | --------------- |
| mediaConstraints | [MediaConstraints](/docs/MA/api/media/camera/createCameraContext#mediaconstraints-object) |         | true     | Cấu hình streaming. |                 |

### Code sample — JS

```js
import React, { useEffect, useRef } from "react";
import { Box, Button, Page } from "zmp-ui";
import { createCameraContext, FacingMode } from "zmp-sdk/apis";

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

  type STREAM_TYPE = {
    audio: boolean,
    video: boolean,
  };
  const startStream = async (type: STREAM_TYPE) => {
    const camera = cameraRef.current;
    const enableVideo = type.video;
    const enableAudio = type.audio;
    await camera?.updateMediaConstraints({
      audio: enableAudio,
      video: enableVideo,
    });

    if (!camera?.isUsing()) {
      await camera?.start();
    }
  };
  return (
    <Page>
      <Box>
        
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Box flex alignContent={"center"}>
          <Button
            size={"small"}
            className="mb-2"
            variant="primary"
            onClick={async () => {
              await startStream({ audio: true, video: false });
            }}
          >
            Start Micro
          </Button>
          <Button
            size={"small"}
            className="mb-2"
            variant="primary"
            onClick={async () => {
              await startStream({ audio: false, video: true });
            }}
          >
            Start Camera
          </Button>
          <Button
            size={"small"}
            className="mb-2"
            variant="primary"
            onClick={async () => {
              await startStream({ audio: true, video: true });
            }}
          >
            Start All
          </Button>
        </Box>
      </Box>
    </Page>
  );
};

export default HomePage;
```

### Code sample — TS

```ts
import React, { useEffect, useRef } from "react";
import { Box, Button, Page } from "zmp-ui";
import { createCameraContext, FacingMode, ZMACamera } from "zmp-sdk/apis";

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 = createCameraContext({
        videoElement: videoElement,
        mediaConstraints: {
          width: 640,
          height: 480,
          facingMode: FacingMode.BACK,
          audio: false,
        },
      });
    }
  }, []);

  type STREAM_TYPE = {
    audio: boolean,
    video: boolean,
  };
  const startStream = async (type: STREAM_TYPE) => {
    const camera = cameraRef.current;
    const enableVideo = type.video;
    const enableAudio = type.audio;
    await camera?.updateMediaConstraints({
      audio: enableAudio,
      video: enableVideo,
    });

    if (!camera?.isUsing()) {
      await camera?.start();
    }
  };
  return (
    <Page>
      <Box>
        
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Box flex alignContent={"center"}>
          <Button
            size={"small"}
            className="mb-2"
            variant="primary"
            onClick={async () => {
              await startStream({ audio: true, video: false });
            }}
          >
            Start Micro
          </Button>
          <Button
            size={"small"}
            className="mb-2"
            variant="primary"
            onClick={async () => {
              await startStream({ audio: false, video: true });
            }}
          >
            Start Camera
          </Button>
          <Button
            size={"small"}
            className="mb-2"
            variant="primary"
            onClick={async () => {
              await startStream({ audio: true, video: true });
            }}
          >
            Start All
          </Button>
        </Box>
      </Box>
    </Page>
  );
};

export default HomePage;

```