@tencentcloud/call-uikit-react-native NPM

TUICallKit is a UIKit component for audio and video calls.

NPM verison

Introduction

TUICallKit is a UIKit component for audio and video calls developed by Tencent Cloud. By integrating this component, you can easily add video calling functionality to your app with just a few lines of code.

Online Demo
TUICallKit Github Demo
We offer TUICallKit for Web, Android, iOS, MiniProgram, Flutter, explore more in trtc.io.

Install

yarn add @tencentcloud/call-uikit-react-native

Activate Service

copy the debug directory to your project directory src/debug, it is necessary when generating userSig locally.

# macOS
cp -r node_modules/@tencentcloud/call-uikit-react-native/src/debug ./src

# windows
xcopy node_modules\@tencentcloud\call-uikit-react\src\debug .\src\debug /i /e

Go to the Activate Service page and get the SDKAppID and SDKSecretKey, then fill them in the GenerateTestUserSig-es.js file.

Usage

import { TUICallKit, MediaType, TUICallEvent } from "@tencentcloud/call-uikit-react-native";
import { genTestUserSig } from '../../debug/GenerateTestUserSig-es';

TUICallKit.login

const handleLogin = () => {
  const userID = 'Alice'
  const { SDKAppID, userSig } = genTestUserSig({ userID });

  TUICallKit.login(
    {
      sdkAppId: SDKAppID,
      userId: userID,
      userSig,
    },
    (res) => {
      console.log('login success', res);
    },
    (errCode, errMsg) => {
      console.log('login error', errCode, errMsg);
    }
  );
};

TUICallKit.call

const call = () => {
  TUICallKit.call(
    {
      userId: 'denny',
      mediaType: MediaType.Video,
    },
    () => {
      console.log('call success');
    },
    () => {
      console.log('call error');
    }
  );
};

TUICallKit.groupCall

const groupCall = () => {
  TUICallKit.groupCall(
    {
      userIdList: ['mike', 'denny'],
      mediaType: MediaType.Video,
      groupId: 'xxx',
    },
    (res) => {
      console.log('groupCall success', res);
    },
    (errCode, errMsg) => {
      console.log('groupCall error', errCode, errMsg);
    }
  );
};