videosdk rtc react sdk example
1.0.0
En Video SDK, estamos creando herramientas para ayudar a las empresas a crear productos colaborativos de clase mundial con capacidades para audio/video en vivo, grabaciones en la nube, transmisión RTMP/HLS y API de interacción.
¿Curioso por verlo en acción? Vea nuestra demostración en vivo aquí.
Siga estos pasos para poner en funcionamiento la aplicación de muestra:
git clone https://github.com/videosdk-live/videosdk-rtc-react-sdk-example.gitAbra su editor de código favorito y copie el archivo de entorno de ejemplo:
cp .env.example .env.env Genere un token temporal desde su cuenta de Video SDK y actualice el archivo .env :
REACT_APP_VIDEOSDK_TOKEN = " YOUR_TEMPORARY_TOKEN "Instale los paquetes necesarios:
npm installBingo, es hora de presionar el botón de inicio.
npm run startDesbloquee un conjunto de potentes funciones para mejorar sus reuniones:
| Característica | Documentación | Descripción |
|---|---|---|
| ? Configuración previa a la llamada | Configuración de llamada previa | Configure dispositivos de audio, video y otras configuraciones antes de unirse a la reunión. |
| ⏳ Vestíbulo de espera | Vestíbulo de espera | Espacio virtual para que los participantes esperen antes de incorporarse a la reunión. |
| ? Unirse a la reunión | Unirse a la reunión | Permite a los participantes unirse a una reunión. |
| ? Salir de la reunión | Salir de la reunión | Permite a los participantes abandonar una reunión. |
| ? Alternar micrófono | Control de micrófono | Activa o desactiva el micrófono durante una reunión. |
| ? Alternar cámara | Control de cámara | Enciende o apaga la cámara de video durante una reunión. |
| Compartir pantalla | Compartir pantalla | Comparte tu pantalla con otros participantes durante la llamada. |
| ? Captura de imagen | Capturador de imágenes | Capture imágenes de otros participantes desde su transmisión de video, particularmente útil para escenarios de verificación de identidad y KYC de video. |
| ? Cambiar dispositivo de entrada | Cambiar dispositivos de entrada | Cambie entre diferentes dispositivos de entrada de audio y video. |
| ? Cambiar salida de audio | Cambiar salida de audio | Seleccione un dispositivo de salida para audio durante una reunión. |
| Optimizar pistas | Optimización de seguimiento | Mejore la calidad y el rendimiento de las pistas multimedia. |
| Charlar | Chat durante la reunión | Intercambiar mensajes con los participantes a través de un mecanismo de Publicación-Suscripción. |
| Pizarra | Pizarra | Colabore visualmente dibujando y anotando en una pizarra compartida. |
| ? Compartir archivos | Compartir archivos | Comparta archivos con los participantes durante la reunión. |
| ? Grabación | Grabación | Grabe la reunión para referencia futura. |
| ? Transmisión en vivo RTMP | Transmisión en vivo RTMP | Transmita la reunión en vivo a plataformas como YouTube o Facebook. |
| Transcripción en tiempo real | Transcripción en tiempo real | Genere transcripciones en tiempo real de la reunión. |
| ? Alternar medios remotos | Control remoto de medios | Controle el micrófono o la cámara de los participantes remotos. |
| Silenciar a todos los participantes | Silenciar todo | Silencia a todos los participantes simultáneamente durante la llamada. |
| ?️ Eliminar participante | Eliminar participante | Expulsar a un participante de la reunión. |
Comprenda los componentes principales de nuestro SDK:
Meeting : una reunión representa comunicación de audio y video en tiempo real.
Note: Don't confuse the terms Room and Meeting; both mean the same thing ?
Sessions : una duración particular que pasa en una reunión determinada se denomina sesión; puede tener varias sesiones de un ID de reunión específico.
Participant : un participante se refiere a cualquier persona que asista a la sesión de la reunión. El local participant se representa a usted mismo (usted), mientras que todos los demás asistentes se consideran remote participants .
Stream : una transmisión se refiere a contenido multimedia de video o audio publicado por el local participant o por remote participants .
El token se utiliza para crear y validar una reunión mediante API y también para inicializar una reunión.
Development Environment :
Production Environment :
componentes/DropDown.js : un componente desplegable para seleccionar dispositivos de entrada de audio (micrófonos), monitorear el audio a través de Web Audio API y administrar la configuración del micrófono.
componentes/DropDownCam.js : un componente desplegable para seleccionar dispositivos de cámara y administrar los permisos de la cámara.
componentes/DropDownSpeaker.js : permite a los usuarios seleccionar altavoces, probarlos con sonidos de muestra y realizar un seguimiento del progreso de la reproducción para confirmarlo.
componentes/NetworkStats.js : muestra estadísticas de red en tiempo real, como velocidades de carga y descarga.
components/screens/JoiningScreen.js : brinda a los usuarios la opción de crear o unirse a una reunión, administrar el estado de la cámara web y el micrófono, seleccionar dispositivos (micrófono, cámara, parlantes), verificar permisos, obtener una vista previa del video y monitorear las estadísticas de la red para garantizar una configuración adecuada antes. entrando a la reunión.
api.js : incluye todas las llamadas API para crear y validar reuniones.
components/MeetingDetailsScreen.js : muestra opciones para crear o unirse a una reunión.
components/screens/WaitingToJoin.js : muestra una animación de Lottie con mensajes mientras espera unirse a la reunión. Esta pantalla se muestra hasta que el indicador isMeetingJoined sea verdadero, que se recibe de la meeting inicializada usando useMeeting() de @videosdk.live/react-sdk . 
components/ParticipantView.js : muestra el vídeo de un solo participante con una esquina para mostrar el nombre del participante.
components/ParticipantGrid.js : muestra una cuadrícula de participantes que se muestran en la pantalla principal.
meeting/components/ParticipantView.js : administre cuántos participantes se mostrarán en la cuadrícula de participantes.
meeting/components/BottomBar.jsmore actions . El botón more actions abre un cajón que contiene las opciones restantes. 
components/PresenterView.js : muestra la vista cuando un participante comparte su pantalla. 
sidebar/ChatPanel.js : contiene el panel lateral del chat, con un campo de entrada del chat y una lista de mensajes del chat. 
sidebar/ParticipantPanel.js : muestra la lista de participantes presentes en la reunión. 
components/screens/LeaveScreen.js : muestra la pantalla de salida cuando el participante sale de la reunión. 
Explore más y comience a construir con nuestra documentación
