Zalo Mini App

https://docs.zaloplatforms.com/docs/MA
Admin
Zalo Mini App enables developers to build and deploy lightweight web applications directly inside...
Tokens:182,449
Snippets:1,121
Trust Score:2.2
Update:1 week ago
Show doc for...
Tokens:
Raw
### JavaScript example using CameraContext.getCameraList

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/getCameraList

Shows how to create a camera context, start the stream, and retrieve the camera list. The list is only complete after calling start(). The example uses zmp-ui components and zmp-sdk APIs.

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

const HomePage = () => {
  const cameraRef = useRef(null);
  const videoRef = useRef(null);
  const [cameraList, setCameraList] = useState([]);
  const [deviceId, setDeviceId] = useState("");
  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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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 (
                
              );
            })}
          </Select>
        </Box>
      }
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### JS example: updateMediaConstraints with createCameraContext

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/updateMediaConstraints

JavaScript example showing how to create a camera context and update media constraints to start audio and/or video streams. Uses zmp-sdk/apis and zmp-ui components. The updateMediaConstraints call is followed by a start() call if the camera is not already in use.

```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;
```

--------------------------------

### Start camera stream (JavaScript)

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/start

JavaScript example using createCameraContext to start the camera stream. The camera context is created with a video element and media constraints (640x480, back facing, audio disabled). The start() method is called on button click.

```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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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>
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Start camera stream (TypeScript)

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/start

TypeScript example using createCameraContext to start the camera stream. Includes type annotations for ZMACamera and MediaDevice, and uses the same media constraints and start() call as the JavaScript version.

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

const HomePage = () => {
  const cameraRef = useRef<ZMACamera | null>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [cameraList, setCameraList] = useState<MediaDevice[]>([]);
  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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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>
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### TS example: updateMediaConstraints with createCameraContext

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/updateMediaConstraints

TypeScript example showing how to create a camera context and update media constraints to start audio and/or video streams. Uses zmp-sdk/apis and zmp-ui components. The updateMediaConstraints call is followed by a start() call if the camera is not already in use.

```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;
```

--------------------------------

### JavaScript example using createCameraContext and takePhoto

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/takePhoto

JavaScript example showing how to create a camera context, start the stream, and take a photo. The takePhoto call returns a PhotoFrame object or null if the camera is not streaming. The result data is set to an image element.

```javascript
import React, { useEffect, useRef, useState } from "react";
import { Box, Button, Page } from "zmp-ui";
import { createCameraContext, FacingMode, PhotoFormat, PhotoFrame, PhotoQuality } from "zmp-sdk/apis";

const HomePage = () => {
  const cameraRef = useRef(null);
  const videoRef = useRef(null);
  const [data, setData] = useState("");
  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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
        <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;
```

--------------------------------

### JavaScript example for CameraContext.flip

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/flip

Creates a camera context with the back camera and provides buttons to start the stream and flip the camera. Uses zmp-sdk/apis and zmp-ui components.

```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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </Box>

      <Box mt={5} flex alignContent={"center"}>
        <Button
          size={"small"}
          variant="primary"
          onClick={async () => await cameraRef.current?.start()}
        >
          Start Stream
        </Button>
        <Button
          size={"small"}
          variant="primary"
          onClick={async () => await cameraRef.current?.flip()}
        >
          Flip Camera
        </Button>
      </Box>
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Get submitted documents (JavaScript example)

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/kyb/getDocuments

Example call to retrieve the list of submitted documents and their review statuses. Requires the miniAppId parameter. The response contains error, message, and data fields, where data includes businessStatus, ownerRequests, and businessRequests.

```javascript
// Example request
GET /partner/kyb/getDocuments?miniAppId={miniAppId}
```

--------------------------------

### TypeScript example using createCameraContext and takePhoto

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/takePhoto

TypeScript example showing how to create a camera context, start the stream, and take a photo. The takePhoto call returns a PhotoFrame object or null if the camera is not streaming. The result data is set to an image element.

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

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

  return (
    <Page>
      <Box>
        
        <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;
```

--------------------------------

### CameraContext.setMirror - JavaScript example

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/setMirror

JavaScript example for using CameraContext.setMirror. It creates a camera context with createCameraContext, starts the stream, and toggles mirror mode via setMirror(true) or setMirror(false) buttons. Requires a video element and the zmp-sdk/apis module.

```js
import React, { useEffect, useRef } from "react";
import { Box, Button, Page, Text } 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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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 mb={2} mt={5} flex alignContent={"center"}>
          <Text className="mb-2 mr-2">Mirror:</Text>
          <Button
            size={"small"}
            variant="primary"
            onClick={() => {
              cameraRef.current?.setMirror(true);
            }}
          >
            TRUE
          </Button>
          <Button
            size={"small"}
            variant="primary"
            onClick={() => {
              cameraRef.current?.setMirror(false);
            }}
          >
            FALSE
          </Button>
        </Box>
      </Box>
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### start

Source: https://docs.zaloplatforms.com/docs/MA/api/intro

Starts streaming from the camera. This method is part of the camera context and initiates the video stream.

```APIDOC
## start

### Description
Bắt đầu streaming từ camera.

### Method
start

### Parameters
None.

### Response
None.
```

--------------------------------

### CameraContext.start

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/start

Starts the camera streaming. If you want to use the microphone as well, you can set the MediaConstraints config with audio: true, or call resume with StreamType.AUDIO.

```APIDOC
## CameraContext.start

### Description
Starts the camera streaming. If you want to use the microphone as well, you can set the MediaConstraints config with audio: true, or call resume with StreamType.AUDIO.

### Method
start

### Endpoint
CameraContext.start()

### Parameters
None explicitly documented.

### Request Example
```js
const camera = createCameraContext({
  videoElement: videoElement,
  mediaConstraints: {
    width: 640,
    height: 480,
    facingMode: FacingMode.BACK,
    audio: false,
  },
});
await camera?.start();
```

### Response
No response details documented.

### 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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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>
    </Page>
  );
};

export default HomePage;
```

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

const HomePage = () => {
  const cameraRef = useRef<ZMACamera | null>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [cameraList, setCameraList] = useState<MediaDevice[]>([]);
  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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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>
    </Page>
  );
};

export default HomePage;
```
```

--------------------------------

### Set camera deviceId with createCameraContext (JS)

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/setDeviceId

JavaScript example that creates a camera context, starts the stream, retrieves the camera list, and uses setDeviceId to switch the active camera when the user selects a new device.

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

const HomePage = () => {
  const cameraRef = useRef(null);
  const videoRef = useRef(null);
  const [cameraList, setCameraList] = useState([]);
  const [deviceId, setDeviceId] = useState("");
  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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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));
              cameraRef.current?.setDeviceId(String(e));
            }}
          >
            {cameraList.map((item, index) => {
              return (
                
              );
            })}
          </Select>
        </Box>
      }
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Client-side openMediaPicker with async/await

Source: https://docs.zaloplatforms.com/docs/MA/api/media/file/openMediaPicker

Alternative example using async/await instead of callbacks. The function pickMedia awaits openMediaPicker and parses the returned data.

```jsx
import { openMediaPicker } from "zmp-sdk/apis";

const pickMedia = async () => {
  try {
    const { data } = await openMediaPicker({
      type: "photo",
      serverUploadUrl: "https://<your-domain-api>/upload/media",
      compressLevel: 2, //Tùy chọn nếu cần nén ảnh
    });
    const result = JSON.parse(data);
    console.log(result);
  } catch (error) {
    // xử lý khi gọi api thất bại
    console.log(error);
  }
};
```

--------------------------------

### GET /partner/app-permissions

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/apis/appPermission

Retrieves the list of system permissions and the current registration status of the Mini App.

```APIDOC
## Get App Permissions

### Description
Retrieves the list of system permissions together with the current registration status of the Mini App.

### Method
GET

### Endpoint
Open API: partner endpoint for app permissions

### Parameters
#### Query Parameters
- **appId** (String) - Required - ID of the Mini App.

### Request Example
```
appId: "your_mini_app_id"
```

### Response
#### Success Response
- **error** (int) - Error code, 0 on success.
- **message** (String) - Corresponding message.
- **total** (int) - Total system permissions.
- **permissions** (List AppPermissionItem) - List of permissions.

#### AppPermissionItem
- **permissionId** (int) - Permission ID.
- **name** (String) - Permission name.
- **description** (String) - Permission description.
- **action** (String) - Corresponding action.
- **status** (Enum) - Registration status: `UNREGISTERED`, `WAITING_APPROVAL`, `APPROVED`.
- **consentText** (String) - Consent content shown to users.

### Response Example
```
{
  "error": 0,
  "message": "ok",
  "total": 3,
  "permissions": [
    {
      "permissionId": 1,
      "name": "camera",
      "description": "Access camera",
      "action": "camera",
      "status": "APPROVED",
      "consentText": "Allow access to camera"
    }
  ]
}
```

### Code sample — Java
```js
import com.vng.zalo.miniapp.openapi.sdk.models.GetPermissionsRequest;
import com.vng.zalo.miniapp.openapi.sdk.models.GetPermissionsResponse;

GetPermissionsRequest request = new GetPermissionsRequest();
request.setMiniAppId(Long.parseLong(System.getenv("MINI_APP_ID")));

GetPermissionsResponse response = client.getAppPermissions(request);
System.out.println(response);
```

### Code sample — Node.js
```js
const { total, permissions, error, message } =
  await partnerClient.getAppPermissions({
    appId: "your_mini_app_id",
  });
```
```

--------------------------------

### getSetting

Source: https://docs.zaloplatforms.com/docs/MA/api/intro

Lấy thông tin cài đặt hiện tại của người dùng.

```APIDOC
## getSetting

### Description
Lấy thông tin cài đặt hiện tại của người dùng.

### Method
getSetting

### Parameters
Không có tham số.
```

--------------------------------

### Get active camera deviceId with createCameraContext (JS/TS)

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/getSelectedDeviceId

Example for getting the deviceId of the active camera using createCameraContext. It initializes the camera context with media constraints (width 640, height 480, facingMode BACK, audio false), starts the stream, and retrieves the camera list. The selected deviceId is stored in state and displayed in a Select dropdown. The JS version uses untyped refs and imports only createCameraContext and FacingMode; the TS version adds MediaDevice and ZMACamera types.

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


const HomePage = () => {
  const cameraRef = useRef(null);
  const videoRef = useRef(null);
  const [cameraList, setCameraList] = useState([]);
  const [deviceId, setDeviceId] = useState("");
  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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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 (
                
              );
            })}
          </Select>
        </Box>
      }
    </Page>
  );
};

export default HomePage;
```

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

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

  return (
    <Page>
      <Box>
        
      </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 (
                
              );
            })}
          </Select>
        </Box>
      }
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### TypeScript example using CameraContext.getCameraList

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/getCameraList

TypeScript version of the camera list example. It includes type annotations for ZMACamera and MediaDevice, and uses the same workflow: create context, start, then getCameraList.

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

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

  return (
    <Page>
      <Box>
        
      </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 (
                
              );
            })}
          </Select>
        </Box>
      }
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Import getSetting from zmp-sdk

Source: https://docs.zaloplatforms.com/docs/MA/api/user/setting/getSetting

Nhập hàm getSetting từ SDK zmp-sdk để sử dụng trong Mini App.

```typescript
import { getSetting } from "zmp-sdk";
```

--------------------------------

### Import downloadFile from zmp-sdk

Source: https://docs.zaloplatforms.com/docs/MA/api/media/file/downloadFile

Import hàm `downloadFile` từ package `zmp-sdk` để sử dụng trong ứng dụng Zalo Mini App.

```typescript
import { downloadFile } from "zmp-sdk";
```

--------------------------------

### Create Mini App with Node.js SDK

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/apis/createMiniApp

Node.js SDK example for creating a Mini App. Uses the zmp-openapi-nodejs package and passes all fields in a single object. The returned promise resolves to an object with appId, appName, error, and message.

```javascript
import { AppCategory } from "zmp-openapi-nodejs";

const { appId, appName, error, message } = await client.createMiniApp({
  appName: "Mini App Name",
  appDescription: "Mini App Description",
  appCategory: AppCategory.ECOMMERCE,
  appLogoUrl: "https://logo-mapps.zdn.vn/default?v=2.0",
  coverUrl: "https://logo-mapps.zdn.vn/default?v=2.0",
  browsable: true,
  subCateIds: [1126, 1121],
  typeOfBusiness: "COMPANY",
  zaloAppId: "Your Zalo App Id",
});
```

--------------------------------

### CameraContext.setMirror - TypeScript example

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/setMirror

TypeScript example for using CameraContext.setMirror. It creates a camera context with createCameraContext, starts the stream, and toggles mirror mode via setMirror(true) or setMirror(false) buttons. Includes type imports for ZMACamera and MediaDevice.

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

const HomePage = () => {
  const cameraRef = useRef< ZMACamera | null >(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const [cameraList, setCameraList] = useState<MediaDevice[]>([]);

  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,
        },
      });
    }
  }, []);

  return (
    <Page>
      <Box>
        
      </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 mb={2} mt={5} flex alignContent={"center"}>
          <Text className="mb-2 mr-2">Mirror:</Text>
          <Button
            size={"small"}
            variant="primary"
            onClick={() => {
              cameraRef.current?.setMirror(true);
            }}
          >
            TRUE
          </Button>
          <Button
            size={"small"}
            variant="primary"
            onClick={() => {
              cameraRef.current?.setMirror(false);
            }}
          >
            FALSE
          </Button>
        </Box>
      </Box>
    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Create Mini App with Java SDK

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/apis/createMiniApp

Java SDK example for creating a Mini App. Sets all required and optional fields, including subCateIds as a list and zaloAppId if needed. The response contains appId, appName, error, and message.

```java
import java.util.Arrays;

import com.vng.zalo.miniapp.openapi.sdk.models.CreateMiniAppRequest;
import com.vng.zalo.miniapp.openapi.sdk.models.CreateMiniAppResponse;

CreateMiniAppRequest request = new CreateMiniAppRequest();
request.setAppName("Mini App Name");
request.setAppDescription("Mini App Description");
request.setAppCategory(AppCategory.ECOMMERCE);
request.setSubCateIds(Arrays.asList(1126, 1121));
request.setAppLogoUrl("https://logo-mapps.zdn.vn/default?v=2.0");
request.setCoverUrl("https://logo-mapps.zdn.vn/default?v=2.0");
request.setBrowsable(true);
request.setTypeOfBusiness("COMPANY");
request.setZaloAppId("Your Zalo App Id"); // if needed
CreateMiniAppResponse response = client.createMiniApp(request);
```

--------------------------------

### React example using showOAWidget

Source: https://docs.zaloplatforms.com/docs/MA/api/widgets/showOAWidget

Example of using showOAWidget in a React component. It calls the API in a useEffect hook, passing an id for the widget element, a guiding text, a color, and an onStatusChange callback that logs the new follow status. The widget is rendered in a div with the specified id.

```typescript
import React, { useEffect } from "react";
import { showOAWidget } from "zmp-sdk/apis";

function HomePage() {
  useEffect(() => {
    showOAWidget({
      id: "oaWidget",
      guidingText: "Nhận thông báo khuyến mãi mới nhất từ cửa hàng",
      color: "#0068FF",
      onStatusChange: (status) => {
        console.log(status);
      },
    });
  }, []);

  return (
    <>
      ...
      <div id="oaWidget" />
      ...
    </>
  );
}

export default HomePage;
```

--------------------------------

### Import openMiniApp from zmp-sdk

Source: https://docs.zaloplatforms.com/docs/MA/api/routing/openMiniApp

Import hàm openMiniApp từ SDK Zalo Mini App.

```typescript
import { openMiniApp } from "zmp-sdk";
```

--------------------------------

### Import openProfilePicker from zmp-sdk

Source: https://docs.zaloplatforms.com/docs/MA/api/zalo/openProfilePicker

Nhập hàm openProfilePicker từ thư viện zmp-sdk để sử dụng trong ứng dụng Zalo Mini App.

```typescript
import { openProfilePicker } from "zmp-sdk";
```

--------------------------------

### Set camera deviceId with createCameraContext (TS)

Source: https://docs.zaloplatforms.com/docs/MA/api/media/camera/cameraContext/setDeviceId

TypeScript example that creates a camera context with explicit types, starts the stream, fetches the camera list, and calls setDeviceId when the selection changes.

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

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

  return (
    <Page>
      <Box>
        
      </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));
                cameraRef.current?.setDeviceId(String(e))
              }}
            >
              {
                cameraList.map((item, index) => {
                  return (
                    
                  )
                })
              }
            </Select>
          </Box>
        )
      }

    </Page>
  );
};

export default HomePage;
```

--------------------------------

### Java: Lấy danh sách phương thức thanh toán

Source: https://docs.zaloplatforms.com/docs/MA/openApis/partner/apis/paymentChannel

Sử dụng SDK Java để gọi client.listPaymentChannels với miniAppId. Cần import ListPaymentChannelRequest và ListPaymentChannelResponse.

```java
import com.vng.zalo.miniapp.openapi.sdk.models.ListPaymentChannelRequest;
import com.vng.zalo.miniapp.openapi.sdk.models.ListPaymentChannelResponse;

ListPaymentChannelRequest request = new ListPaymentChannelRequest();
request.setMiniAppId({Your Mini App's Id});
ListPaymentChannelResponse response = client.listPaymentChannels(request);
```

--------------------------------

### CORS configuration for Node.js (Express)

Source: https://docs.zaloplatforms.com/docs/MA/intro/best-practices/call-restful-api

Configure CORS on your Node.js server to allow requests from the Zalo Mini App domain (https://h5.zdn.vn). Requires installing the 'cors' package. This example uses Express and sets the origin to the Zalo domain.

```JavaScript
// 1. Cài đặt package "cors" - https://www.npmjs.com/package/cors

// 2. Sử dụng
var express = require("express");
var cors = require("cors");
var app = express();

var corsOptions = {
  origin: "https://h5.zdn.vn"
};

app.use(cors(corsOptions));
```

--------------------------------

### Node.js: Get Mini App statistics with client.getStats

Source: https://docs.zaloplatforms.com/docs/MA/openApis/open/apis/stats

Node.js example for retrieving Mini App statistics. Constructs a StatsRequest object with miniAppId, type, startTime, endTime, and optional utmSource, then calls client.getStats(statsRequest) and destructures the response into error, message, and data.

```javascript
const statsRequest: StatsRequest = {
  miniAppId: {Your Mini App's Id},
  type: "access-traffic",
  startTime: 1700240400000,
  endTime: 1702832399999,
  utmSource: "zalo-search", // optional
};
const { error, message, data } = await client.getStats(statsRequest);
```
Tokens:
Raw