腾讯云实时音视频Web（React）_音视频解决方案_同尘科技

本文将介绍如何快速完成 TUICallKit 组件的接入，您将在一小时内完成以下几个关键步骤，并最终得到一个包含完备 UI 界面的视频通话功能。桌面端移动端

视频通话	语音通话
	



单人通话	群组通话
	



TUICallKit Demo 体验

如果您想要直接体验音视频通话，进入 Demo 体验页面。如果您想要直接跑通一个新工程，请直接阅读 Web Demo 快速跑通。如果您想要亲自集成 TUICallKit 组件，搭建一个音视频通话页面，请跟随本文档。

开发环境要求

React ≥ v18.0。node（12.13.0 ≤ node 版本, 推荐使用 Node.js 官方 LTS 版本 16.17.0）。npm（版本请与 node 版本匹配）。

TUICallKit NPM 集成

步骤一：创建项目

1. 创建一个新的 React 项目，您可自行选择是否需要使用 ts 模板。

npx create-react-app callkit-demo --template typescript

2. 创建项目完成后，切换到项目所在目录。

cd callkit-demo

步骤二：下载 call-uikit-react 组件

1. 通过 npm 方式下载 call-uikit-react 并在项目中使用。

npm install @tencentcloud/call-uikit-react

2. 将 debug 目录复制到您的项目。MacOS 端Windows 端

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

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

步骤三：引入 call-uikit-react 组件

替换App.tsx中的内容，或者您可以新建一个组件引入。注意以下代码中未填入 SDKAppID 和 SecretKey，需在 步骤四 中获取相关信息后进行替换。

import React, { useState, useMemo } from "react";// @ts-ignoreimport { TUICallKit, TUICallKitServer, TUIGlobal } from "@tencentcloud/call-uikit-react";import * as GenerateTestUserSig from "./debug/GenerateTestUserSig-es";
function App() {  const [userData, setUserData] = useState({    userId: "",    callUserId: "",    SDKAppID: 0,     // Replace with your SDKAppID    SecretKey: "",   // Replace with your SecretKey    isLogin: false,  });  const init = async () => {    const { SDKAppID, SecretKey, userId } = userData;    if (SDKAppID && SecretKey && userId) {      try {        await login(SDKAppID, SecretKey, userId);        setUserData((prevState) => ({          ...prevState,          isLogin: true as boolean,        }));        alert("[TUICallKit] login success.");      } catch (error) {        console.error(error);        alert("[TUICallKit] login failed.");      }    } else {      alert("[TUICallKit] Please fill in the SDKAppID, userId, callUserId, and SecretKey.");    }  };  const login = async (SDKAppID: any, SecretKey: any, userId: any) => {    const { userSig } = GenerateTestUserSig.genTestUserSig({      userID: userId,      SDKAppID: Number(SDKAppID),      SecretKey: SecretKey,    });    await TUICallKitServer.init({      userID: userId,      userSig,      SDKAppID: Number(SDKAppID),    });  };  const call = async () => {    await TUICallKitServer.call({ userID: userData.callUserId, type: 2 });  };  const callkitStyle = useMemo(() => {    if (TUIGlobal.isPC) {      return { width: '960px', height: '630px', margin: '0 auto' };    }    return { width: '100%', height: window.innerHeight };  }, [TUIGlobal.isPC]);
  return (                
        
{userData.isLogin ? "call Panel" : "Debug Panel"} 
         {            const key = userData.isLogin ? "callUserId" : "userId";            setUserData((prevState) => ({              ...prevState,              [key]: value.target.value,            }));          }}          placeholder={            userData.isLogin ? "Please enter userId of the call" : "Please enter the login user userId"          }        />        {userData.isLogin ? "call" : "login"}      
      );}
export default App;

步骤四：获取 SDKAppID、SecreKey

1. 登录到 即时通信 IM 控制台，单击创建新应用，在弹出的对话框中输入您的应用名称，并单击确定。 2. 单击创建的应用，进入基本配置页面，获取 SDKAppID、SecretKey。3. 在基本配置页面，单击免费体验即可开通 TUICallKit 的 7 天免费试用服务。4. 如果需要正式应用上线，可以单击 购买正式版 即可进入购买页面。
SDKAppID：在腾讯云创建的音视频应用 SDKAppID，参考 步骤四：获取SDKAppID、SecretKey。userSig：用户签名，参考 步骤五：获取 userSig；每个 userID 对应一个唯一的 userSig。。userID：主叫的 userID，字符串类型，只允许包含英文字母（a-z 和 A-Z）、数字（0-9）、连词符（-）和下划线（_）。callUserID：被叫的 userID，需要已初始化存在。(demo 中的 callUserID，当有被叫时输入，无被叫可以不输入。)

步骤五：拨打您的第一通电话

1. 在终端输 npm run start 运行 callkit-demo。警告：本地环境请在 localhost 协议下访问，具体参考 网络访问协议说明。

npm run start

2. 输入登录的 userId，点击登录按钮，弹出 login success 表示初始化成功。
3. 输入呼叫者的 userId，点击呼叫 发起 1v1 视频通话。

TUICallKit 更多特性

设置昵称、头像

说明：≥ v2.2.0 支持。如果您需要设置当前用户的昵称或头像，可以使用如下接口进行更新：

try {  await TUICallKitServer.setSelfInfo({ nickName: "jack", avatar: "http://xxx" });} catch (error: any) {  alert(`[TUICallKit] Failed to call the setSelfInfo API. Reason: ${error}`);}

自定义来电铃声

说明：≥ v3.0.0 支持。自定义用户的来电铃音。仅限传入本地 MP3 格式的文件地址，需要确保该文件目录是应用可以访问的。铃声媒体文件必须放在public目录下引入。

try {  await TUICallKitServer.setCallingBell(filePath?: string)} catch (error: any) {  alert(`[TUICallKit] Failed to call the setCallingBell API. Reason: ${error}`);}

群组通话

如果您需要实现群组（即多人）音视频通话，可以通过如下接口进行设置：

TUICallKitServer.groupCall({    userIDList: ["jane", "mike", "tommy"],    type: 1,    // 1-语音通话 2-视频通话    groupID: "12345678"});

悬浮窗

通过allowedMinimized属性可以控制悬浮窗（最小化）的开启。通过allowedFullScreen属性可以控制通话窗口全屏的开启。

通话 UI 设置

TUICallKit 组件提供了若干个功能开关，可以根据需要选择开启或关闭，具体参考 TUICallKit 属性介绍。allowedMinimized：是否允许最小化。allowedFullScreen：是否允许全屏。videoDisplayMode：画面显示模式。videoResolution：通话分辨率。

通话状态回调事件

TUICallKit 组件提供了通话状态回调，可以用于业务侧实现更多交互逻辑，具体参考 TUICallKit 属性介绍。beforeCalling：通话开始前会执行。afterCalling：通话完成后执行。onMinimized：组件切换最小化后会执行。kickedOut：该用户被移除（如重复登录），通话自动结束时执行。（≥v2.3.2 支持）statusChanged：通话状态发生变化时执行，status 种类参考 API 文档。（≥v2.3.2 支持）

 <TUICallKit     :beforeCalling="beforeCalling"     :afterCalling="afterCalling"     :onMinimized="onMinimized"    :kickedOut="kickedOut"     :statusChanged="statusChanged"  />

TUICallKit API 文档

TUICallKit API 文档TUICallEngine API 文档TUICallKit (Web) 常见问题

常见问题

1. 错误提示“The package you purchased does not support this ability”？

由于您当前应用的音视频通话能力包过期或未开通，请参见 开通服务，领取或者开通音视频通话能力，进而继续使用 TUICallKit 组件。

2. 如何购买套餐？

请参考购买链接 音视频通话 SDK 价格总览，如有其他问题，请点击页面右侧，进行售前套餐咨询，或 进入 IM 社群 进行咨询和反馈。

3. 如何生成 UserSig？

UserSig 是腾讯云为其云服务设计的一种安全保护签名，是一种登录凭证，由 SDKAppID 与 SecretKey 等信息组合加密得到。方式一：控制台获取，参考 获取临时 userSig。方式二：部署临时生成脚本。警告：此方式是在前端代码中配置 SecretKey，该方法中 SecretKey 很容易被反编译逆向破解，一旦您的密钥泄露，攻击者就可以盗用您的腾讯云流量，因此该方法仅适合本地跑通功能调试，生产环境请看方式三。为方便初期调试，userSig 可临时使用GenerateTestUserSig-es.js中genTestUserSig(params)函数来计算 ，例如：

import { genTestUserSig } from "@tencentcloud/call-uikit-vue/debug/GenerateTestUserSig-es.js";const { userSig } = genTestUserSig({ userID: "Alice", SDKAppID: 0, SecretKey: "YOUT_SECRETKEY" });

方式三：正式环境使用。正确的 UserSig 签发方式是将 UserSig 的计算代码集成到您的服务端，并提供面向项目的接口，在需要 UserSig 时由您的项目向业务服务器发起请求获取动态 UserSig。更多详情请参见 服务端生成 UserSig。

4. 如何创建 userID？

通过 userID 与 userSig 登录过一次，会默认创建该用户。通过 即时通信 IM 控制台 进行创建和获取，单击目标应用卡片，进入应用的账号管理页面，也可创建账号并获取 userID。


对音视频的解决方案有疑惑？想了解解决方案收费？ 联系解决方案专家

腾讯云限时活动1折起，即将结束： 马上收藏

同尘科技为腾讯云授权服务中心，购买腾讯云享受折上折，更有现金返利:同意关联，立享优惠

阿里云解决方案也看看？： 点击对比阿里云的解决方案