Add JavaScript SDK documentation

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

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

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

@@ -0,0 +1,37 @@
+---
+title: Download and install WebRTC sample projects
+description: Download and install WebRTC sample projects 
+keywords: [JavaScript SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 3
+---
+
+WebRTC samples are free to download. You can download/clone them via [StreamApp Github repository](https://github.com/ant-media/StreamApp).
+
+Open the project in Visual Studio Code, and make sure you have installed the `Node.js` and `NPM`. 
+
+
+### Install dependencies
+
+Open Terminal and run **npm install** to be able to install the dependencies.
+
+![](@site/static/img/sdk-integration/javascript-sdk/install-dependencies.png)
+
+### Run sample project
+
+In the project navigator, you will find a folder named `webapps` inside the `src/main` path. Inside this folder, there are a couple of sample HTML files that use the Ant Media Server's JavaScript SDK to test. 
+
+All projects use [@antmedia/webrtc_adaptor](https://www.npmjs.com/package/@antmedia/webrtc_adaptor) dependency.
+
+To run the sample apps, you need to run the HTTP server inside `webapps` folder. 
+
+![](@site/static/img/sdk-integration/javascript-sdk/run-http-server.png)
+
+Before proceeding further, to make the samples work locally, move or copy the `js` folder under `/src/main` folder to `webapps` folder.
+
+After moving the `js` folder, in some samples like webrtc publish and play of this document, the `loglevel.min.js` file is importing but it is under the external folder inside the `js` folder so change the path of the file in the sample as below:
+
+```js
+import  "../js/external/loglevel.min.js";
+```
+
+After that, your samples should work fine.

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

@@ -0,0 +1,26 @@
+---
+title: Pre-Requisite for Web Application development
+description: Pre-requisite for Web Application development 
+keywords: [JavaScript SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 2
+---
+
+## Software requirements
+
+*   Ant Media Server Enterprise Edition
+*   Node.js
+*   NPM
+*   IDE
+*   HTTP Server
+
+### Node.js & NPM Installation
+
+You can follow [Node.js's official documentation](https://nodejs.org/en/learn/getting-started/how-to-install-nodejs) to be able to install the Node.js and NPM.
+
+### IDE
+
+You can use your favorite IDE. We will use the Visual Studio Code for the rest of the documentation. To be able to install the Visual Studio Code, please follow the installation steps mentioned here [Install Visual Studio Code](https://code.visualstudio.com/docs/setup/setup-overview).
+
+### HTTP Server
+
+You can use any HTTP server. We will use Python's built-in HTTP server for the rest of the documentation. To be able to install Python, please follow the installation steps mentioned here [Install Python](https://www.python.org/downloads/).

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

@@ -0,0 +1,24 @@
+---
+title: P2P Communication Sample
+description: P2P Communication Sample Using JavaScript SDK 
+keywords: [JavaScript SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 6
+---
+
+In order to test the peer-to-peer sample, let's open the `peer.html` file. Go to the definition of **websocketURL** variable and set your Ant Media Server EE WebSocket URL as shown below.
+
+![](@site/static/img/sdk-integration/javascript-sdk/edit-websocket-url-peer-sample.png)
+
+ - Open your browser and go to your HTTP server's address.
+
+ - Accept microphone and camera usage permissions.
+
+![](@site/static/img/sdk-integration/javascript-sdk/accept-mic-cam-permissions-peer.png)
+
+ - Enter the `streamId` that you want to join and click the **Join** button.
+
+![](@site/static/img/sdk-integration/javascript-sdk/peer-sample.png)
+
+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 another peer to the same streamId by opening the same URL in the second tab.

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

@@ -0,0 +1,18 @@
+---
+title: Playing WebRTC stream sample
+description: Playing WebRTC Live Stream Sample Using JavaScript SDK 
+keywords: [JavaScript SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 5
+---
+
+In order to test the publish sample, let's open `player.html`. Go to the definition of **websocketURL** variable and set your Ant Media Server WebSocket URL.
+
+![](@site/static/img/sdk-integration/javascript-sdk/edit-websocket-url-play-sample.png)
+
+Before playing, make sure that there is a stream that is already publishing to the server with the same stream ID that you want to play. You can quickly publish a WebRTC stream using the sample page in the publish sample.
+
+ - Open your browser and go to your HTTP server's address. Go to the `player.html` path.
+
+ - Enter the stream ID that you want to play.
+
+![](@site/static/img/sdk-integration/javascript-sdk/play-sample.png)

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

@@ -0,0 +1,24 @@
+---
+title: Publishing WebRTC stream Sample
+description: Publishing WebRTC Live stream Using JavaScript SDK 
+keywords: [JavaScript SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 4
+---
+
+In order to test the publish sample, let's open the `publish_webrtc.html` file inside the samples folder. Go to the definition of **websocketURL** variable and set your Ant Media Server WebSocket URL.
+
+![](@site/static/img/sdk-integration/javascript-sdk/edit-websocket-url-publish-sample.png)
+
+ - Open your favorite browser and go to your HTTP server's address.
+
+ - Accept microphone and camera usage permissions.
+
+![](@site/static/img/sdk-integration/javascript-sdk/accept-mic-cam-permissions-publish.png)
+
+ - Click publish button.
+
+![](@site/static/img/sdk-integration/javascript-sdk/publish-sample.png)
+
+To verify whether the stream is published successfully or not,  open the web panel of your Ant Media Server 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.

docs/guides/developer-sdk-and-api/sdk-integration/javascript-sdk.md → docs/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/javascript-sdk-usage.md

@@ -1,37 +1,87 @@
 ---
-title: JavaScript SDK
-description: Ant Media Server provides a WebSocket interface in publishing and playing WebRTC streams. In this document, you will learn the basics of WebRTC JavaScript SDK and JavaScript Error Callbacks.
-keywords: [JavaScript SDK, WebRTC JavaScript SDK, JavaScript Error Callbacks, Ant Media Server Documentation, Ant Media Server Tutorials]
-sidebar_position: 3
+title: JavaScript SDK Usage
+description: JavaScript SDK Usage 
+keywords: [JavaScript SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 8
 ---
 
-Ant Media Server provides a WebSocket interface in publishing and playing WebRTC streams. In this document, you will learn the basics of WebRTC JavaScript SDK and JavaScript Error Callbacks.
+Before moving forward with using WebRTC JavaScript SDK, we highly recommend using the sample project to get started with your application. It's good to know the dependencies and how it works in general.
+
+### Install @antmedia/webrtc_adaptor package from **[npm.js](https://www.npmjs.com/package/@antmedia/webrtc_adaptor)**
+
+    ```npm install @antmedia/webrtc_adaptor```
+
+    or 
+
+    ```yarn add @antmedia/webrtc_adaptor```
+
+**Imports and initialise the WebRTCAdaptor from JavaScript-SDK**
+
+```
+    import { WebRTCAdaptor } from '@antmedia/webrtc_adaptor';
+
+    const webRTCAdaptor = new WebRTCAdaptor({
+      websocket_url: "wss://your-domain.tld:5443/WebRTCAppEE/websocket",
+      mediaConstraints: {
+          video: true,
+          audio: true,
+      },
+      peerconnection_config: {
+          'iceServers': [{'urls': 'stun:stun1.l.google.com:19302'}]
+      },
+      sdp_constraints: {
+          OfferToReceiveAudio : false,
+          OfferToReceiveVideo : false,
+      },
+      localVideoId: "id-of-video-element", // <video id="id-of-video-element" autoplay muted></video>
+      bandwidth: int|string, // default is 900 kbps, string can be 'unlimited'
+      dataChannelEnabled: true|false, // enable or disable data channel
+      callback: (info, obj) => {}, // check info callbacks bellow
+      callbackError: function(error, message) {}, // check error callbacks bellow
+    });
+```
+
+In another part of your script:
+
+**Publish**
+
+```
+    // You can start streaming by calling the publish method
+    webRTCAdaptor.publish(streamId);
+```
+
+**Play**
+
+```
+    // You can start playing the stream by calling the play method
+    webRTCAdaptor.play(streamId);
+```
+
+### Tutorial for Creating Publish and Play Page using JS SDK
+
+- [publish page creation using JS SDK](https://antmedia.io/docs/guides/developing-antmedia-server/webrtc-publish-page-creation-tutorial/)
+
+- [play page creation using JS SDK](https://antmedia.io/docs/guides/developing-antmedia-server/webrtc-play-page-creation-tutorial/)
 
 ## WebRTCAdaptor methods
 
 ```WebRTCAdaptor``` object has the following methods:
 
-*   ```getUserMedia(mediaConstraints, audioConstraint)```: It's called to get access to audio and video sources in the browser.
-*   ```openScreen(audioConstraint, openCamera)```: It's called to access the screen sharing session.
-*   ```openStream(mediaConstraints)```: It's called to open screen, camera or audio resources.
-*   ```closeStream(streamId)```: It's called to close streams. If you want to stop peer connection, call stop(streamId).
-*   ```checkExtension()```: It's called to check chrome screen share extension is available. If exists it call callback with "screen\_share\_extension\_available".
-*   ```enableMicInMixedAudio(enable)```: It's called enable Microphone in Mixed Audio.
-*   ```publish(streamId, token)```: It's called to publish stream.
-*   ```joinRoom(roomName, streamId)```: It's called to Join Room function in N to N WebRTC Streaming.
-*   ```play(streamId, token, roomId)```: It's called when playing the stream in N to N WebRTC.
+*   ```openStream(mediaConstraints, streamId)```: It's called to open screen, camera or audio resources.
+*   ```closeStream()```: It's called to close streams. If you want to stop peer connection, call stop(streamId).
+*   ```publish(streamId, token, subscriberId, subscriberCode, streamName, mainTrack, metaData)```: It's called to publish stream.
+*   ```join(streamId)```: Called to join a peer-to-peer mode session as peer.
+*   ```joinRoom(roomName, streamId, mode)```: It's called to Join Room function in N to N WebRTC Streaming.
+*   ```play(streamId, token, roomId, enableTracks, subscriberId, subscriberCode, metaData)```: It's called when playing the stream in N to N WebRTC.
 *   ```stop(streamId)```: It's called to stop the stream.
-*   ```join(streamId)```: It's called to join the stream.
 *   ```leaveFromRoom(roomName)```: It's called to leave from the room.
 *   ```leave(streamId)```: It's called to leave the stream.
 *   ```getStreamInfo(streamId)```: It's called to return information about a stream.
-*   ```gotStream(stream)```: It's called to reassign stream values.
-*   ```switchVideoCapture(streamId)```: It's called for provide to switch video capture.
 *   ```switchDesktopCapture(streamId)```: It's called for switch desktop capture.
-*   ```switchVideoSource(streamId, mediaConstraints, onEndedCallback)```: It's called to switch video source.
+*   ```switchVideoCameraCapture(streamId, deviceId,onEndedCallback)```: It's called to switch video source.
 *   ```onTrack(event, streamId)```: It's called to track to peer connections.
 *   ```iceCandidateReceived(event, streamId)```: It's called for ice candidate messages received.
-*   ```initPeerConnection(streamId)```: It's called for starting Init peer connection.
+*   ```initPeerConnection(streamId, dataChannelMode)```: It's called for starting Init peer connection.
 *   ```closePeerConnection(streamId)```: It's called for close peer connection.
 *   ```signallingState(streamId)```: It's called to return signaling state.
 *   ```iceConnectionState(streamId)```: It's called to return Ice connection state.
@@ -40,15 +90,15 @@ Ant Media Server provides a WebSocket interface in publishing and playing WebRTC
 *   ```turnOnLocalCamera()```: It's called to turn on the local camera.
 *   ```muteLocalMic()```: It's called to mute local mic.
 *   ```unmuteLocalMic()```: It's called to unmute local mic. If there is audio it calls callbackError with "AudioAlreadyActive" parameter.
-*   ```takeConfiguration(idOfStream, configuration, typeOfConfiguration)```: It's called to take configuration.
+*   ```takeConfiguration(idOfStream, configuration, typeOfConfiguration, idMapping)```: It's called to take configuration.
 *   ```takeCandidate(idOfTheStream, tmpLabel, tmpCandidate)```: It's called to take candidate.
 *   ```addIceCandidate(streamId, candidate)```: It's called to add ice candidate.
 *   ```startPublishing(idOfStream)```: It's called to start Publishing.
 *   ```getVideoSender(streamId)```: It's called to get Video Sender. If we have multiple video tracks in coming versions, this method may cause some issues.
 *   ```changeBandwidth(bandwidth, streamId)```: It's called to change bandwidth is in kbps.
 *   ```getStats(streamId)```: It's called for return WebRTC stats.
-*   ```enableStats(streamId)```: It's called to enable stats, setting interval 5 sec.
-*   ```closeWebSocket(streamId)```: It's called to close WebSocket connection. After calling this function, create a new WebRTCAdaptor instance, don't use the same objectone. \* Because all streams are closed on the server side as well when WebSocket connection is closed.
+*   ```enableStats(streamId, periodMs)```: It's called to enable stats, setting interval 5 sec.
+*   ```closeWebSocket()```: It's called to close WebSocket connection. After calling this function, create a new WebRTCAdaptor instance, don't use the same objectone. \* Because all streams are closed on the server side as well when WebSocket connection is closed.
 
 This documentation is for developers who need to callbacks and their descriptions for WebRTC operations.
 
@@ -84,48 +134,4 @@ This documentation is for developers who need to callbacks and their description
 *   ```no_encoder_settings```: This is sent back to the user when there are no encoder settings available in publishing the stream.
 *   ```no_peer_associated_before```: This is peer to peer connection error definition. It is sent back to the user when there is no peer associated with the stream.
 *   ```notSetLocalDescription```: It is sent when the local description is not sent successfully.
-*   ```screen_share_permission_denied```: It is sent when the user does not allow screen share
-
-## Using the WebRTCAdaptor in your project as a Module
-
-In your project, run:
-
-```shell
-npm i @antmedia/webrtc_adaptor --save-dev
-```
-
-Then inside your javascript file initialize the WebRTCAdaptor.
-
-```js
-import { WebRTCAdaptor } from '@ant-media/webrtc_adaptor';
-
-const webRTCAdaptor = new WebRTCAdaptor({
-    websocket_url: "wss://your-domain.tld:5443/WebRTCAppEE/websocket",
-    mediaConstraints: {
-        video: true,
-        audio: true,
-    },
-    peerconnection_config: {
-        'iceServers': [{'urls': 'stun:stun1.l.google.com:19302'}]
-    },
-    sdp_constraints: {
-        OfferToReceiveAudio : false,
-        OfferToReceiveVideo : false,
-    },
-    localVideoId: "id-of-video-element", // `<video id="id-of-video-element" autoplay muted>``</video>`
-    bandwidth: int|string, // default is 900 kbps, string can be 'unlimited'
-    dataChannelEnabled: true|false, // enable or disable data channel
-    callback: (info, obj) =>` {}, // check info callbacks bellow
-    callbackError: function(error, message) {}, // check error callbacks bellow
-});
-
-// Then, in another part of your script, you can start streaming by calling the publish method
-webRTCAdaptor.publish(streamId, token, subscriberId, subscriberCode, streamName);
-```
-
-Above example taken from the [StreamApp repository](https://github.com/ant-media/StreamApp/blob/fb37558823769f3145be7a777343502ffd6793e4/src/main/webapp/samples/publish_webrtc.html#L509).
-
-### Tutorial for Creating Publish and Play Page using JS SDK
-- [play page creation using JS SDK](https://antmedia.io/docs/guides/developing-antmedia-server/webrtc-play-page-creation-tutorial/)
-- [publish page creation using JS SDK](https://antmedia.io/docs/guides/developing-antmedia-server/webrtc-publish-page-creation-tutorial/)
-
+*   ```screen_share_permission_denied```: It is sent when the user does not allow screen share

docs/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/javascript-sdk.md

@@ -0,0 +1,18 @@
+---
+title: JavaScript SDK User Guide
+description: Ant Media's WebRTC JavaScript SDK lets you build your own web application that can publish and play WebRTC broadcasts.
+keywords: [JavaScript SDK User Guide, Publish Stream from your web application, Using the WebRTC JavaScript SDK, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 1
+---
+
+# JavaScript SDK
+Ant Media WebRTC JavaScript SDK helps you in building your web application that can publish and play WebRTC broadcasts with just a few lines of code.
+It also supports joining the conference room in browser.
+
+- [Pre-Requisite for JavaScript development](/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/javascript-pre-requisite/)
+- [Download and install WebRTC sample projects](/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/download-web-samples/)
+- [Publishing WebRTC live stream Sample](/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/web-publish-sample/)
+- [Playing WebRTC Live stream Sample](/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/web-play-sample/)
+- [P2P Communication Sample](/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/web-p2p-sample/)
+- [Conference Sample](/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/web-conference-sample/)
+- [JavaScript SDK Usage](/guides/developer-sdk-and-api/sdk-integration/javascript-sdk/javascript-sdk-usage/)

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

@@ -0,0 +1,24 @@
+---
+title: WebRTC Conference
+description: WebRTC Conference Using JavaScript SDK 
+keywords: [JavaScript SDK User Guide, Ant Media Server Documentation, Ant Media Server Tutorials]
+sidebar_position: 7
+---
+
+In order to test the conference sample, let's open the `conference.html` file. Go to the definition of **websocketURL** variable and set your Ant Media Server WebSocket URL.
+
+![](@site/static/img/sdk-integration/javascript-sdk/edit-websocket-url-conference-sample.png)
+
+ - Open your browser and go to your http server's address.
+
+ - Accept microphone and camera usage permissions.
+
+![](@site/static/img/sdk-integration/javascript-sdk/accept-mic-cam-permissions-conference.png)
+
+ - Enter the room id that you want to join and click the **Join Room** button.
+
+![](@site/static/img/sdk-integration/javascript-sdk/conference-sample.png)
+
+When there are other participants who are connected to the same room via Android, iOS, or the web, then a conference room will be established and users can communicate with each other.
+
+You can quickly join as a second participant in the same room by opening the same URL in the second tab.