videosdk rtc react sdk example
1.0.0
No Video SDK, estamos construindo ferramentas para ajudar as empresas a criar produtos colaborativos de classe mundial com recursos para áudio/vídeo ao vivo, gravações em nuvem, streaming RTMP/HLS e APIs de interação.
Curioso para vê-lo em ação? Confira nossa demonstração ao vivo aqui.
Siga estas etapas para colocar o aplicativo de exemplo em funcionamento:
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.gitAbra seu editor de código favorito e copie o arquivo de ambiente de exemplo:
cp .env.example .env.env Gere um token temporário da sua conta do SDK de vídeo e atualize o arquivo .env :
REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "Instale os pacotes necessários:
npm installBingo, é hora de apertar o botão de lançamento.
npm run startDesbloqueie um conjunto de recursos poderosos para aprimorar suas reuniões:
| Recurso | Documentação | Descrição |
|---|---|---|
| ? Configuração de pré-chamada | Configurar pré-chamada | Configure dispositivos de áudio, vídeo e outras configurações antes de entrar na reunião. |
| ⏳ Lobby de espera | Sala de espera | Espaço virtual para os participantes aguardarem antes de ingressar na reunião. |
| ? Participar da reunião | Participar da reunião | Permite que os participantes participem de uma reunião. |
| ? Sair da reunião | Sair da reunião | Permite que os participantes saiam de uma reunião. |
| ? Alternar microfone | Controle de microfone | Ative ou desative o microfone durante uma reunião. |
| ? Alternar câmera | Controle da câmera | Ligue ou desligue a câmera de vídeo durante uma reunião. |
| Compartilhamento de tela | Compartilhamento de tela | Compartilhe sua tela com outros participantes durante a chamada. |
| ? Captura de imagem | Capturador de imagens | Capture imagens de outros participantes a partir de seu stream de vídeo, particularmente útil para cenários de vídeo KYC e verificação de identidade. |
| ? Alterar dispositivo de entrada | Alternar dispositivos de entrada | Alterne entre diferentes dispositivos de entrada de áudio e vídeo. |
| ? Alterar saída de áudio | Alternar saída de áudio | Selecione um dispositivo de saída para áudio durante uma reunião. |
| Otimizar trilhas | Otimização de rastreamento | Melhore a qualidade e o desempenho das faixas de mídia. |
| Bater papo | Bate-papo na reunião | Troque mensagens com os participantes por meio de um mecanismo Publish-Subscribe. |
| Quadro branco | Quadro branco | Colabore visualmente desenhando e anotando em um quadro branco compartilhado. |
| ? Compartilhamento de arquivos | Compartilhamento de arquivos | Compartilhe arquivos com os participantes durante a reunião. |
| ? Gravação | Gravação | Grave a reunião para referência futura. |
| ? Transmissão ao vivo RTMP | Transmissão ao vivo RTMP | Transmita a reunião ao vivo para plataformas como YouTube ou Facebook. |
| Transcrição em tempo real | Transcrição em tempo real | Gere transcrições da reunião em tempo real. |
| ? Alternar mídia remota | Controle remoto de mídia | Controle o microfone ou a câmera dos participantes remotos. |
| Silenciar todos os participantes | Silenciar tudo | Silenciar todos os participantes simultaneamente durante a chamada. |
| ?️ Remover participante | Remover participante | Ejetar um participante da reunião. |
Entenda os principais componentes do nosso SDK:
Meeting - Uma reunião representa comunicação de áudio e vídeo em tempo real.
Note: Don't confuse the terms Room and Meeting; both mean the same thing ?
Sessions - Uma duração específica que você gasta em uma determinada reunião é chamada de sessão. Você pode ter várias sessões de um ID de reunião específico.
Participant - Um participante refere-se a qualquer pessoa que esteja participando da sessão da reunião. O local participant representa você mesmo (Você), enquanto todos os outros participantes são considerados remote participants .
Stream — Um fluxo refere-se ao conteúdo de mídia de vídeo ou áudio publicado pelo local participant ou remote participants .
O token é usado para criar e validar uma reunião usando API e também inicializar uma reunião.
Development Environment :
Production Environment :
componentes/DropDown.js : um componente suspenso para selecionar dispositivos de entrada de áudio (microfones), monitorar áudio por meio da API de áudio da Web e gerenciar configurações de microfone.
componentes/DropDownCam.js : um componente suspenso para selecionar dispositivos de câmera e gerenciar permissões de câmera.
componentes/DropDownSpeaker.js : permite que os usuários selecionem alto-falantes, testem-nos com sons de amostra e acompanhem o progresso da reprodução para confirmação.
componentes/NetworkStats.js : exibe estatísticas de rede em tempo real, como velocidades de upload e download.
components/screens/JoiningScreen.js : oferece aos usuários a opção de criar ou participar de uma reunião, gerenciar o status da webcam e do microfone, selecionar dispositivos (microfone, câmera, alto-falantes), verificar permissões, visualizar vídeo e monitorar estatísticas de rede para garantir a configuração adequada antes entrando na reunião.
api.js : inclui todas as chamadas de API para criação e validação de reuniões.
components/MeetingDetailsScreen.js : exibe opções para criar ou ingressar em uma reunião.
components/screens/WaitingToJoin.js : exibe uma animação Lottie com mensagens enquanto espera para entrar na reunião. Esta tela é mostrada até que o sinalizador isMeetingJoined seja verdadeiro, que é recebido da meeting inicializada usando useMeeting() de @videosdk.live/react-sdk . 
components/ParticipantView.js : exibe o vídeo de um único participante com uma exibição no canto para o nome do participante.
components/ParticipantGrid.js : Exibe uma grade de participantes mostrada na tela principal.
meeting/components/ParticipantView.js : Gerencie quantos participantes serão exibidos na grade de participantes.
meeting/components/BottomBar.jsmore actions . O botão more actions abre uma gaveta contendo as opções restantes. 
components/PresenterView.js : exibe a visualização quando um participante compartilha sua tela. 
sidebar/ChatPanel.js : Contém o painel lateral do chat, com um campo de entrada de chat e uma lista de mensagens de chat. 
sidebar/ParticipantPanel.js : Exibe a lista de participantes presentes na reunião. 
components/screens/LeaveScreen.js : exibe a tela de saída quando o participante sai da reunião. 
Explore mais e comece a construir com nossa documentação
