リアクト・ネイティブSDK

Vonage Video API React Native SDKを使用すると、AndroidおよびiOSデバイス用に構築したアプリでVonage Video APIを使用したビデオセッションを使用できます。React Native SDKは以下の機能を提供します：

• セッションへの接続
• セッションへのストリームの公開
• セッション内でストリームを購読する

React Native SDKは、Android SDKとiOS SDKの上に構築されています。詳細は以下を参照：

• Android SDKの概要
• iOS SDKの概要

クライアントSDKは、ウェブ、Android、iOS、Windows、macOS、Linuxでも利用可能です。すべてのクライアントSDKは相互に作用することができます。Vonage Videoクライアント、サーバ、セッションなどの基本については ビデオAPIの基礎 ページを参照されたい。

React Native SDK 2.33+で書かれたアプリは、VideoクライアントSDKのバージョン2.31+で書かれたアプリと相互運用できます：

• OpenTok.js
• アンドロイドSDK
• iOS SDK
• Windows SDK
• Linux SDK
• macOs SDK

前提条件

1. インストール node.js.
2. リアクト・ネイティブを準備する 開発環境.
3. インストールとアップデート エックスコード (Macが必要です）。
4. インストールとアップデート アンドロイドスタジオ.

システム要件

React Native SDKはAndroidとiOSのSDKの上に構築されている。 アンドロイドSDK そして iOS SDK 文書には関連する要件がある。

インストール

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

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

利用可能なパッケージ

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

• @vonage/client-sdk-video-react-native - 下記にて入手可能 GitHub パッケージ (Vonage 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
@vonage:registry= https://npm.pkg.github.com

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

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

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

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

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

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

万博プロジェクト

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

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

2.プラグインを app.json または app.config.js:

{
  "expo": {
    "plugins": [
      [
        "@vonage/client-sdk-video-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設定オプション：

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

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

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 を使ってライブラリを追加します：

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

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

iOSのインストール

1. iOSポッドをインストールします：
   コピー

    npx pod-install
   

2. に以下のエントリーを追加して、カメラとマイクの両方の使用が有効になっていることを確認してください。 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>

3. を登録する。 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の下にブリッジング・ヘッダー・パスを追加する必要があります。

4. あなたのアプリが OTPublisher.setVideoTransformers() または OTPublisher.setAudioTransformers() メソッドを使用する場合は、Podfileに以下を含める必要があります：

   コピー

   pod 'VonageClientSDKVideoTransformers', '= 2.33.0'
   

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

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

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

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

1. ターミナルでプロジェクト・ディレクトリに移動する。

2. 走る bundle install.

3. アプリのgradleで以下を確認してください。 compileSdkVersion, buildToolsVersion, minSdkVersionそして targetSdkVersion は、React Nativeライブラリで指定されているバージョン以上でなければならない。

4. SDK は、必要な Android パーミッションを自動的に追加します。アプリのマニフェストにこれらを追加する必要はありません。ただし、特定のパーミッションについては、ユーザーにプロンプトを表示する必要があります。以下を参照してください。 必要なパーミッションの全リスト の Vonage Video API Android SDK ドキュメントを参照してください。

5. アプリのMainActivity.ktファイルに、インポートして登録します。 OpentokReactNativePackage, OTRNPublisherPackageそして OTRNSubscriberPackage パッケージを変更します。これは MainApplication ファイルが返すパッケージのリストに追加する。 getPackages() 機能

   コピー

//... インポート com.opentokreactnative.OTRNPublisherPackage インポート com.opentokreactnative.OTRNSubscriberPackage インポート com.opentokreactnative.OpentokReactNativePackage； //...

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

6.アプリが OTPublisher.setVideoTransformers() または OTPublisher.setAudioTransformers() メソッドを呼び出すには、app/build.gradleファイルに以下をインクルードする必要がある：

implementation "com.vonage:client-sdk-video-transformers:2.33.0"

ビントレーの夕日

ビントレーのサポートは終了しました（公式発表： https://jfrog.com/blog/into-the-sunset-bintray-jcenter-gocenter-and-chartcenter/).アプリのbuild.gradleファイルで、以下の参照を削除する必要があります。 jcenter に置き換える。 mavenCentral.例

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ...
    repositories {
        google()
        mavenCentral()
    }
    ...
}

allprojects {
    repositories {
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }
        mavenCentral {
            // We don't want to fetch react-native from Maven Central as there are
            // older versions over there.
            content {
                excludeGroup "com.facebook.react"
            }
        }
        google()
        maven { url 'https://www.jitpack.io' }
    }
}

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

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キュー）を割り当てることはできません。その場合は OTSession.apiQueue プロパティを追加しました。

• CallKit API -- OpenTok iOS SDKのバージョン2.31.0では、カスタムオーディオドライバを実装せずにiOS CallKitを使用するためのAPI拡張が追加されました。これは React Native SDK には実装されていません。

• Android ConnectionService API -- OpenTok Android SDKのバージョン2.31.0では、カスタムオーディオドライバを実装せずにAndroid ConnectionServiceを統合するためのサポートが追加されました。これは React Native SDK には実装されていません。

これらの機能を使用するAndroidおよびiOSアプリをビルドするには アンドロイドSDK そして iOS SDK.

サンプルアプリ

このライブラリーが実際に使われているのをご覧になりたい方は、以下をご覧ください。 Vonage-react-native-samples repo.

詳細情報

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