OpenTok React Native

O SDK do OpenTok para React Native permite que você utilize sessões de vídeo baseadas na Video API da Vonage nos aplicativos que você desenvolve para dispositivos Android e iOS.

O SDK do OpenTok para React Native foi desenvolvido com base nos SDKs do OpenTok para Android e iOS. Para mais detalhes, consulte o seguinte:

Observações importantes

Compatibilidade com o Android 17: A versão 2.34.0 foi validada em dispositivos com Android 17. Não são necessárias atualizações na configuração do projeto.
Suporte ao React Native 0.86: A versão 2.34.0 do SDK do OpenTok para React Native adiciona suporte ao React Native 0.86.
Observação importante para desenvolvedores de TypeScript: A versão 2.33.0 corrige um problema no suporte ao TypeScript introduzido na versão 2.31.1. Essa alteração não traz nenhuma mudança funcional ao SDK. No entanto, após a atualização, talvez seja necessário corrigir problemas de tipagem em seu aplicativo que estavam ocultos anteriormente devido à falta de definições de tipos. Recomendamos enfaticamente que você revise sua base de código em busca de quaisquer erros do TypeScript que possam surgir após a atualização para a versão 2.33.0 ou posterior.
Suporte a novas arquiteturas: A partir da versão 2.31, o SDK do React Native para a Video API da Vonage é desenvolvido com o Nova arquitetura do React Native. Esta versão requer o React Native 0.81.1 ou posterior e é compatível apenas com a nova arquitetura. Ela não é compatível com versões mais antigas do React Native que utilizam a arquitetura legada. As Applications que atualmente utilizam versões mais antigas deste SDK precisarão migrar para a nova arquitetura do React Native antes de atualizar. Certifique-se de seguir as instruções de instalação abaixo.

Interoperabilidade

Aplicativos desenvolvidos com o SDK do OpenTok para React Native 2.34 ou superior podem interagir com aplicativos do OpenTok desenvolvidos com a versão 2.32 ou superior dos Client SDKs do OpenTok:

OpenTok.js
SDK do OpenTok para Android
SDK do OpenTok para iOS
SDK do OpenTok para Windows
SDK do OpenTok para macOS
SDK do OpenTok para Linux
SDK do OpenTok para React Native

Pré-requisitos

Instalar node.js
Instalar e atualizar Xcode (você precisará de um Mac). (Consulte a instalação do React Native para iOS instruções.)
Instalar e atualizar Android Studio. (Consulte a instalação do React Native para Android instruções.)

Instalação

Instalação via GitHub Packages

Além da instalação a partir do repositório do npm, os pacotes do Vonage Client SDK para a Video API também estão disponíveis por meio de Registro NPM do GitHub Packages. Isso oferece um canal de distribuição alternativo para ambientes corporativos que exigem gerenciamento de pacotes baseado no GitHub.

Pacotes disponíveis

O pacote a seguir foi publicado no GitHub Packages:

@opentok/opentok-react-native - Disponível em GitHub Packages (Opentok org)

Instruções de configuração

Para instalar pacotes do registro NPM do GitHub Packages, é necessário configurar o npm para se autenticar no GitHub:

1. Criar um token de acesso pessoal (PAT) do GitHub

Gere um token de acesso pessoal com read:packages escopo nas configurações da sua conta do GitHub.

2. Configure seu .npmrc arquivo

Adicione a seguinte configuração ao arquivo do seu projeto .npmrc arquivo ou seu nível de usuário ~/.npmrc arquivo:

//npm.pkg.github.com/:_authToken=YOUR_GITHUB_TOKEN
@opentok:registry= https://npm.pkg.github.com

Substituir YOUR_GITHUB_TOKEN com seu token de acesso pessoal do GitHub.

3. Instale o pacote

Depois de configurado, você pode instalar o pacote usando o comando padrão `npm install`, conforme explicado a seguir.

Nota sobre a disponibilidade do pacote

Tanto o registro tradicional do npm quanto o registro do GitHub Packages são mantidos em sincronia. Você pode escolher qualquer um dos métodos de distribuição, de acordo com as preferências de gerenciamento de pacotes da sua organização. O método tradicional de instalação do npm (por meio de npm install opentok-react-native (do Registro padrão) continua sendo totalmente compatível e não requer nenhuma configuração adicional.

Para obter mais informações sobre como trabalhar com o registro NPM do GitHub Packages, consulte o Documentação do GitHub Packages.

Para projetos da Expo

Se você estiver usando o Expo, a configuração fica mais simples com o plugin de configuração:

1. Instale o pacote:

npx expo install @opentok/opentok-react-native

2. Adicione o plugin ao seu `app.json` ou `app.config.js`:

{
  "expo": {
    "plugins": [
      [
        "opentok-react-native",
        {
          "cameraPermission": "Allow $(PRODUCT_NAME) to use your camera for video calls",
          "microphonePermission": "Allow $(PRODUCT_NAME) to use your microphone for audio calls"
        }
      ]
    ]
  }
}

Opções de configuração do plugin para iOS:

Opção	Tipo	Padrão	Descrição
`cameraPermission`	sequência de caracteres	"Permita que o $(PRODUCT_NAME) acesse sua câmera para videochamadas"	Mensagem de permissão da câmera no iOS (NSCameraUsageDescription)
`microphonePermission`	sequência de caracteres	"Permita que o $(PRODUCT_NAME) acesse seu microfone para chamadas de áudio"	Mensagem de permissão do microfone no iOS (NSMicrophoneUsageDescription)

3. Recompile seu aplicativo:

npx expo prebuild npx expo run:ios # or npx expo run:android

O que o plugin de configuração faz automaticamente:

Adiciona permissões de câmera e microfone do iOS ao arquivo Info.plist
Adiciona todas as permissões necessárias do Android ao arquivo AndroidManifest.xml:

BLUETOOTH
REQUEST_IGNORE_BATTERY_OPTIMIZATIONS
BLUETOOTH_CONNECT
BROADCAST_STICKY
CAMERA
INTERNET
MODIFY_AUDIO_SETTINGS
READ_PHONE_STATE
RECORD_AUDIO
ACCESS_NETWORK_STATE

Configura recursos de hardware para o Android

Não é necessária nenhuma configuração manual nativa! Ao usar o Expo com o plugin de configuração, você pode pular as seções “Instalação no iOS” e “Instalação no Android” abaixo.

Para projetos da CLI do React Native

No seu terminal, acesse o diretório do seu projeto React Native.

Adicione a biblioteca usando o npm ou o yarn:

npm install @opentok/opentok-react-native@<VERSION>

Observação: Substituir <VERSION> com a versão de destino a ser usada.

Após instalar o pacote, siga as seções “Instalação no iOS” e “Instalação no Android” abaixo.

Instalação no iOS

Instale os pods do iOS:
Copiar
```
 npx pod-install
```
Certifique-se de ter habilitado o uso da câmera e do microfone adicionando as seguintes entradas ao arquivo Info.plist arquivo:

<key>NSCameraUsageDescription</key>
<string>Your message to user when the camera is accessed for the first time</string>
<key>NSMicrophoneUsageDescription</key>
<string>Your message to user when the microphone is accessed for the first time</string>

Registrar o OTPublisherViewNative e OTSubscriberViewNative classes. Para isso, modifique o AppDelegate implementação.
- Se o seu aplicativo tiver um arquivo AppDelegate em Objective-C++ (AppDelegate.mm), adicione essas classes à lista de pacotes no NSMutableDictionary retornado pelo thirdPartyFabricComponents() função:

        #import "OTPublisherViewNativeComponentView.h"
        #import "OTSubscriberViewNativeComponentView.h"

        @implementation AppDelegate
            // ...
            - (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents
        {
        NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
        dictionary[@"OTPublisherViewNative"] = [OTPublisherViewNativeComponentView class];
        dictionary[@"OTSubscriberViewNative"] = [OTSubscriberViewNativeComponentView class];
        return dictionary;
        }

        @end

Se seu aplicativo usa um arquivo AppDelegate em Swift (AppDelegate.swift), você precisará ter a implementação do RCTAppDelegate.application(_, didFinishLaunchingWithOptions) O método utiliza um cabeçalho de ponte para chamar um método em um arquivo Objective-C++ que, por sua vez, chama o [RCTComponentViewFactory registerComponentViewClass:] método, passando o OTPublisherViewNativeComponentView e OTSubscriberViewNativeComponentView classes. Você também precisará adicionar o caminho do cabeçalho de ponte nas configurações de compilação do projeto no Xcode, na seção “Objective-C Bridging Header”.

Se o seu aplicativo for usar o OTPublisher.setVideoTransformers() ou OTPublisher.setAudioTransformers() Para usar esse método, você precisa incluir o seguinte no seu Podfile:
Copiar
```
pod 'VonageClientSDKVideoTransformers', '= 2.34.0'
```

Ao criar um arquivo compactado do seu aplicativo, o configurações do manifesto de privacidade exigidas pela App Store da Apple são adicionados automaticamente nesta versão do SDK do React Native.

Se você tentar arquivar o aplicativo e a operação falhar, faça o seguinte:

Acesse Meta.
Clique Fases de construção.
De acordo com o Vincular o arquivo binário às bibliotecas seção, remover libOpenTokReactNative.a e adicione-o novamente.

Instalação no Android

No seu terminal, acesse o diretório do seu projeto.
Correr bundle install.
Verifique se o seguinte está presente no arquivo Gradle do seu aplicativo compileSdkVersion, buildToolsVersion, minSdkVersion, e targetSdkVersion são maiores ou iguais às versões especificadas na biblioteca OpenTok para React Native.
O SDK adiciona automaticamente as permissões do Android necessárias. Você não precisa adicioná-las ao manifesto do seu aplicativo. No entanto, certas permissões exigem que você solicite a autorização do usuário. Consulte o lista completa das permissões necessárias na documentação do SDK para Android da Video API da Vonage.

No arquivo MainApplication.kt do seu aplicativo, importe e registre o OpentokReactNativePackage, OTRNPublisherPackage, e OTRNSubscriberPackage pacotes. Para isso, modifique o MainApplication arquivo, adicionando-os à lista de pacotes retornada pelo getPackages() função:

import com.opentokreactnative.OTRNPublisherPackage
import com.opentokreactnative.OTRNSubscriberPackage
import com.opentokreactnative.OpentokReactNativePackage;

// ... 
override fun getPackages(): List<ReactPackage> =
    PackageList(this).packages.apply {
		add(OTRNPublisherPackage())
		add(OTRNSubscriberPackage())
        add(OpentokReactNativePackage())
    }
    // ...

Se o seu aplicativo for usar o OTPublisher.setVideoTransformers() ou OTPublisher.setAudioTransformers() Para utilizar esse método, você precisa incluir o seguinte no arquivo app/build.gradle:
Copiar
```
implementation "com.vonage:client-sdk-video-transformers:2.34.0"
```

Requisitos do sistema

Confira os requisitos de sistema para o SDK do OpenTok para Android e SDK do OpenTok para iOS. (O SDK do OpenTok para React Native tem os mesmos requisitos para Android e iOS.)

Aprendendo a Construir

Para começar a desenvolver com o SDK do OpenTok para React Native, explore o exemplos de aplicações e consulte o Referência da API para obter informações detalhadas sobre as classes e métodos disponíveis.

Recursos não suportados

A biblioteca React Native oferece uma interface React para utilizar os SDKs de cliente do Android e do iOS. Os seguintes recursos avançados dos SDKs de cliente do Android e do iOS não são suportados pela biblioteca React Native:

Drivers de áudio personalizados -- Um aplicativo que utiliza o React Native usa o microfone do dispositivo para capturar áudio e transmiti-lo a um stream publicado. Além disso, ele usa os alto-falantes do dispositivo (ou fones de ouvido) para reproduzir o áudio de streams aos quais o usuário está inscrito. No entanto, é possível definir a propriedade `enableStereoOutput` do objeto `OTSession` para habilitar a saída estéreo.
Capturadores de vídeo personalizados -- (BaseVideoCapturer) -- O OTPublisher do React Native utiliza o capturador de vídeo padrão, que usa o vídeo diretamente da câmera do dispositivo. No entanto, é possível definir a propriedade videoSource de um componente OTPublisher como “screen” para publicar uma transmissão de compartilhamento de tela.
Renderizadores de vídeo personalizados -- Os componentes OTSubscriber e OTPublisher implementam um renderizador de vídeo padrão que exibe transmissões e oferece controles de interface do usuário para mostrar o nome da transmissão e silenciar o microfone ou a câmera. Os editores e assinantes utilizam mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL)
Fila de chamadas de retorno de delegados do iOS -- No iOS, não é possível atribuir a fila de retorno de chamada do delegado (a fila do GCD). Consulte a documentação sobre a propriedade OTSession.apiQueue no SDK do iOS.
API do CallKit -- A versão 2.31.0 do SDK do iOS incluiu melhorias na API para permitir o uso do CallKit do iOS sem a necessidade de implementar um driver de áudio personalizado. Isso não está implementado no SDK do React Native.
API do ConnectionService do Android -- A versão 2.31.0 do SDK do Android adicionou suporte para integrar o ConnectionService do Android sem a necessidade de implementar um driver de áudio personalizado. Isso não está implementado no SDK do React.

Exemplos de código

Para ver exemplos de código, acesse nosso repositório vonage-video-React-native-sdk-samples no GitHub.

Documentação e mais informações

Veja o Referência da API do SDK do OpenTok para React Native e o Guias para desenvolvedores do OpenTok.

Para obter uma lista dos novos recursos e dos problemas conhecidos, consulte o notas de lançamento.