CAPACIDADES DE REACT ROOM
Salas creadas para tu app
Ciclo de vida de la sala
- Crea y únete a salas
- Gestiona salidas y finalizaciones
Conversación en directo
- Conecta el vídeo de participantes
- Controla cámara y micrófono
Experiencia de participantes
- Muestra miembros de la sala
- Refleja cambios de estado de la sala
Identidad de la app
- Conecta tus IDs de usuario
- Autentica con UserSig emitido por el servidor
Integración de plataforma
- Espacios de trabajo del navegador
- Respeta permisos nativos o del navegador
Flujo de tu producto
- Conecta salas a tu navegación
- Mantén datos empresariales en tu app
Explora componentes de reunión React
Descubre la experiencia de sala y su código.
Un lugar para todos
Monta la vista de reunión con el UI Kit de videoconferencia React. Tu app proporciona usuarios autenticados e ID de sala.
import { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}Conecta la identidad de tu app
Inicia sesión con ID de app, ID de usuario y UserSig emitido por el servidor. Entra en la sala tras iniciar sesión correctamente.
import { conference } from '@tencentcloud/roomkit-web-react';
await conference.login({ sdkAppId: SDKAppID, userId, userSig });
await conference.createAndJoinRoom({
roomId, options: { roomName: 'Design review' },
});Reúne a los participantes
Usa un ID de sala existente para reunir usuarios en la misma sesión.
import { conference } from '@tencentcloud/roomkit-web-react';
// After login, join an existing room.
await conference.joinRoom({ roomId });
// Leave without ending the room for everyone.
await conference.leaveRoom();PERSONALIZACIÓN
Dale a la sala la identidad de tu producto
COMENZAR
Pon en marcha tu primera sala
- 01
- 02
- 03
npm install @tencentcloud/roomkit-web-react tuikit-atomicx-react @tencentcloud/uikit-base-component-react @tencentcloud/universal-apiimport { UIKitProvider } from '@tencentcloud/uikit-base-component-react';
import { ConferenceMainView } from '@tencentcloud/roomkit-web-react';
export default function App() {
return (
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
);
}Preguntas frecuentes sobre UI Kit de videoconferencia React
¿Qué incluye el UI Kit de videoconferencia React?
El UI Kit de videoconferencia React ofrece interfaz lista con entrada, vistas de vídeo y controles de participantes. Tu app aporta identidad y flujos empresariales.
¿Cómo integro el UI Kit de videoconferencia React?
¿Cómo inician sesión los usuarios en el UI Kit de videoconferencia React?
Usa SDKAppID, ID de usuario y UserSig generado en el servidor. Mantén el secreto de app fuera del código web y móvil. Gestiona fallos de autenticación antes de entrar.
¿Puedo personalizar la experiencia de reunión?
Adapta componentes y configuraciones documentados. El código de UI Kit nativo expone vistas y barras de herramientas. Revisa opciones compatibles en la guía de plataforma.
¿Cómo se cobra Room?
¿Sustituye mi sistema de cursos o trabajo?
Tu app sigue gestionando cursos, permisos, pagos y registros empresariales. El componente de reunión añade comunicación en tiempo real.
¿Cómo integro el UI Kit de videoconferencia React con React?
¿Cómo pruebo el UI Kit de videoconferencia React antes de lanzar mi app?
¿Cómo personalizo la interfaz del UI Kit de videoconferencia React?
Configura theme y language en UIKitProvider de @tencentcloud/uikit-base-component-react. Para cambiar la distribución del vídeo, llama a conference.setFeatureConfig({ layoutTemplate: RoomLayoutTemplate.SidebarLayout }) con RoomLayoutTemplate de tuikit-atomicx-react/room. Esto selecciona un diseño compatible, sin permitir sustituir libremente todos los componentes de la sala. El selector de invitaciones integrado utiliza las relaciones de amistad de IM; sincroniza los contactos de negocio mediante las API de servidor documentadas cuando sea necesario.