Merge pull request #142 from millicast/feature/update-react-native-we…

…brtc-m118

Update to use react native webrtc with webrtc version m118

.eslintrc.js

@@ -1,7 +1,15 @@
+/* eslint no-undef: "off" */
+
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['airbnb', 'eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  extends: [
+    'airbnb',
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+    '@react-native',
+  ],
   plugins: ['@typescript-eslint', 'prettier'],
   settings: {
     'import/resolver': {

.gitignore

@@ -20,7 +20,7 @@ DerivedData
 *.hmap
 *.ipa
 *.xcuserstate
-ios/.xcode.env.local
+**/.xcode.env.local
 
 # Android/IntelliJ
 #
@@ -30,6 +30,9 @@ build/
 local.properties
 *.iml
 *.hprof
+.cxx/
+*.keystore
+!debug.keystore
 
 # node.js
 #
@@ -59,9 +62,22 @@ buck-out/
 *.jsbundle
 
 # Ruby / CocoaPods
-/ios/Pods/
+**/Pods/
 
 /ios/libWebRTC/
 
 /vendor/bundle/
-.env
+.env 
+# Temporary files created by Metro to check the health of the file watcher
+.metro-health-check*
+
+# testing
+/coverage
+
+# Yarn
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions

.prettierrc.js

@@ -1,3 +1,5 @@
+/* eslint no-undef: "off" */
+
 module.exports = {
   singleQuote: true,
   trailingComma: 'all',

README.md

@@ -7,18 +7,16 @@
     <img src="./assets/AndroidTVMultiview.png" style="width: auto; height: 150px; margin: 0 10px;" />
 </div>
 
-
 ## Overview
-In this document we describe how to run a sample application for publishing and subscribing to a stream using Dolby credentials on mobile (Android and iOS) and TV (Android and tvOS) on emulators.
-
-| Use Case | Publish | Subscribe | Multiview | Tech Stack| 
-| -------- | -------- | --------- | --------- | --------- |
-| Android mobile |   &#x2713; |  &#x2713; |  &#x2713; | Java 11 SDK, Android Studio, Android emulator.
-| Android TV |   &#x2717; |  &#x2713; |  &#x2713; | Java 11 SDK, Android Studio, Android TV emulator.
-| iPhone |   &#x2713; |  &#x2713; |  &#x2713; | Xcode, WebRTC build for iOS.
-| tvOS |   &#x2717; |  &#x2713; |  &#x2713; | Xcode, WebRTC build for tvOS.
 
+In this document we describe how to run a sample application for publishing and subscribing to a stream using Dolby credentials on mobile (Android and iOS) and TV (Android and tvOS) on emulators.
 
+| Use Case       | Publish  | Subscribe | Multiview | Tech Stack                                        |
+| -------------- | -------- | --------- | --------- | ------------------------------------------------- |
+| Android mobile | &#x2713; | &#x2713;  | &#x2713;  | Java 11 SDK, Android Studio, Android emulator.    |
+| Android TV     | &#x2717; | &#x2713;  | &#x2713;  | Java 11 SDK, Android Studio, Android TV emulator. |
+| iPhone         | &#x2713; | &#x2713;  | &#x2713;  | Xcode, WebRTC build for iOS.                      |
+| tvOS           | &#x2717; | &#x2713;  | &#x2713;  | Xcode, WebRTC build for tvOS.                     |
 
 ## Requirements and supported platforms
 
@@ -30,24 +28,21 @@ So far, we have tested the app on the following emulators, having good results i
 - **Android mobile:** Pixel 6 Pro API 33 Tiramisu
 - **Apple TV:** Apple TV 4K (3rd generation) (at 1080p) tvOS 16.0 and above
 - **Apple mobile:** iPhone 13 Pro Max iOS 16.4
-- **Xcode** version 15.0
+- **Xcode** version 15.2
 - **Android Studio** Dolphin 2021.3.1 patch 1
 
 ### Environment Set Up
 
 - We recommend using `yarn`, if you don't have it installed execute:
-```
-npm install --global yarn
-```
 
-- For **iOS** and **tvOS** Git Large File Storage is needed, install it with
 ```
-brew install git-lfs
+npm install --global yarn
 ```
 
 - For **Android** platforms you will need `Java SDK 11` and Android Studio installed.
 
 - Add a `.env` file in current path. You can find the following example in `.env.sample`:
+
 ```sh
 # Make a .env file with the following vars
 REACT_APP_MILLICAST_STREAM_NAME_VIEWER=yourStreamNameForViewer
@@ -65,50 +60,50 @@ REACT_APP_MILLICAST_PUBLISHING_TOKEN=yourPublishToken
 > **Note 1:** This is an open issue in [react-native-dotenv](https://github.com/goatandsheep/react-native-dotenv/issues/422) repository. This is one of the workarounds that works.
 
 > **Note 2:** A previously made change will probably keep the cached environment variables. If no new changes can be made, close Metro and re-run the app.
+
 ## Getting Started
 
 To get started with building this app, you will need a Dolby.io account.
 
 ### Pre-requisites
 
 - Dolby account
-- [Git LFS](https://docs.github.com/en/repositories/working-with-files/managing-large-files/installing-git-large-file-storage) installed
 - It is required to have Java SDK 11
 - Yarn installed
-- Xcode 15.1
+- Xcode 15.2
 - Android Studio Dolphin
-- iOS 16
-- tvOS 16
 - Android API 33
 - Ruby version 3.1 or higher
 - Bundler
 
 #### How to get a Dolby.io account
+
 To set up your [Dolby.io](https://dolby.io/) account, go to the [Dolby.io](https://dolby.io/) dashboard and complete the form. After confirming your email address, you will be logged in.
 If you did not receive a verification email, check your Spam or Junk email folders.
 
 #### Setting Up the Project in Android
 
 In case you want to run the app on Android, be sure to create a file `/android/local.properties` with the following content:
+
 ```
 sdk.dir = PATH_ANDROID_SDK
 ```
-Where `PATH_ANDROID_SDK` should be replaced by your Android SDK path.
 
+Where `PATH_ANDROID_SDK` should be replaced by your Android SDK path.
 
 ##### Setting Up an Emulator with Android Studio
 
 Following the guide above, you should already have your emulator up and running.
 
 From the Android Studio welcome page:
+
 1. Select the `More actions` drop-down menu.
 2. Select `Virtual Device Manager`.
 
 As shown in the image below:
 
 <img src="assets/virtualEmulator.png" alt="drawing" width="500"/>
 
-
 Be sure to give access to your computer camera and microphone in order to be able to use it for testing, otherwise the emulator will create a sample video simulating the camera usage.
 
 ##### Setting Up the Camera
@@ -134,14 +129,18 @@ The following steps are common for all Apple devices.
 2. `WebRTC.framework` is a required dependency for the iOS/tvOS apps. You can find it in `ios/libWebRTC.zip`. To download the zip file from Git LFS is needed to run the command `git lfs pull`.
 
 3. Install the dependencies:
+
 ```
 yarn
 ```
 
 4. Then, execute:
+
 ```
 cd ios && bundle install
 
+export GITHUB_PERSONAL_ACCESS_TOKEN=<ISSUED_PERSONAL_ACCESS_TOKEN>
+
 bundle exec pod install
 ```
 
@@ -169,11 +168,13 @@ The following steps are common for all Android devices.
 
 1. Clone this repository.
 2. To install dependencies, run:
+
 ```
 yarn
 ```
 
 3. Inside the `android` directory, create a file called `local.properties` which only content should be the path of the Java SDK directory, this should look like this:
+
 ```
 sdk.dir = /../Android/sdk
 ```
@@ -183,6 +184,7 @@ This varies from OS to OS, so make sure to put the right path.
 4. If you want to run it on an emulator, make sure to have installed one on Android Studio (mobile or TV). To do this go to: `Android Studio -> More Actions -> Virtual Device Manager -> Create device`. In case you want to run it on a real Android device, just plug it in through USB. Make sure you have already upgraded the device to 'developer mode'.
 
 5. Open and run the simulator and then execute the application from the terminal:
+
 ```
 yarn run android
 ```
@@ -197,50 +199,14 @@ You should have an Android TV/mobile simulator on Android Studio.
 ## Troubleshooting
 
 ### WebRTC related errors during runtime
+
 If you have any issues related to WebRTC, and you already used this app it maybe due to an outdated node module. Follow this steps:
+
 1. Delete `node_modules` directory.
 2. Run `yarn cache clean`.
 3. Re install dependencies with `yarn` command.
 4. Continue with [Getting Started](#getting-started).
 
-### Framework not found WebRTC
-Check inside the TestApp or TestApp-tvOS project (depending on which platform do you want to run the application) go to `General -> Framework, Libraries, and Embedded Content` and look for WebRTC.framework. You should to confirm that you are using the proper framework for the platform and it should be with `Embed && Sign` option.
-
-If you are still having the error, maybe is because the project has an old link to another platform framework, go to `Build Settings -> Search Paths` and inside `Frameworks Search Paths` remove the path of the other framework platform. Do the same thing for `Header Search Paths` and leave only the path to the correct WebRTC framework where do you want to run the application.
-
-### react-native-webrtc-tvOS or react-native-webrtc-iOS WebRTC.h not found error
-
-![WebRTC local reference not found](assets/WebRTC-ReferenceNotFoundError.png)
-
-The Pods target has an incorrect Framework Path configured in Search Paths inside the Build Settings page. 
-
-### No Bundle URL present
-
-![No Bundle URL present](assets/NoBundleURLFoundError.png) 
-
-You should stop the running instances of the application and from Xcode menu go to `Product -> Clean build folder`.
-
-Also you can go to `Xcode -> Settings -> Locations`. Click on the arrow next to `Derived Data` path and this will open on Finder `Derived Data` folder, you can delete the cached files.
-
-If the error persists, you should check your localhost port and make sure that the app is using port 8081, and for this purpose, that port should be available.
-
-To fix this error shown when `pod install` is executed:
-
-```
-[!] The platform of the target `TestApp-tvOS` (tvOS 16.0) is not compatible with `JitsiWebRTC (111.0.2)`, which does not support `tvOS`.
-```
-
-You should go to `node_modules -> react-native-webrtc -> react-native-webrtc.podspec` and comment this line:
-
-```
-s.dependency          'JitsiWebRTC', '~> 111.0.0'
-```
-
-We are using a local dependency of WebRTC that supports tvOS.
-
-## Compatibility/Requirements
-
-It is used a specific version of React Native because of the need for compatibility between `react-native-tvos` and `react-native-webrtc`.
-
 ## License
+
 Please refer to [LICENSE](https://github.com/millicast/streaming-sdk-react-native-getting-started/blob/main/LICENSE) file.