OpenTok React Native

OpenTok React Native SDK を使用すると、Android および iOS デバイス向けに開発したアプリで、Vonage Video API を基盤としたビデオセッションを利用できます。

OpenTok React Native SDK は、OpenTok Android SDK および iOS SDK を基盤として構築されています。詳細については、以下を参照してください。

重要な注意事項

Android 17 への対応： バージョン 2.34.0 は、Android 17 搭載端末での動作確認が完了しています。プロジェクトの設定を変更する必要はありません。
React Native 0.86 のサポート： OpenTok React Native SDK バージョン 2.34.0 では、React Native 0.86 への対応が追加されました。
TypeScript開発者への重要な注意 バージョン2.33.0では、バージョン2.31.1で導入されたTypeScriptサポートの不具合が修正されました。この変更はSDKに機能的な変更をもたらすものではありません。しかし、アップグレード後、アプリケーションは、型定義が欠落しているために以前は隠されていた型付けの問題に対処する必要があるかもしれません。バージョン2.33.0以降にアップグレードした後、TypeScriptのエラーが表面化していないか、コードベースを見直してみることを強くお勧めします。
新アーキテクチャ対応： バージョン2.31から、Vonage Video API React Native SDKは、次のように構築されています。リアクト・ネイティブの新アーキテクチャ.このバージョンはReact Native 0.81.1以降を必要とし、新しいアーキテクチャにのみ対応しています。レガシーアーキテクチャを使用する古いReact Nativeバージョンではサポートされていません。現在このSDKの古いバージョンを使用しているアプリケーションは、アップグレードする前にReact Nativeの新しいアーキテクチャに移行する必要があります。以下のインストール手順に従ってください。

相互運用性

OpenTok React Native SDK 2.34 以降を使用して作成されたアプリは、OpenTok Client SDK バージョン 2.32 以降を使用して作成された OpenTok アプリと相互運用可能です。

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

前提条件

インストール node.js
インストールとアップデートエックスコード（Macが必要です）。（React Native iOSのインストール方法については、指示.)
インストールとアップデートアンドロイドスタジオ. （React NativeのAndroidインストール手順を参照）指示.)

インストール

GitHubパッケージによるインストール

npmレジストリからのインストールに加えて、Vonage Video API Client SDKパッケージは、以下の方法でも入手可能です。 GitHub PackagesのNPMレジストリ.これは、GitHubベースのパッケージ管理を必要とするエンタープライズ環境に、別の配布チャネルを提供する。

利用可能なパッケージ

以下のパッケージはGitHub Packagesに公開されています：

@opentok/opentok-react-native - 下記にて入手可能 GitHub Packages（Opentok org）

セットアップ方法

GitHub PackagesのNPMレジストリからパッケージをインストールするには、GitHubと認証するようにnpmを設定する必要があります：

1.GitHub Personal Access Token (PAT) を作成する。

で個人アクセストークンを生成する。 read:packages スコープを GitHub アカウントの設定に追加します。

2.あなたの .npmrc ファイル

プロジェクトの .npmrc ファイルまたはユーザーレベルの ~/.npmrc ファイル：

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

交換 YOUR_GITHUB_TOKEN に GitHub パーソナルアクセストークンを追加します。

3.パッケージをインストールする

いったん設定したら、以下に説明するように、標準のnpm installコマンドを使ってパッケージをインストールできる。

パッケージの在庫について

従来の npm レジストリと GitHub Packages レジストリの両方が同期されます。組織のパッケージ管理の好みに応じて、どちらかの配布方法を選ぶことができます。伝統的な npm インストール方法 ( npm install opentok-react-native デフォルトのレジストリから）完全にサポートされたままであり、追加の設定は必要ない。

GitHub Packages の NPM レジストリの使い方については GitHub Packages ドキュメント.

万博プロジェクト

Expoを使用している場合は、コンフィグプラグインを使用することでセットアップが簡単になります：

1.パッケージをインストールする：

npx expo install @opentok/opentok-react-native

2.プラグインを `app.json` または `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"
        }
      ]
    ]
  }
}

プラグインのiOS設定オプション：

オプション	タイプ	デフォルト	説明
`cameraPermission`	ストリング	"$(PRODUCT_NAME)がビデオ通話のためにカメラにアクセスすることを許可する"	iOSカメラ許可メッセージ（NSCameraUsageDescription）
`microphonePermission`	ストリング	"$(PRODUCT_NAME)が音声通話のためにマイクにアクセスすることを許可する"	iOSマイク許可メッセージ（NSMicrophoneUsageDescription）

3.アプリを再構築する：

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

設定プラグインが自動的に行うこと

iOSのカメラとマイクの許可をInfo.plistに追加する
AndroidManifest.xmlに必要なすべてのAndroid権限を追加します：

BLUETOOTH
REQUEST_IGNORE_BATTERY_OPTIMIZATIONS
BLUETOOTH_CONNECT
BROADCAST_STICKY
CAMERA
INTERNET
MODIFY_AUDIO_SETTINGS
READ_PHONE_STATE
RECORD_AUDIO
ACCESS_NETWORK_STATE

Android 用のハードウェア機能を設定します。

手動でのネイティブ・コンフィギュレーションは必要ない！ Expoをコンフィグプラグインと一緒に使用する場合、以下のiOSのインストールとAndroidのインストールのセクションは省略できます。

React Native CLIプロジェクトの場合

ターミナルで、React Nativeプロジェクトのディレクトリに移動する。

npmまたはyarnを使ってライブラリを追加する：

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

注：交換 <VERSION> に、使用するターゲット・バージョンを指定する。

パッケージをインストールしたら、以下のiOSインストールとAndroidインストールのセクションに進みます。

iOSのインストール

iOSポッドをインストールします：
コピー
```
 npx pod-install
```
に以下のエントリーを追加して、カメラとマイクの両方の使用が有効になっていることを確認してください。 Info.plist ファイル：

<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>

を登録する。 OTPublisherViewNative そして OTSubscriberViewNative クラスを変更します。これは AppDelegate を実装した。
- アプリにObjective-C++ AppDelegateファイル（AppDelegate.mm）がある場合は、これらのクラスを thirdPartyFabricComponents() 関数である：

        #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

あなたのアプリが Swift AppDelegate ファイル (AppDelegate.swift) を使用する場合、その実装に RCTAppDelegate.application(_, didFinishLaunchingWithOptions) メソッドを呼び出すObjective-C++ファイルのメソッドを呼び出すには、ブリッジング・ヘッダーを使う。 [RCTComponentViewFactory registerComponentViewClass:] メソッドに OTPublisherViewNativeComponentView そして OTSubscriberViewNativeComponentView クラスに追加する必要があります。また、Xcodeのプロジェクトのビルド設定で、Objective-C Bridging Headerの下にブリッジング・ヘッダー・パスを追加する必要があります。

あなたのアプリが OTPublisher.setVideoTransformers() または OTPublisher.setAudioTransformers() メソッドを使用する場合は、Podfileに以下を含める必要があります：
コピー
```
pod 'VonageClientSDKVideoTransformers', '= 2.34.0'
```

アプリのアーカイブを作成する際に AppleのApp Storeが要求するプライバシー・マニフェストの設定は、このバージョンのReact Native SDKで自動的に追加される。

アプリをアーカイブしようとして失敗した場合は、以下の操作を行ってください：

こちらへ ターゲット.
クリック 建設段階.
の下にある。 バイナリとライブラリのリンク セクションを削除する。 libOpenTokReactNative.a を追加する。

アンドロイドのインストール

ターミナルでプロジェクト・ディレクトリに移動する。
走る bundle install.
アプリのgradleで以下を確認してください。 compileSdkVersion, buildToolsVersion, minSdkVersionそして targetSdkVersion OpenTok React Native ライブラリで指定されているバージョン以上であること。
SDK は、必要な Android パーミッションを自動的に追加します。アプリのマニフェストにこれらを追加する必要はありません。ただし、特定のパーミッションについては、ユーザーにプロンプトを表示する必要があります。以下を参照してください。必要なパーミッションの全リストの Vonage Video API Android SDK ドキュメントを参照してください。

アプリの MainApplication.kt ファイルで、以下のものをインポートして登録してください。 OpentokReactNativePackage, OTRNPublisherPackageそして OTRNSubscriberPackage パッケージを変更します。これは MainApplication ファイルが返すパッケージのリストに追加する。 getPackages() 関数である：

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())
    }
    // ...

あなたのアプリが OTPublisher.setVideoTransformers() または OTPublisher.setAudioTransformers() メソッドを呼び出すには、app/build.gradleファイルに以下をインクルードする必要がある：
コピー
```
implementation "com.vonage:client-sdk-video-transformers:2.34.0"
```

システム要件

のシステム要件については、 OpenTok Android SDK そして OpenTok iOS SDK. （OpenTok React Native SDK の要件は、Android と iOS で同じです。）

ものづくりの学び

OpenTok React Native SDK を使った開発を始めるには、以下の Applicationsの例そして、以下の APIリファレンス利用可能なクラスやメソッドに関する詳細については、こちらをご覧ください。

サポートされていない機能

React Nativeライブラリは、AndroidおよびiOSクライアントSDKを使用するためのReactインターフェースを提供します。AndroidおよびiOSクライアントSDKの以下の高度な機能は、React Nativeライブラリではサポートされていません：

カスタムオーディオドライバー -- React Nativeを使用するアプリケーションは、公開ストリームに送信する音声をキャプチャするためにデバイスのマイクを使用します。また、サブスクライブしたストリームからオーディオを再生するには、デバイスのスピーカー（またはヘッドフォン）を使用します。ただし、ステレオ出力を有効にするには、OTSession オブジェクトの enableStereoOutput プロパティを設定します。
カスタムビデオキャプチャ -- (BaseVideoCapturer) -- React Native OTPublisherは、デバイスのカメラからのビデオを直接使用する標準のビデオキャプチャを使用します。ただし、OTPublisher コンポーネントの videoSource プロパティを "screen" に設定すると、画面共有ストリームを公開できます。
カスタムビデオレンダラー -- OTSubscriber コンポーネントと OTPublisher コンポーネントは、ストリームをレンダリングし、ストリーム名を表示したり、マイクやカメラをミュートしたりするためのユーザー・インターフェース・コントロールを提供する、標準的なビデオ・レンダラを実装する。パブリッシャーとサブスクライバーは mPublisher.setStyle(BaseVideoRenderer.STYLE_VIDEO_SCALE, BaseVideoRenderer.STYLE_VIDEO_FILL)
iOSデリゲートコールバックキュー -- iOSの場合、デリゲートコールバックキュー（GCDキュー）を割り当てることはできません。iOS SDKのOTSession.apiQueueプロパティに関するドキュメントを参照してください。
CallKit API -- iOS SDK バージョン 2.31.0 では、カスタムオーディオドライバーを実装せずに iOS CallKit を利用できる API の機能強化が追加されました。この機能は React Native SDK には実装されていません。
Android ConnectionService API -- Android SDK バージョン 2.31.0 では、カスタムオーディオドライバーを実装せずに Android ConnectionService を統合できるようになりました。ただし、React Native SDK ではこの機能は実装されていません。

コードサンプル

サンプルコードについては vonage-video-React-native-sdk-samples リポジトリをGitHubで公開している。

ドキュメントおよび詳細情報

参照 OpenTok React Native SDK API リファレンスそして OpenTok 開発者ガイド.

新機能と既知の問題のリストについてはリリースノート.