WiseAPI React Native

Biblioteca React Native para integração com conferências de vídeo da WiseAPI.

Instalação

npm install lib-wiseapi-react-native
# ou
yarn add lib-wiseapi-react-native
# ou
pnpm add lib-wiseapi-react-native

Uso Básico

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WiseConf } from 'lib-wiseapi-react-native';

const ConferenceScreen = () => {
  return (
    <View style={styles.container}>
      <WiseConf
        domain="seu-dominio.wisecare.com.br"
        session="nome-da-sala"
        sessionToken="seu-token-jwt"
        userInfo={{
          displayName: "João Silva",
          email: "[email protected]"
        }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default ConferenceScreen;

Props

Obrigatórias

• domain (string): Domínio do servidor WiseAPI/Jitsi (ex: "meet.wisecare.com.br")
• session (string): Nome da sala/sessão da conferência
• sessionToken (string): Token JWT para autenticação na conferência

Opcionais

• startWithAudioMuted (boolean): Iniciar com áudio mutado (padrão: false)
• startWithVideoMuted (boolean): Iniciar com vídeo desligado (padrão: false)
• enablePreJoin (boolean): Habilita a tela de pré-entrada (prejoin) antes de entrar na conferência. Quando ativado, o usuário verá uma tela prévia onde pode configurar câmera e microfone antes de entrar na sala (padrão: false)
• shareLink (string): Link customizado para compartilhamento
• logo (string): URL do logo customizado
• buttons (Buttons[]): Array com botões da toolbar a serem exibidos
• userInfo (object): Informações do usuário
  • displayName (string): Nome de exibição
  • email (string): Email do usuário
  • avatarURL (string): URL do avatar
• listeners (EventListeners): Callbacks para eventos da conferência
• style (StyleProp<ViewStyle>): Estilo customizado para o container
• onLoad (() => void): Callback quando a conferência estiver carregada

Botões Disponíveis

Você pode customizar quais botões aparecerão na toolbar:

<WiseConf
  domain="..."
  session="..."
  sessionToken="..."
  buttons={[
    'microphone',
    'camera',
    'desktop',
    'chat',
    'raisehand',
    'participants-pane',
    'tileview',
    'hangup',
  ]}
/>

Lista completa de botões disponíveis:

• avatar - Avatar do usuário
• camera - Controle de câmera
• chat - Chat
• desktop - Compartilhamento de tela
• download - Download
• embedmeeting - Embed da reunião
• etherpad - Editor colaborativo
• feedback - Feedback
• filmstrip - Faixa de vídeos
• fullscreen - Tela cheia
• hangup - Desligar
• help - Ajuda
• highlight - Destacar
• info - Informações
• invite - Convidar
• libras - Libras
• linktosalesforce - Link Salesforce
• livestreaming - Transmissão ao vivo
• microphone - Controle de microfone
• mute-everyone - Mutar todos
• noisesuppression - Supressão de ruído
• participants-pane - Painel de participantes
• profile - Perfil
• raisehand - Levantar mão
• recording - Gravação
• security - Segurança
• select-background - Selecionar fundo
• settings - Configurações
• shareaudio - Compartilhar áudio
• sharedvideo - Vídeo compartilhado
• shortcuts - Atalhos
• stats - Estatísticas
• tileview - Visualização em grade
• toggle-camera - Alternar câmera
• transcription - Transcrição
• videoquality - Qualidade de vídeo

Event Listeners

A biblioteca fornece vários listeners para eventos da conferência:

<WiseConf
  domain="..."
  session="..."
  sessionToken="..."
  listeners={{
    onConferenceJoined: (data) => {
      console.log('Entrou na conferência:', data);
    },
    onConferenceLeft: (data) => {
      console.log('Saiu da conferência:', data);
    },
    onParticipantJoined: (data) => {
      console.log('Participante entrou:', data);
    },
    onParticipantLeft: (data) => {
      console.log('Participante saiu:', data);
    },
    onAudioMuteStatusChanged: (data) => {
      console.log('Status do áudio:', data.muted ? 'Mutado' : 'Desmutado');
    },
    onVideoMuteStatusChanged: (data) => {
      console.log('Status do vídeo:', data.muted ? 'Desligado' : 'Ligado');
    },
    onReadyToClose: () => {
      console.log('Pronto para fechar');
      // Navegar para outra tela
    },
    onChatMessageReceived: (data) => {
      console.log('Mensagem recebida:', data);
    },
    onChatUpdated: (data) => {
      console.log('Chat atualizado:', data);
    },
    onError: (error) => {
      console.error('Erro na conferência:', error);
    },
  }}
/>

Eventos Disponíveis

• onConferenceJoined: Disparado quando o usuário entra na conferência
• onConferenceLeft: Disparado quando o usuário sai da conferência
• onParticipantJoined: Disparado quando um participante entra
• onParticipantLeft: Disparado quando um participante sai
• onAudioMuteStatusChanged: Disparado quando o status do áudio muda
• onVideoMuteStatusChanged: Disparado quando o status do vídeo muda
• onReadyToClose: Disparado quando a conferência está pronta para ser fechada
• onChatMessageReceived: Disparado quando uma mensagem de chat é recebida
• onChatUpdated: Disparado quando o chat é atualizado
• onError: Disparado quando ocorre um erro
• onVideoConferenceJoined: Alias para onConferenceJoined
• onVideoConferenceLeft: Alias para onConferenceLeft

Exemplo Completo

import React, { useState } from 'react';
import { View, StyleSheet, Alert, Button } from 'react-native';
import { WiseConf } from 'lib-wiseapi-react-native';

const ConferenceScreen = ({ route, navigation }) => {
  const { roomName, token } = route.params;
  const [conferenceReady, setConferenceReady] = useState(false);

  return (
    <View style={styles.container}>
      <WiseConf
        domain="meet.wisecare.com.br"
        session={roomName}
        sessionToken={token}
        startWithAudioMuted={false}
        startWithVideoMuted={false}
        enablePreJoin={true}
        logo="https://example.com/logo.png"
        userInfo={{
          displayName: "João Silva",
          email: "[email protected]",
          avatarURL: "https://example.com/avatar.jpg"
        }}
        buttons={[
          'microphone',
          'camera',
          'desktop',
          'chat',
          'raisehand',
          'participants-pane',
          'tileview',
          'hangup',
          'settings',
        ]}
        listeners={{
          onConferenceJoined: (data) => {
            console.log('Conferência iniciada', data);
            setConferenceReady(true);
          },
          onConferenceLeft: () => {
            console.log('Saiu da conferência');
            navigation.goBack();
          },
          onReadyToClose: () => {
            navigation.goBack();
          },
          onError: (error) => {
            console.error('Erro:', error);
            Alert.alert('Erro', 'Ocorreu um erro na conferência');
          },
        }}
        onLoad={() => {
          console.log('WebView carregada');
        }}
        style={styles.conference}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  conference: {
    flex: 1,
  },
});

export default ConferenceScreen;

Solução de Problemas

Câmera/Microfone não funcionam no iOS

Verifique se as permissões foram adicionadas no Info.plist e solicite as permissões antes de abrir a conferência:

import { PermissionsAndroid, Platform } from 'react-native';

const requestPermissions = async () => {
  if (Platform.OS === 'android') {
    await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
    ]);
  }
};

WebView não carrega

Verifique se o domínio está acessível e se o token JWT é válido.

Erro de Content Security Policy

A biblioteca já está configurada com as políticas de segurança necessárias, mas certifique-se de que seu servidor permite conexões do WebView.