Call
  • Web
    • Overview
      • Product Introduction
      • Activate the Service
      • 价格中心
        • 免费时长
        • Call 包月套餐
        • 订阅套餐时长计费说明
    • Get Started
      • Run Sample Code
      • Integration (React)
      • Integration (Vue3)
      • Secure authentication with userSig
    • Basic Features
      • UI Customization
      • Configuring Nickname and Avatar
      • GroupCall
      • 悬浮窗
      • 自定义铃声
      • 设置分辨率和填充模式
      • 监控通话状态
    • Advanced Features
      • 虚拟背景
      • AI 降噪
      • 云端录制
    • 客户端 API
      • UIKit APIs
        • API Overview
        • TUICallKit
      • Engine APIs
        • TUICallEngine
        • TUICallEvent
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FAQs
      • All Platfroms
      • Web
      • ErrorCode
      • 发布说明
  • Android
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • 跑通 Demo
      • 集成
      • Secure authentication with userSig
    • Basic Features
      • UI 定制
      • 离线通话推送
      • Configuring Nicknames and Avatars
      • 群组通话
      • 悬浮窗
      • 自定义铃声
      • 监控通话状态
    • 更多功能
      • 虚拟背景
      • AI 降噪
      • 云端录制
    • 客户端 API
      • UIKit APIs
        • 接口概述
        • TUICallKit
        • TUICallObserver
        • 类型定义
      • Engine APIs
        • TUICallEngine
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FAQs
      • All Platforms
      • Android
      • ErrorCode
      • 发布说明
  • iOS
    • Overview
      • Product Introduction
      • Activate the Service
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • 跑通 Demo
      • 集成
      • Secure authentication with userSig
    • Basic Features
      • UI 定制
      • 离线通话推送
        • VoIP
        • APN
      • 设置昵称和头像
      • 群组通话
      • 悬浮窗
      • 自定义铃声
      • 监控通话状态
    • 更多功能
      • 虚拟背景
      • AI 降噪
      • 云端录制
    • 客户端 API
      • UIKit APIs
        • 接口概述
        • TUICallKit
        • TUICallObserver
        • 类型定义
      • Engine APIs
        • TUICallEngine
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FQAs
      • All Platform
      • iOS
      • ErrorCode
      • 发布说明
  • Flutter
    • Overview
      • 产品概述
      • 开通服务
      • Pricing
        • Free Minutes
        • Call Monthly Packages
        • Billing Explanation for Subscription Package Duration
    • Get Started
      • 跑通 Demo
      • 集成
      • Secure authentication with userSig
    • Basic Features
      • UI 定制
      • 离线通话推送
        • 通知
        • VoIP(可选)
      • 设置昵称和头像
      • 群组通话
      • 悬浮窗
      • 自定义铃声
      • 监控通话状态
    • 更多功能
      • 虚拟背景
      • AI 降噪
      • 云端录制
      • 美颜特效
    • 客户端 API
      • 接口概述
      • TUICallKit
      • TUICallEngine
      • TUICallObserver
      • 类型定义
    • 服务端 API
      • 通话状态回调
        • 通话状态回调
        • 通话事件回调
        • 回调配置
          • 回调配置接口列表
          • 创建回调配置
          • 查询回调配置
          • 更新回调配置
          • 删除回调配置
      • REST 接口
        • REST 接口简介
        • 通过 callId 获取记录
        • 通过条件获取记录
    • FQAs
      • All Platform
      • Flutter
      • ErrorCode
      • 升级
      • 发布说明
Call

Run Sample Code

本文将介绍如何快速实现音视频通话演示。您将在10分钟内完成以下关键步骤,并最终获得一个具有全面用户界面的视频通话功能。




环境准备

Node.js version 16+.
Modern browser, supporting WebRTC API.

步骤一:下载 Demo

1. 打开终端,克隆仓库。
2. 安装依赖。
React
Vue3
cd ./TUICallKit/Web/basic-react
cd ./TUICallKit/Web/basic-vue3
npm install

步骤二:配置 Demo

进入开通服务页面 获取SDKAppID、SDKSecretKey,在 GenerateTestUserSig-es.js 文件填写。
React
Vue3
文件路径:TUICallKit/Web/basic-react/src/debug/GenerateTestUserSig-es.js



文件路径:TUICallKit/Web/basic-vue3/public/debug/GenerateTestUserSig-es.js




步骤三:运行 Demo

打开终端,复制示例命令运行 Demo。
TUICallKit/Web/basic-react
TUICallKit/Web/basic-vue3
npm run dev
npm run serve
警告:
本地环境请在 localhost 协议下访问,公网体验请在 HTTPS 协议下访问,具体参见 网络访问协议说明

步骤四:拨打您的第一通电话

1. 打开浏览器页面,输入项目运行地址,登录 userID(由您定义) 。



2. 输入被叫方的 userID, 单击 Call 体验您的第一通话。