Merge pull request #249 from ant-media/addFlutterSection

Refactor Flutter Section

docs/guides/developer-sdk-and-api/sdk-integration/android-sdk/_category_.json

@@ -1,6 +1,6 @@
 {
   "label": "Android SDK",
-  "position": 14,
+  "position": 1,
   "link": {
     "type": "generated-index",
     "description": "Ant Media Server Android SDK Integration."

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/_category_.json

@@ -0,0 +1,8 @@
+{
+  "label": "Flutter SDK",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "description": "Ant Media Server Flutter SDK Integration."
+  }
+}

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/download-flutter-samples.md

@@ -0,0 +1,47 @@
+---
+title: Download and install Flutter WebRTC sample projects
+description: Download and install Flutter WebRTC sample projects 
+keywords: [Flutter SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 3
+---
+
+WebRTC Flutter samples are free to download. You can download/clone them via [Flutter SDK Github repository](https://github.com/ant-media/WebRTC-Flutter-SDK/).
+
+Open SDK in Android Studio, and make sure you have installed the Flutter and Dart plugins. 
+
+Make sure that the paths of Flutter and Dart SDK are correctly configured in the Android Studio Language and Frameworks settings, as shown below.
+
+**Open Settings > Languages & Frameworks**
+
+![](@site/static/img/sdk-integration/flutter-sdk/dart-package-settings.png)
+
+If these plugins have been installed and the locations of Flutter and Dart SDK are configured correctly, then the options to run the samples will appear automatically after source code indexing. Please refer to the below screenshot.
+
+![](@site/static/img/sdk-integration/flutter-sdk/comapile-and-run-sample.png)
+
+### Install dependencies and run sample project
+
+In the project navigator, you will find a folder named `examples`. In the example folder, there is a `SampleProject` that uses the ant_media_flutter dependency with all options (Publish, Play, P2P Conference and DataChannel) to test. 
+
+In the same examples folder, there are separate projects to test Publish, Play, Peer, Conference and DataChannel individually.
+
+All projects use [Ant Media Flutter](https://pub.dev/packages/ant_media_flutter ) dependency, which is added to the **pubspec.yaml** file. 
+
+Click on the **Pub get** button to install the dependency in the project. Pub get button appears only when **pubspec.yaml** file is opened in the editor.
+
+### Run the WebRTC Flutter sample apps
+
+To run the sample apps on Android, you need to connect the Android device with your workstation. For that, make sure you have enabled the developer options and USB debugging on your device. On Android 4.1 and lower, the Developer options screen is available by default. To get the developer options screen on Android 4.2 and higher, follow the below steps:
+
+*   Open the Settings app
+*   Select System
+*   Select About phone
+*   Scroll to the build number and tap it 7 times
+*   Return to the previous screen to find Developer options near the bottom
+*   Scroll down and enable USB debugging
+
+If USB debugging is enabled on your device, then your device name will automatically be available in the list of devices.
+
+Just select the device, select the sample project from the target list and click on the run button. The Gradle task will start and wait for some time until the app builds. After the building is complete, a confirmation popup will appear to your device for installation.
+
+![](@site/static/img/sdk-integration/flutter-sdk/device-and-sample-list.png)

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/flutter-conference-sample.md

@@ -0,0 +1,28 @@
+---
+title: WebRTC Conference in Flutter
+description: WebRTC Conference Using Flutter SDK 
+keywords: [Flutter SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 7
+---
+
+In order to run the Conference sample app, select the `Conference` application from the target list and click the Run button. Once the app is installed and running on your device, enter the server IP address. To enter the IP address, please follow the below steps.
+
+* Tap on the Setting icon in the top right corner of the application.
+* Enter the Server IP as          `ws://ant_media_server_address:Port/WebRTCAppEE/websocket`
+* Click **Set Server Ip** button to save it.
+
+![](@site/static/img/IMG_7404B1521BFA-1.jpeg)
+
+ - Select Conference from list item.
+
+![](https://lh3.googleusercontent.com/UV-_SAwEqBhU6IvWj3yWLd9rqAyNbVVlVktP-609CbjxtSjg4-ssoAK8Qvom8HLTOoRovoMIbl_Ae-HH7mdb30B_3tideWT-d6fx2nl7IB5LsX3oSbTFhOPIYLAIck0aLOvyqoLWObNrDilOkA )
+
+ - Enter the streamId, and roomId of the conference room that you want to join.
+
+![stream and room id.jpeg ](https://lh6.googleusercontent.com/AGwDbjsjQmCX9BNcKNGVHSliJ6V0IFxTyhihca7xK0M7uyllrLuT0Frglzfp1l6v1OZIZeMsHSi7Fh4FNKiT-eyCST5nI3YLJuQzQi4a-X_b1W96LNJRPCR3q_VihaAOePu3dGFwePLKeyW5-A )
+
+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`

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/flutter-data-channel-sample.md

@@ -0,0 +1,34 @@
+---
+title: Data Channel Sample for Flutter
+description: Data Channel Sample for Flutter SDK 
+keywords: [Flutter SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 8
+---
+
+In order to run the data channel sample app, select the `DataChannel` application from the target list and click the Run button. Once the app is installed and running on your device, enter the server IP address. To enter the IP address, please follow the below steps.
+
+* Tap on the Setting icon in the top right corner of the application.
+* Enter the Server IP as          `wss://ant_media_server_address:5443/WebRTCAppEE/websocket`
+* Click **Set Server Ip** button to save it.
+
+![](@site/static/img/IMG_A2C7D0611FF7-1.jpeg)
+
+ - Select DataChannel from list item.
+
+ ![](@site/static/img/IMG_634E4AB6B820-1.jpeg)
+
+ - Enter the stream Id which you want to publish for the data channel.
+
+![](@site/static/img/IMG_E70F9A26E9DD-1.jpeg)
+
+ - After entering the streamId following type of chat screen will
+   appear.
+
+![](@site/static/img/IMG_2600ABC725B1-1.jpeg)
+
+
+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

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/flutter-p2p-sample.md

@@ -0,0 +1,28 @@
+---
+title: P2P Communication Sample in Flutter
+description: P2P Communication Sample Using Flutter SDK 
+keywords: [Flutter SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 6
+---
+
+In order to run the peer sample app, select the `Peer` application from the target list and click the Run button. Once the app is installed and running on your device, enter the server IP address. To enter the IP address, please follow the below steps.
+
+* Tap on the Setting icon in the top right corner of the application.
+* Enter the Server IP as          `ws://ant_media_server_address:Port/WebRTCAppEE/websocket`
+* Click **Set Server Ip** button to save it.
+
+![](@site/static/img/IMG_61C65FD7D641-1.jpeg)
+
+ - Select P2P from the list item.
+
+![](https://lh5.googleusercontent.com/n47OOeKbuiLx-xrAObZYkT1B0lx-2-Dkcxwgqri9pr9zfKK4u1RfeADusJwxR11MOcyly-pwiIxF8dBWmqY1I_QNcokHiazCgphUQxyW015Vi6OYT6Qpf6ONjsV3hdP0FZ2RuN0rZYy7XS4b4w )
+
+ - Enter the streamId that you want to join in  mode.
+
+![](https://lh3.googleusercontent.com/v7SfoBnIbnS-mexwFN6NbHapQQGeEWFYkJGkAL24ww6vi9iJ4SbTdIwcmKUxeXpLjkY2xuwlwe5A5y_T6oWqci1pAZVIgnVQUPm59TYV_HCwro6LVFgZSrGorQI3UyxILwpIPXX1YYY1wnMAVg )
+
+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`

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/flutter-play-sample.md

@@ -0,0 +1,26 @@
+---
+title: Playing WebRTC stream sample in Flutter
+description: Playing WebRTC Live Stream Sample Using Flutter SDK 
+keywords: [Flutter SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 5
+---
+
+In order to run the play sample app, select the `Play` application from the target list and click the Run button. Once the app is installed and running on your device, enter the server IP address. To enter the IP address, please follow the below steps.
+
+* Tap on the Setting icon in the top right corner of the application.
+* Enter the Server IP as         `ws://ant_media_server_address:Port/WebRTCAppEE/websocket`
+* Click **Set Server Ip** button to save it.
+
+![](@site/static/img/IMG_02A254033728-1(1).jpeg)
+
+Before playing, make sure that there is a stream that is already publishing to the server with the same streamId that you want to play. You can quickly publish a WebRTC stream to the Ant Media Server via a sample page.
+
+`https://your_domain:5443/WebRTCAppEE`
+
+ - Select Play from the list item.
+
+![](@site/static/img/image-1654688010762.png)
+
+ - Enter the stream Id which you want to play.
+
+![](@site/static/img/image-1654688079112.png)

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/flutter-pre-requisite.md

@@ -0,0 +1,47 @@
+---
+title: Pre-Requisite for Flutter development
+description: Pre-Requisite for Flutter development 
+keywords: [Flutter SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 2
+---
+
+### Software requirements
+
+*   Flutter
+*   Dart
+*   Android Studio (For Android)
+*   XCode (For iOS)
+
+:::info
+You can also run the projects through the terminal or command line; however, for better debugging, consider using Android Studio or XCode. This document considers the use of Android Studio for building and running applications.
+:::
+
+### Flutter & Dart Installation
+
+You can follow [Flutter official documentation](https://docs.flutter.dev/get-started/install?gclid=Cj0KCQjwg_iTBhDrARIsAD3Ib5jaxKUnDo7Vc2XMY1sZSPRPkt1CRsb-ALyYuUMFrrnalhPkrIlTLaIaAvcbEALw_wcB&gclsrc=aw.ds) to be able to install Flutter Software Development Kit and Dart Programming Language.
+
+### Android Studio
+
+Install the Android Studio, please follow the installation steps mentioned here [Install Android Studio](https://developer.android.com/studio/install.html). 
+
+Add the Dart language plugins and Flutter extensions to Android Studio. Please follow below operating system specific installation instructions.
+
+1. For macOS, use the following instructions:
+
+ - Start Android Studio
+ - Open plugin preferences (Preferences >` Plugins as of v3.6.3.0 or later)
+ - Select the Flutter plugin and click Install
+ - Click Yes when prompted to install the Dart plugin
+ - Click Restart when prompted
+
+2. For Linux or Windows, use the following instructions:
+
+ - Start Android Studio
+ - Open Plugins
+ - Select Marketplace, select the Flutter plugin and click Install
+ - Click Yes when prompted to install the Dart plugin
+ - Click Restart when prompted
+
+### Verify Installation
+
+To verify the Flutter installation, please create and sample an app and build it by following the instructions provided here [Create a Flutter project](https://docs.flutter.dev/get-started/codelab).

docs/guides/developer-sdk-and-api/sdk-integration/flutter-sdk/flutter-publish-sample.md

@@ -0,0 +1,30 @@
+---
+title: Publishing WebRTC stream Sample in Flutter
+description: Publishing WebRTC Live stream Using Flutter SDK 
+keywords: [Flutter SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 4
+---
+
+In order to run the publish sample app, select the `Publish` application from the target list and click the Run button. Once the app is installed and running on your device, enter the server IP address. To enter the IP address, please follow the below steps.
+
+* Tap on the Setting icon in the top right corner of the application.
+* Enter the Server IP as          `ws://ant_media_server_address:Port/WebRTCAppEE/websocket`
+* Click **Set Server Ip** button to save it.
+
+![](@site/static/img/IMG_F1372DF3182B-1(2).jpeg)
+
+ - Select Publish list item.
+
+![](@site/static/img/image-1654687508699.png)  
+
+ - Enter the streamId which you want to publish.
+
+![](@site/static/img/image-1654687625473.png) 
+
+Choose the publishing source. Please note, for the iOS, app screen recording option records the app's UI only, while the Android app records the whole complete device screen.
+
+![](@site/static/img/image-1654687706637.png)
+
+To verify whether the stream is published successfully or not,  open the web panel of your Ant Media Server (e.g http://server_ip:5080) and view 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.