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

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.

Video langsung

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 dokumentasi
LivePlayer.tsx
import { LiveView } from 'tuikit-atomicx-react';

export function VideoPanel() {
  return <LiveView />;
}

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 dokumentasi

MULA SEKARANG

Tambahkan Penstriman Langsung pada Aplikasi React Anda

  1. 01

    Cipta aplikasi anda

    Aktifkan Live untuk aplikasi dan pengguna ujian anda.

    Buka Konsol Live
  2. 02

    Tambah UI Kit Penstriman Langsung React

    Ikuti panduan platform untuk menyambungkan projek anda.

    Ikuti Panduan Integrasi
  3. 03

    Sambung ke bilik pertama anda

    Log masuk sebagai penonton dan buka bilik daripada hos sedia ada.

    Konfigurasikan pengesahan
React Live UI Kit
Terminal
npm install tuikit-atomicx-react \
  @tencentcloud/uikit-base-component-react
LivePlayer.tsx
import { 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

Bincangkan aplikasi anda

Bincangkan produk, jangkaan penggunaan dan keperluan integrasi anda.

Hubungi Bahagian Jualan

Bina Pengalaman Tontonan Langsung dengan React

Hubungkan penonton anda dengan video langsung, komen dan penemuan bilik.