ĐƯỢC XÂY DỰNG CHO REACT

UI Kit gọi video cho React

Thêm cuộc gọi trong ứng dụng bằng React Video Calling UI Kit của Tencent RTC. Nhúng TUICallKit, kết nối người dùng và điều chỉnh màn hình cuộc gọi cùng cửa sổ nổi cho phù hợp với ứng dụng React của bạn.

TÀI NGUYÊN DÀNH CHO NHÀ PHÁT TRIỂN

Tài liệu & Ví dụ về UI Kit gọi video cho React

Cuộc gọi video 1-1 trong React

Đưa trải nghiệm trò chuyện trực tiếp vào ứng dụng React để kết nối cá nhân hoặc tư vấn, với video và các nút điều khiển cuộc gọi trong cùng một giao diện.

Cuộc gọi video nhóm trong React

Kết nối nhiều người tham gia trong thành phần cuộc gọi React. Sử dụng hướng dẫn dành cho nền tảng để định cấu hình luồng cuộc gọi và bố cục nhóm được hỗ trợ.

TÍNH NĂNG REACT CALL

Tính năng gọi video trên React

Kết nối mọi người

  • Cuộc gọi thoại và video
  • Xử lý cuộc gọi đến

Luôn nắm quyền kiểm soát

  • Nút điều khiển camera và micrô
  • Sự kiện vòng đời cuộc gọi

Biến nó thành của bạn

  • Luồng ứng dụng của bạn
  • Tích hợp theo từng nền tảng

Khám phá các thành phần gọi video React

Kết nối TUICallKit với bố cục thành phần của bạn, sau đó bắt đầu cuộc gọi thông qua các thao tác trong ứng dụng.

Giao diện cuộc gọi

Nhúng giao diện cuộc gọi React

Gắn TUICallKit vào bố cục thành phần và khởi tạo bằng người dùng đã xác thực. Thành phần này cung cấp giao diện và các nút điều khiển cuộc gọi.

Đọc tài liệu
App.tsx
import { TUICallKit } from '@trtc/calls-uikit-react';

export function CallView() {
  return <TUICallKit />;
}

TÙY CHỈNH

Tùy chỉnh React Call UI Kit

Điều chỉnh thành phần cuộc gọi React, các nút điều khiển và luồng cuộc gọi đến cho phù hợp với sản phẩm của bạn.

Bố cục và điều khiển

Điều chỉnh trải nghiệm cuộc gọi bằng các tùy chọn tùy chỉnh trong hướng dẫn nền tảng.

Đọc tài liệu

BẮT ĐẦU

Thêm tính năng gọi video vào ứng dụng React

  1. 01

    Tạo ứng dụng của bạn

    Bật Call cho ứng dụng và người dùng thử nghiệm.

    Mở bảng điều khiển Call
  2. 02

    Thêm UI Kit gọi video cho React

    Làm theo hướng dẫn nền tảng để kết nối dự án của bạn.

    Làm theo Hướng dẫn tích hợp
  3. 03

    Thực hiện cuộc gọi đầu tiên của bạn

    Đăng nhập bằng hai người dùng thử nghiệm, sau đó thực hiện và trả lời cuộc gọi.

    Thiết lập xác thực
React Call UI Kit
Terminal
npm install @trtc/calls-uikit-react
App.tsx
import { TUICallKitAPI } from '@trtc/calls-uikit-react';

await TUICallKitAPI.init({ SDKAppID, userID, userSig });

Câu hỏi thường gặp về UI Kit gọi video cho React

React Video Calling UI Kit bao gồm những gì?

React Video Calling UI Kit cung cấp các màn hình TUICallKit và nút điều khiển cuộc gọi. Hãy kết nối bộ công cụ này với danh tính người dùng và bố cục thành phần của bạn; dịch vụ Call sẽ kết nối những người tham gia.

Tôi nên sử dụng SDK gọi điện React hay UI Kit?

UI Kit cung cấp các thành phần giao diện trên nền dịch vụ cốt lõi. Hãy chọn SDK khi bạn cần kiểm soát nhiều hơn đối với UI của ứng dụng.

Gọi video bằng React trên trình duyệt cần những gì?

Khởi tạo TUICallKit cho người dùng đã xác thực và được bật dịch vụ Call. Sử dụng HTTPS hoặc localhost, đồng thời xử lý quyền truy cập camera, micrô và phát nội dung trên trình duyệt.

Làm cách nào để xác thực người dùng của UI Kit gọi video React?

Tạo UserSig trên máy chủ và chuyển cho máy khách sau khi quy trình đăng nhập của riêng bạn hoàn tất. Luôn lưu bí mật của ứng dụng trên máy chủ.

UI Kit gọi video React có được sử dụng miễn phí không?

Giao diện và dịch vụ Call được lưu trữ đảm nhiệm những vai trò khác nhau. Hãy kích hoạt dịch vụ cho ứng dụng và xem lại gói hiện tại, khả năng cung cấp tính năng cùng phí sử dụng.

Làm thế nào để tích hợp UI Kit gọi video React với React?

Khởi tạo provider theo tài liệu và kết hợp các thành phần đã kết nối. Đồng bộ đăng ký sự kiện và dọn dẹp với vòng đời React, rồi kiểm thử điều hướng và mount lặp lại trong ứng dụng thực tế.

Làm thế nào để kiểm thử UI Kit gọi video React trước khi phát hành ứng dụng?

Kiểm thử trạng thái mời, chấp nhận, từ chối và kết thúc cuộc gọi giữa các người dùng độc lập, gồm cả trường hợp từ chối quyền.

Làm thế nào để tùy chỉnh giao diện UI Kit gọi video React?

Dùng TUICallKitAPI từ @trtc/calls-uikit-react để thực hiện các thay đổi điều khiển được hỗ trợ. Ví dụ, hideFeatureButton(FeatureButton.Camera) ẩn nút camera, còn setLayoutMode(LayoutMode.LocalInLargeView) đưa video cục bộ vào khung lớn. Thiết lập bố cục này chỉ áp dụng cho cuộc gọi video một đối một. Với giao diện hoàn toàn khác, hãy xây dựng dựa trên TUICallEngine và đừng giả định rằng mọi thành phần hiển thị nội bộ đều có prop React để thay thế.

Hỗ trợ tích hợp React Call

Trao đổi về ứng dụng của bạn

Trao đổi về sản phẩm, mức sử dụng dự kiến và nhu cầu tích hợp của bạn.

Liên hệ bộ phận kinh doanh

Đưa tính năng gọi video vào ứng dụng React

Bắt đầu với React Video Calling UI Kit, kết nối hai người dùng thử nghiệm và tạo cuộc gọi đầu tiên.