セットアップと実行

システム要件

  • npm 6.11.3

  • yarn 1.17.3

    • 本ライブラリを使うアプリケーションのビルドと実行は yarn に依存しています。 npm を直接使う場合の動作は保証しません。

  • watchman 4.9.0

iOS アプリケーションの開発

本ライブラリは Swift に対応していません。拡張する場合は Objective-C で実装してください。

  • iOS 10.0 以降

  • Xcode 10

  • CocoaPods 1.5.0

    • 本ライブラリとアプリケーションとのリンクに使われます。

Android アプリケーションの開発

  • Android 5 以降

  • Android Studio 3.5.1 以降

また、以下の機能について、Android は未対応です。

  • オーディオポートの切り替え/取得機能 (getAudioPort, setAudioPort)

WebRTC ライブラリについて

本ライブラリは WebRTC M88 に対応しています。

本ライブラリが利用する WebRTC ライブラリは、デフォルトの設定では弊社がビルドしたバイナリを指定しています (https://github.com/shiguredo-webrtc-build/webrtc-build) 。このバイナリは弊社製品用の設定でビルドしてあるので、他のバイナリを使いたい場合は次の方法で入れ替えてください。

  • iOS: ビルドした WebRTC.frameworkios/Pods/WebRTC/WebRTC.framework と入れ替えます。

  • Android: ビルドした libwebrtc.aarandroid/libs/ 下に配置し、android/build.gradle の dependencies に以下のように編集します。

dependencies {
    implementation 'com.facebook.react:react-native:+'
    // api "com.github.react-native-webrtc-kit:webrtc-android:88.4324.2.0"
    implementation "androidx.annotation:annotation:1.1.0"
    api fileTree(dir: 'libs')
}

プロジェクトのセットアップ

プロジェクトを作成する

react-native init コマンドでプロジェクトを作成します。

$ react-native init MyApp

ライブラリを追加する

作成したプロジェクトのディレクトリに移動し、 yarn でプロジェクトに本ライブラリを追加します。

$ yarn add react-native-webrtc-kit

重要

グローバルインストールは推奨しません。

インストールに成功すると、 package.jsonreact-native-webrtc-kit のバージョンが追加されます。

"dependencies": {
  "react": "16.11.0",
  "react-native": "0.62.2",
  "react-native-webrtc-kit": "^2020.5.0"
},

ライブラリをリンクする

react-native link コマンドで React Native ライブラリと React Native WebRTC Kit ライブラリをプロジェクトにリンクします。 リンクの手順はプラットフォームごとに異なります。

iOS アプリケーション

ios/Podfile を以下のように編集します:

  • 以下の2行を先頭に記述します。これらのリポジトリでは、本ライブラリに必要なライブラリを配布しています。

    source 'https://github.com/react-native-webrtc-kit/webrtc-ios.git'
    source 'https://github.com/CocoaPods/Specs.git'
    
  • # Add new pods below this line のコメントを記述します。場所はどこでも構いません。このコメントが記述されている状態で react-native link コマンドを実行すると、 このコメントの次行に React Native が使用するライブラリ名が追加されます。 詳細は "Linking Libraries" を参照してください。

    重要

    # Add new pods below this line は何の変哲もないコメントに見えますが、 このコメントが記述されていないとビルドに失敗するので注意してください。

    重要

    CocoaPods における本ライブラリの名前は ReactNativeWebRTCKit ですが、 手動で Podfile に記述しないでください (コメントアウトも含みます) 。 react-native linkPodfile 中に pod 'ReactNativeWebRTCKit' の行があると (コメントアウトされていても) 、 # Add new pods below this line 以下の行に ReactNativeWebRTCKit のライブラリ名を追加しません。

Podfile のサンプルを示します:

# react-native-webrtc-kit/webrtc-ios を追加します。
source 'https://github.com/react-native-webrtc-kit/webrtc-ios.git'
source 'https://github.com/CocoaPods/Specs.git'

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'MyApp' do
  # Pods for MyApp
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native/React'
  pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'

  # Add new pods below this line

  target 'MyAppTests' do
    inherit! :search_paths
    # Pods for testing
  end

  use_native_modules!
end

target 'MyApp-tvOS' do
  # Pods for MyApp-tvOS

  target 'MyApp-tvOSTests' do
    inherit! :search_paths
    # Pods for testing
  end

end
  • react-native link コマンドを プロジェクトのトップディレクトリで 実行します。 ios ディレクトリだとエラーになるので注意してください。

    # ios ディレクトリでは実行できません。
    $ cd ios
    $ react-native link
    Command `link` unrecognized. Make sure that you have run `npm install` and that you are inside a react-native project.
    

    コマンドの実行後、 Podfile 内の # Add new pods below this line 行の下にリンクする iOS ライブラリの情報が追加されます。

    例:

    # Add new pods below this line
    pod 'ReactNativeWebRTCKit', :path => '../node_modules/react-native-webrtc-kit'
    

    何も追加されない場合は、リンクする npm パッケージを指定するか、 --all オプションを指定して react-native link を実行します。

    # 本ライブラリだけを指定してリンクする
    $ react-native link react-native-webrtc-kit
    $ cd ios
    $ pod install
    
    # または全てのライブラリをまとめてリンクする
    $ react-native link --all
    $ cd ios
    $ pod install
    
  • ios ディレクトリで pod install を実行します。

    注釈

    react-native linkpod install を実行しますが、初回しか実行しないため、 react-native link に頼っているとライブラリの更新を見落とす可能性があります。 react-native link の実行後には必ず pod install も実行してください。

iOS プロジェクトの設定

Info.plist ファイルを編集する

Info.plist ファイルにカメラとマイクの用途を記述します。 この記述を追加しないとアプリケーションが強制終了するので、必ず記述してください。

  • カメラの用途: "Privacy - Camera Usage Description"

  • マイクの用途: "Privacy - Microphone Usage Description"

Android プロジェクトの設定

android/build.gradle を編集し、 allprojects.repositories に JitPack の URL を追加します。

maven { url 'https://jitpack.io' }

次に編集例を示します。

allprojects {
    repositories {
        mavenLocal()
        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")
        }

        google()
        jcenter()

          // JitPack  URL を追加する
        maven { url 'https://jitpack.io' }
    }
}

アプリケーションを実行する

iOS アプリケーションを実行する

iOS アプリケーションは Xcode または react-native コマンドで実行できます。 本ライブラリはシミュレーターでも利用可能ですが、正常な動作を保証しません。 本ライブラリの機能を確認する場合は明示的に実機を指定してください。

Xcode で実行する場合は、 ios ディレクトリ以下にあるワークスペース (拡張子が .xcworkspace のファイル) を Xcode で開いて実行してください。

次に react-native コマンドによる実行例を示します。

# 実機名を指定して実行する
$ react-native run-ios --device="開発用のiPhone"

# 実機を UDID で指定して実行する
$ react-native run-ios --udid="device-udid-string"

# 注意: オプションを指定しないとデフォルトの iOS シミュレーターで実行されます
$ react-native run-ios

# シミュレーターで起動する場合は、 iOS 10.0 以降のシミュレーターを指定します
$ react-native run-ios --simulator="iPhone X"

Android アプリケーションを実行する

Android アプリケーションは Android Studio または react-native コマンドで実行できますが、実行が簡単な Android Studio での実行を推奨します。 本ライブラリはエミュレーターでも利用可能ですが、正常な動作を保証しません。 本ライブラリの機能を確認する場合は明示的に実機を指定してください。

Android Studio で実行する場合は、 android ディレクトリを Android Studio で開き、構成から app を選んで実行してください。

次に react-native コマンドによる実行例を示します。

# 実機またはエミュレーターを指定して実行する
$ react-native run-android --deviceId XXXXX

本ライブラリの開発者向けのセットアップ

重要

本ライブラリに修正以外の変更を加えたい場合は、リポジトリをフォークしてください。

本ライブラリの開発を行う場合は、 package.json に開発中のローカルリポジトリへの相対パスを指定すると開発しやすいでしょう。

package.jsonreact-native-webrtc-kit に、ローカルリポジトリへの相対パスを指定します。

"dependencies": {
  "react": "16.6.3",
  "react-native": "0.60.0",
  "react-native-webrtc-kit": "link:../.."
},

iOS アプリケーション

package.json でローカルリポジトリへの相対パスを指定した場合、 Podfile に本ライブラリを相対パスで明示的に追加する必要があります。 その場合は react-native link の実行時に # Add new pods below this line のコメント行以下に pod 'ReactNativeWebRTCKit' が追加されません。

以下に例を示します:

# 相対パスを指定します。
react_native_webrtc_kit_path = '../../..'

target 'MyApp' do
  pod 'yoga', path: "#{node_modules_path}/react-native/ReactCommon/yoga/yoga.podspec"
  pod 'React', path: "#{node_modules_path}/react-native"

  # 本ライブラリを追加します。
  pod 'ReactNativeWebRTCKit', :path => "#{react_native_webrtc_kit_path}"

  # Add new pods below this line
  # すでに本ライブラリを記述しているため、
  # "react-native link" を実行しても ``pod 'ReactNativeWebRTCKit'`` は追記されません。
end

Podfile に明示的に本ライブラリを追加しなければならない理由は、 CocoaPods がシンボリックリンクを解決できないからです。 package.json で相対パスを指定して react-native link を実行すると、 node_modules/react-native-webrtc-kit にローカルリポジトリへのシンボリックリンクが作成され、 Podfile にはシンボリックリンクへのパスを指定した本ライブラリが追記されます:

# Add new pods below this line
# '../node_modules/react-native-webrtc-kit' はシンボリックリンク
pod 'ReactNativeWebRTCKit', :path => '../node_modules/react-native-webrtc-kit'

しかし、 CocoaPods はシンボリックリンクを解決できないため、実際のローカルリポジトリを参照できません。 そのため、本ライブラリについてはローカルリポジトリへのパスを明示的に指定する必要があります。