ĐƯỢ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
Ví dụ & mã nguồn
Xem sản phẩm hoạt động thực tế và khám phá cách triển khai.
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.
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ệuimport { TUICallKit } from '@trtc/calls-uikit-react';
export function CallView() {
return <TUICallKit />;
}Bắt đầu cuộc gọi video trên React
Truyền ID người nhận từ ứng dụng của bạn đến API cuộc gọi. Kết nối thao tác này với một liên hệ, cuộc trò chuyện hoặc nút gọi trong giao diện React.
Đọc tài liệuimport { TUICallKitAPI, CallMediaType } from
'@trtc/calls-uikit-react';
await TUICallKitAPI.calls({
userIDList: [recipientID],
type: CallMediaType.VIDEO,
});Cửa sổ nổi
Giữ cuộc trò chuyện luôn hiển thị khi người dùng di chuyển trong ứng dụng.
Đọc tài liệuTUICallKitAPI.enableFloatWindow(true);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ệuNhạc chuông và danh tính
Giúp người dùng dễ nhận biết cuộc gọi đến bằng hồ sơ người dùng và nhạc chuông tùy chỉnh.
Đọc tài liệuBẮT ĐẦU
Thêm tính năng gọi video vào ứng dụng React
- 01
- 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 - 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
npm install @trtc/calls-uikit-reactimport { 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
Câu hỏi về tích hợp
Nhận hỗ trợ thiết lập UI Kit gọi video cho React.
Xem tài liệu dành cho nhà phát triểnTrao đổ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.

