RECURSOS DE REACT ROOM
Salas criadas para seu app
Ciclo de vida da sala
- Crie e entre em salas
- Trate ações de saída e encerramento
Conversa ao vivo
- Conecte vídeo dos participantes
- Controle câmera e microfone
Experiência dos participantes
- Exiba membros da sala
- Reflita mudanças de estado da sala
Identidade do app
- Conecte seus IDs de usuário
- Autentique com UserSig emitido pelo servidor
Integração da plataforma
- Espaços de trabalho no navegador
- Respeite permissões nativas ou do navegador
Fluxo do seu produto
- Conecte salas à navegação
- Mantenha dados de negócio no app
Explore componentes de reunião React
Veja a experiência de sala e seu código.
Um lugar para todos
Monte a visão de reunião com o UI Kit de videoconferência React. O app fornece usuários autenticados e ID da 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>
);
}Conecte a identidade do app
Entre com ID do app, ID do usuário e UserSig emitido pelo servidor. Acesse a sala após o login bem-sucedido.
import { conference } from '@tencentcloud/roomkit-web-react';
await conference.login({ sdkAppId: SDKAppID, userId, userSig });
await conference.createAndJoinRoom({
roomId, options: { roomName: 'Design review' },
});Reúna participantes
Use um ID de sala existente para conectar usuários à mesma sessão.
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();PERSONALIZAÇÃO
Dê à sala a identidade do produto
COMECE AGORA
Dê vida à sua primeira 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>
);
}Perguntas frequentes sobre UI Kit de videoconferência React
O que inclui o UI Kit de videoconferência React?
O UI Kit de videoconferência React oferece interface pronta com entrada, vídeos e controles de participantes. O app fornece identidade e fluxos de negócio.
Como integrar o UI Kit de videoconferência React?
Como os usuários entram no UI Kit de videoconferência React?
Use SDKAppID, ID do usuário e UserSig gerado no servidor. Não inclua o segredo do app no código do navegador ou móvel. Trate falhas de autenticação antes de entrar.
Posso personalizar a experiência de reunião?
Adapte componentes e configurações documentados. O código do UI Kit nativo expõe telas e barras de ferramentas. Confira opções compatíveis no guia da plataforma.
Como funciona o preço do Room?
Isso substitui meu sistema de cursos ou trabalho?
O app continua gerindo conteúdo, permissões, pagamentos e registros de negócio. O componente de reunião adiciona comunicação em tempo real.
Como integrar o UI Kit de videoconferência React com React?
Como testar o UI Kit de videoconferência React antes de lançar o app?
Como personalizar a interface do UI Kit de videoconferência React?
Defina theme e language em UIKitProvider de @tencentcloud/uikit-base-component-react. Para mudar a disposição dos vídeos, chame conference.setFeatureConfig({ layoutTemplate: RoomLayoutTemplate.SidebarLayout }) usando RoomLayoutTemplate de tuikit-atomicx-react/room. Isso seleciona um layout compatível, sem substituir livremente todos os componentes da sala. O seletor de convites integrado usa relações de amizade do IM; quando necessário, sincronize os contatos de negócio pelas APIs de servidor documentadas.