• UIKit
  • 服务端 API
Call/
UIKit/
Web/
开始集成/
UIKit
  • 概览
    • 产品介绍
    • 开通服务
    • 价格中心
      • 免费时长
      • Call 包月套餐
      • 订阅套餐时长计费说明
  • 开始集成
    • 跑通 Demo
    • 集成
      • Web&H5 (React)
      • Web&H5 (Vue3)
    • userSig 鉴权
  • 基础功能
    • Conversational Chat
      • Vue3
      • React
    • 自定义 UI
    • 设置昵称、头像
    • 群通话
    • 悬浮窗
    • 自定义铃声
    • 设置分辨率和填充模式
    • 监控通话状态
    • 设置语言
  • 高级功能
    • 虚拟背景
    • AI 降噪
    • 云端录制
  • 客户端 API
    • UIKit APIs
      • API Overview
      • TUICallKit
    • Engine APIs
      • TUICallEngine
      • TUICallEvent
  • Solution
    • WhatsApp Clone
  • 常见问题
    • 全平台
    • Web
    • 错误码
    • 发布日志
文档概览/
Call/
UIKit/
Web/
开始集成/
跑通 Demo/

跑通 Demo

本文将介绍如何快速实现音视频通话演示。您将在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/src/debug/GenerateTestUserSig-es.js




步骤三：运行 Demo

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

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

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



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



WebRTC Trtc Logo
Copyright © 2013-2025 Tencent RTC. All Rights Reserved.
  1. 隐私条款
  3. 法律
  5. Cookie政策
  7. 腾讯云

在技术社区提问

加入社群获取帮助