DIBINA UNTUK REACT
UI Kit Penstriman Langsung React
Tambahkan tontonan video langsung dengan React Live Streaming UI Kit Tencent RTC. Gabungkan komponen penonton, komen khalayak dan senarai bilik langsung untuk menghasilkan pengalaman tontonan yang boleh anda sesuaikan.
SUMBER PEMBANGUN
Dokumentasi & Contoh UI Kit Penstriman Langsung React
Panduan Integrasi
Pasang UI Kit Penstriman Langsung React dan sambungkan pengguna anda.
Contoh & Sumber
Lihat produk ini beroperasi dan terokai cara pelaksanaannya.
Tonton Demo Produk dalam React
Benarkan penonton mengikuti demonstrasi produk pencipta dan menyertai perbualan. Aplikasi anda mengurus katalog dan pengalaman pembelian.
Tontonan Acara Langsung dalam React
Bawa pembentangan dan penontonnya ke dalam aplikasi React anda. Sambungkan skrin tontonan ke bilik supaya orang ramai dapat mengikuti acara langsung.
KEUPAYAAN REACT LIVE
Ciri Tontonan Video Langsung React
Tonton secara langsung
- Komponen video penstriman langsung
- Masuk dan keluar bilik
Sertai perbualan
- Komen penonton
- Komponen senarai penonton
Ketahui lebih lanjut
- Senarai bilik siaran langsung
- Navigasi aplikasi anda
Terokai Komponen Penstriman Langsung React
Gabungkan paparan video, komen penonton dan penemuan bilik dalam susun atur komponen React anda.
Utamakan detik langsung
Benamkan komponen video langsung dalam reka letak React anda dan sambungkannya kepada siaran sedia ada. Integrasi ini menyediakan pengalaman tontonan kepada penonton.
Baca dokumentasiimport { LiveView } from 'tuikit-atomicx-react';
export function VideoPanel() {
return <LiveView />;
}Libatkan penonton
Letakkan komen penonton di sebelah paparan video langsung React. Pastikan perbualan dan video disambungkan kepada bilik langsung yang sama.
Baca dokumentasiimport { BarrageList, BarrageInput } from 'tuikit-atomicx-react';
export function Comments() {
return <><BarrageList /><BarrageInput /></>;
}Bantu penonton mencari kandungan yang sedang bersiaran langsung
Sambungkan penemuan bilik kepada halaman tontonan dalam aplikasi anda.
Baca dokumentasiimport { LiveList } from 'tuikit-atomicx-react';
<LiveList
columnCount={3}
onLiveRoomClick={openLiveRoom}
/>PENYESUAIAN
Sesuaikan React Live UI Kit Anda
Susun video, interaksi penonton dan navigasi di sekitar pengalaman langsung dalam aplikasi React anda.
Identiti visual anda
Laraskan persembahan visual menggunakan pilihan penyesuaian yang tersedia pada platform anda.
Baca dokumentasiKomen & kandungan
Gabungkan bahagian pengalaman langsung yang penting kepada penonton anda.
Baca dokumentasiMULA SEKARANG
Tambahkan Penstriman Langsung pada Aplikasi React Anda
- 01
- 02
Tambah UI Kit Penstriman Langsung React
Ikuti panduan platform untuk menyambungkan projek anda.
Ikuti Panduan Integrasi - 03
Sambung ke bilik pertama anda
Log masuk sebagai penonton dan buka bilik daripada hos sedia ada.
Konfigurasikan pengesahan
npm install tuikit-atomicx-react \
@tencentcloud/uikit-base-component-reactimport { useLoginState } from 'tuikit-atomicx-react';
const { login } = useLoginState();
await login({ SDKAppID, userID, userSig });Soalan Lazim UI Kit Penstriman Langsung React
Bolehkah saya membina halaman penyiaran hos dalam React?
React Live Streaming UI Kit kini menyokong tontonan khalayak dan senarai bilik langsung. Penstriman hos React ditandakan sebagai akan datang; gunakan pelaksanaan hos Vue apabila anda memerlukan antara muka penyiaran web yang sedia ada.
Bagaimanakah UI Kit ini berfungsi bersama SDK?
UI Kit menyediakan komponen antara muka di atas perkhidmatan asas. Pilih SDK apabila anda memerlukan lebih banyak kawalan ke atas UI aplikasi anda sendiri.
Bagaimanakah cara menyambungkan paparan tontonan langsung React kepada siaran?
Dayakan perkhidmatan Live, sahkan penonton dan sertai bilik yang dicipta oleh hos. Gunakan akaun berasingan untuk menguji skrin penonton React dan ikuti panduan platform untuk membuat konfigurasi.
Bagaimanakah saya mengesahkan pengguna React Live Streaming UI Kit?
Cipta UserSig pada pelayan anda dan hantarkannya kepada klien selepas aliran log masuk anda sendiri selesai. Sentiasa simpan rahsia aplikasi pada pelayan anda.
Adakah UI Kit Penstriman Langsung React percuma untuk digunakan?
Antara muka dan perkhidmatan Live yang dihoskan mempunyai peranan yang berbeza. Aktifkan perkhidmatan untuk aplikasi anda dan semak pelan semasa, ketersediaan ciri serta caj penggunaan.
Bagaimanakah saya mengintegrasikan UI Kit Penstriman Langsung React dengan React?
Mulakan provider yang didokumenkan dan gabungkan komponen yang tersambung. Selaraskan langganan dan pembersihan dengan kitar hayat React, kemudian uji navigasi serta pemasangan berulang dalam aplikasi sebenar anda.
Bagaimanakah saya menguji UI Kit Penstriman Langsung React sebelum melancarkan aplikasi saya?
Uji peranan hos dan penonton, acara penerbitan atau main balik disokong serta sambungan semula.
Bagaimanakah saya menyesuaikan antara muka UI Kit Penstriman Langsung React?
Bungkus komponen penonton React dalam UIKitProvider untuk memilih tema cerah atau gelap. Contohnya, paparkan LiveList dengan columnCount={5} dan pengendali onLiveRoomClick yang membuka laluan penonton anda. Pengendali itu mesti menyambungkan bilik yang dipilih kepada aliran tontonan; menukar bilangan lajur senarai sahaja tidak menyertai siaran. Integrasi React pada halaman ini membina pengalaman tontonan, manakala penyiaran dikendalikan oleh integrasi hos yang berasingan.
Sokongan integrasi untuk React Live
Soalan integrasi
Dapatkan bantuan persediaan untuk UI Kit Penstriman Langsung React.
Lihat Dokumentasi PembangunBincangkan aplikasi anda
Bincangkan produk, jangkaan penggunaan dan keperluan integrasi anda.
Hubungi Bahagian JualanBina Pengalaman Tontonan Langsung dengan React
Hubungkan penonton anda dengan video langsung, komen dan penemuan bilik.

