-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #229 from ant-media/addReactNativeSection
Refactor React Native SDK Documentation and add missing guides
- Loading branch information
Showing
12 changed files
with
495 additions
and
335 deletions.
There are no files selected for viewing
335 changes: 0 additions & 335 deletions
335
docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk.md
This file was deleted.
Oops, something went wrong.
8 changes: 8 additions & 0 deletions
8
docs/guides/developer-sdk-and-api/sdk-integration/react-native-sdk/_category_.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "label": "React Native SDK", | ||
| "position": 15, | ||
| "link": { | ||
| "type": "generated-index", | ||
| "description": "Ant Media Server React Native SDK Integration." | ||
| } | ||
| } |
36 changes: 36 additions & 0 deletions
36
...r-sdk-and-api/sdk-integration/react-native-sdk/download-react-native-samples.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| --- | ||
| title: Download and install React Native WebRTC sample projects | ||
| description: Download and install React Native WebRTC sample projects | ||
| keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] | ||
| sidebar_position: 3 | ||
| --- | ||
|
|
||
| Ant Media WebRTC React Native samples are free to download. You can access them through this [link on Github](https://github.com/ant-media/WebRTC-React-Native-SDK). | ||
|
|
||
| After downloading the whole project, you can see all samples of the React Native project in the `samples` folder. | ||
|
|
||
|
|
||
|  | ||
|
|
||
|
|
||
| ### Install dependencies | ||
|
|
||
| For installing dependencies, you can use **npm** or as an alternative method, you can also use **yarn**. | ||
|
|
||
| Install **yarn** by [following this link.](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable) | ||
|
|
||
| :::info | ||
| If you want to use **npm**, then follow only npm commands, and if you want to use **yarn**, then follow only yarn commands. | ||
| ::: | ||
|
|
||
| First, you need to open the root directory of the sample project in the terminal that you want to build. | ||
|
|
||
| To install dependencies, run | ||
|
|
||
| ```npm install``` or ```yarn install``` | ||
|
|
||
| After dependencies are installed, you need to run the below commands in order to run the project. | ||
|
|
||
| `npm run android` or ```yarn android``` | ||
|
|
||
| After the project starts successfully, a sample app will appear on the device/emulator. |
31 changes: 31 additions & 0 deletions
31
...-sdk-and-api/sdk-integration/react-native-sdk/react-native-conference-sample.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| --- | ||
| title: WebRTC Conference in React Native | ||
| description: WebRTC Conference Using React Native SDK | ||
| keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] | ||
| sidebar_position: 7 | ||
| --- | ||
|
|
||
| * Open the **/samples/Conference/src/Conference.tsx** file and update the **defaultRoomName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. | ||
|
|
||
|  | ||
|
|
||
| * Open the **/samples/Conference/android** folder and provide read, write, and execute permissions to the **gradlew** file. | ||
|
|
||
| ```shell | ||
| chmod 750 gradlew | ||
| ``` | ||
|
|
||
| * Go to the **/samples/Conference** folder and run the below commands to run the **Conference** sample React native app. | ||
|
|
||
| ```shell | ||
| npm install | ||
| npm run android | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| * When there are other streams connected to the same roomId via Android, iOS, or the Web, then a conference room will be established and users can communicate with each other. | ||
|
|
||
| You can quickly join the conference room via the conference sample page. | ||
|
|
||
| `https://your-domain:5443/WebRTCAppEE/conference.html` |
35 changes: 35 additions & 0 deletions
35
...dk-and-api/sdk-integration/react-native-sdk/react-native-data-channel-sample.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| --- | ||
| title: Data Channel Sample for React Native | ||
| description: Data Channel Sample for React Native SDK | ||
| keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] | ||
| sidebar_position: 8 | ||
| --- | ||
|
|
||
| * Open the **/samples/DataChannel/src/Chat.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. | ||
|
|
||
|  | ||
|
|
||
| * Open the **/samples/DataChannel/Android** folder and provide read, write, and execute permissions to the **gradlew** file. | ||
|
|
||
| ```shell | ||
| chmod 750 gradlew | ||
| ``` | ||
|
|
||
| * Go to the **/samples/DataChannel** folder and run the below commands to run the **DataChannel** sample React native app. | ||
|
|
||
| ```shell | ||
| npm install | ||
| npm run android | ||
| ``` | ||
|
|
||
| * Click the `Publishing` button on the screen to create the data channel stream on the server. | ||
|
|
||
|  | ||
|
|
||
| * Once the stream is published, the user can start sending messages using the send button and also see the received messages from other users. | ||
|
|
||
|  | ||
|
|
||
| You can quickly play the stream via a sample page and send and receive the data channel messages. | ||
|
|
||
| https://your-domain:5443/WebRTCAppEE/player.html |
31 changes: 31 additions & 0 deletions
31
...veloper-sdk-and-api/sdk-integration/react-native-sdk/react-native-p2p-sample.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| --- | ||
| title: P2P Communication Sample in React Native | ||
| description: P2P Communication Sample Using React Native SDK | ||
| keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] | ||
| sidebar_position: 6 | ||
| --- | ||
|
|
||
| * Open the **/samples/peer/src/Peer.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. | ||
|
|
||
|  | ||
|
|
||
| * Open the **/samples/peer/android** folder and provide read, write, and execute permissions to the **gradlew** file. | ||
|
|
||
| ```shell | ||
| chmod 750 gradlew | ||
| ``` | ||
|
|
||
| * Go to the **/samples/peer** folder and run the below commands to run the **Publish** sample React native app. | ||
|
|
||
| ```shell | ||
| npm install | ||
| npm run android | ||
| ``` | ||
|
|
||
|  | ||
|
|
||
| * When there is another peer connected to the same streamId via Android, iOS, or the web, P2P communication will be established, and you can talk to each other. | ||
|
|
||
| You can quickly join as a peer to the same streamId via the peer-to-peer sample page. | ||
|
|
||
| `https://your_domain:5443/WebRTCAppEE/peer.html` |
31 changes: 31 additions & 0 deletions
31
...eloper-sdk-and-api/sdk-integration/react-native-sdk/react-native-play-sample.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| --- | ||
| title: Playing WebRTC stream sample in React Native | ||
| description: Playing WebRTC Live Stream Sample Using React Native SDK | ||
| keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] | ||
| sidebar_position: 5 | ||
| --- | ||
|
|
||
| * Open the **/samples/play/src/Play.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with the server domain or IP address. | ||
|
|
||
|  | ||
|
|
||
| * Open the **/samples/play/android** folder and provide read, write, and execute permissions to the **gradlew** file. | ||
|
|
||
| ```shell | ||
| chmod 750 gradlew | ||
| ``` | ||
|
|
||
| * Go to the **/samples/play** folder and run the below commands to run the **Play** sample React native app. | ||
|
|
||
| ```shell | ||
| npm install | ||
| npm run android | ||
| ``` | ||
|
|
||
| * Before playing, make sure that there is a stream that is already published to the server with the same streamId in your **defaultStreamName** variable. You can quickly publish a WebRTC stream to the Ant Media Server via a sample page. | ||
|
|
||
| `https://your_domain:5443/WebRTCAppEE` | ||
|
|
||
| * Click the `Start Playing` button on the screen to play the stream that you are publishing on the server. | ||
|
|
||
|  |
74 changes: 74 additions & 0 deletions
74
...oper-sdk-and-api/sdk-integration/react-native-sdk/react-native-pre-requisite.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| --- | ||
| title: Pre-Requisite for React Native development | ||
| description: Pre-Requisite for React Native development | ||
| keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] | ||
| sidebar_position: 2 | ||
| --- | ||
|
|
||
| ### Software requirements | ||
|
|
||
| * Android Studio (IDE) | ||
| * Android SDK | ||
| * Java | ||
| * NodeJs | ||
| * NPM | ||
| * React Native CLI | ||
|
|
||
| First of all, you’re required to install the node on your system. If your machine already has Node.js installed, then skip this step. | ||
|
|
||
| ### Node.js Installation | ||
|
|
||
| .png) | ||
|
|
||
| Download the latest Node.js from here: [nodejs.org/en](http://nodejs.org/en). | ||
|
|
||
| Once the setup is downloaded on your system, run the .msi downloaded file and follow the prompt instructions to install the application. | ||
|
|
||
| Furthermore, make ascertain that the Node and NPM have been installed. | ||
|
|
||
| Use the below commands to check the version: | ||
|
|
||
| ```shell | ||
| node -v | ||
| ``` | ||
| ```shell | ||
| npm –v | ||
| ``` | ||
|
|
||
| ### React Native | ||
|
|
||
| Use the below command to install React Native CLI. | ||
|
|
||
| ```shell | ||
| npm install -g react-native-cli | ||
| ``` | ||
|
|
||
| ### Android Development Environment | ||
|
|
||
| Download & Install the Android Studio [https://developer.android.com/studio/install.html](https://developer.android.com/studio/install.html) | ||
|
|
||
| .png) | ||
|
|
||
| The Android Studio lets you run the Reactive Native application in an emulator and test the application. | ||
|
|
||
| ### Verify React Native Installation By running a sample app | ||
|
|
||
| We’ll be building a project using React Native by running the following command: | ||
|
|
||
| ```shell | ||
| react-native init MySampleApp | ||
| ``` | ||
|
|
||
| Now, run below commands in the terminal from the folder where you have created the application. | ||
|
|
||
| ```shell | ||
| react-native start | ||
| ``` | ||
|
|
||
| ```shell | ||
| react-native run-android | ||
| ``` | ||
|
|
||
| Make sure you’ve started the emulator on your machine. This is what the sample project will look like in the emulator: | ||
|
|
||
| .png) |
33 changes: 33 additions & 0 deletions
33
...per-sdk-and-api/sdk-integration/react-native-sdk/react-native-publish-sample.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| --- | ||
| title: Publishing WebRTC stream Sample in React Native | ||
| description: Publishing WebRTC Live stream Using React Native SDK | ||
| keywords: [React Native SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials] | ||
| sidebar_position: 4 | ||
| --- | ||
|
|
||
| To build the publishing sample project, follow the below steps. | ||
|
|
||
| * Open the **/samples/publish/src/App.tsx** file and update the **defaultStreamName** variable for streamId and the **webSocketUrl** variable with your server domain or IP address. | ||
|
|
||
|  | ||
|
|
||
| * Open the **/samples/publish/android** folder and provide read, write, and execute permissions to the **gradlew** file. | ||
|
|
||
| ```shell | ||
| chmod 750 gradlew | ||
| ``` | ||
|
|
||
| * Move to the **/samples/publish** folder and run the below commands to run the **Publish** sample React native app. | ||
|
|
||
| ```shell | ||
| npm install | ||
| npm run android | ||
| ``` | ||
|
|
||
| * Click the `Start Publishing` button on the screen to publish the stream on the server. | ||
|
|
||
|  | ||
|
|
||
| * You can now go to the web panel of Ant Media Server (e.g., http://serverIP:5080) and watch the stream there. | ||
|
|
||
| You can also quickly play the stream via an embedded player. Check [this document](https://antmedia.io/docs/guides/playing-live-stream/embedded-web-player/) for more details. |
Oops, something went wrong.