From 50bfbb7eb02d34f1dd97d94fa05343c4ba36f860 Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Thu, 19 Nov 2020 16:26:32 +0900
Subject: [PATCH 1/9] Update README.md

---
 README.md | 645 ++++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 454 insertions(+), 191 deletions(-)

diff --git a/README.md b/README.md
index 9fbb182..2ecc501 100644
--- a/README.md
+++ b/README.md
@@ -1,31 +1,63 @@
-# SendBird Calls for JavaScript
-
+# [Sendbird](https://sendbird.com) Calls SDK for JavaScript
 
 [![minified size](https://img.shields.io/bundlephobia/min/sendbird-calls)](https://img.shields.io/bundlephobia/min/sendbird-calls)
 [![minzipped size](https://img.shields.io/bundlephobia/minzip/sendbird-calls)](https://img.shields.io/bundlephobia/minzip/sendbird-calls)
 [![npm version](https://badge.fury.io/js/sendbird-calls.svg)](https://badge.fury.io/js/sendbird-calls)
 [![Commercial License](https://img.shields.io/badge/license-Commercial-brightgreen.svg)](https://github.com/sendbird/sendbird-calls-javascript/blob/master/LICENSE.md)
 
+## Table of contents
+
+  1. [Introduction](#introduction)
+  1. [Before getting started](#before-getting-started)
+  1. [Getting started](#getting-started)
+  1. [Make your first call](#make-your-first-call)
+  1. [Implementation guide](#implementation-guide)  
+  1. [Appendix](#appendix)
+
+<br />
+
 ## Introduction
-`SendBird Calls` is the latest addition to our product portfolio. It enables real-time calls between users within a SendBird application. SDKs are provided for iOS, Android, and JavaScript. Using any one of these, developers can quickly integrate voice and video call functions into their own client apps, allowing users to make and receive web-based real-time voice and video calls on the SendBird platform.
 
-> If you need any helps or have any issue / question, please visit [our community](https://community.sendbird.com) 
+**SendBird Calls** is the latest addition to our product portfolio. It enables real-time calls between users within a Sendbird application. SDKs are provided for iOS, Android, and JavaScript. Using any one of these, developers can quickly integrate voice and video call functions into their own client apps, allowing users to make and receive web-based real-time voice and video calls on the Sendbird platform.
+
+> If you need any help in resolving any issues or have questions, please visit [our community](https://community.sendbird.com)
+
+### How it works
+
+Sendbird Calls SDK for JavaScript provides a framework to make and receive voice and video calls. **Direct calls** in the SDK refers to one-to-one calls. To make a direct voice or video call, the caller specifies the user ID of the intended callee, and dials. Upon dialing, all of the callee’s authenticated devices will receive notifications for an incoming call. The callee then can choose to accept the call from any one of the devices. When the call is accepted, a connection is established between the devices of the caller and the callee. This marks the start of a direct call. Call participants can mute themselves, or call with either or both of the audio and video by using output devices such as speaker and microphone for audio, and front, rear camera for video. A call may be ended by either party. The [Sendbird Dashboard](https://dashboard.sendbird.com/auth/signin) displays call logs in the Calls menu for dashboard owners and admins to review.
+
+### For further reference
+
+Find out more about Sendbird Calls for JavaScript on [Calls SDK for JavaScript doc](https://sendbird.com/docs/calls/v1/javascript/getting-started/about-calls-sdk).
+
+<br />
+
+## Before getting started
+
+This section shows the prerequisites you need to check to use Sendbird Calls SDK for JavaScript.
+
+### Requirements
 
-## Functional Overview
-The SendBird Calls JavaScript SDK provides a framework to make and receive voice and video calls. “Direct calls” in the SDK refers to one-to-one calls, comparable to “direct messages” (DMs) in messaging services. To make a direct voice or video call, the caller specifies the user ID of the intended callee, and dials. Upon dialing, all of the callee’s authenticated devices will receive incoming call notifications. The callee then can choose to accept the call from any one of the devices. When the call is accepted, a connection is established between the caller and the callee. This marks the start of the direct call. Call participants may mute themselves, as well as select the audio and video hardware used in the call. Calls may be ended by either party. The SendBird Dashboard displays call logs in the Calls menu for application owners and admins to review.
+The minimum requirements for Calls SDK for JavaScript are:
 
-## SDK Prerequisites
-* [Modern browsers implementing WebRTC APIs](https://caniuse.com/#feat=rtcpeerconnection) are supported; IE is not.
-* Edge(<= 44) is not supported, though it might be supported later.
+- [Modern browsers implementing WebRTC APIs](https://caniuse.com/#feat=rtcpeerconnection) are supported; IE is excluded.
+- Edge is not supported as of now.
 
 ```javascript
 // browser console
 (window.RTCPeerConnection) ? console.log('supported') : console.log('not supported')
 ```
 
-## Install and configure the SDK
-Download and install the SDK using `npm` or `yarn`.
-```shell script
+<br />
+
+## Getting started
+
+This section gives you information you need to get started with Sendbird Calls SDK for JavaScript.
+
+### Install and configure the SDK
+
+1. Download and install the SDK using `npm` or `yarn`.
+```bash
 # npm
 npm install sendbird-calls 
 
@@ -33,43 +65,54 @@ npm install sendbird-calls
 yarn add sendbird-calls 
 ```
 
-Import `SendBirdCall` as an es6 module
+2. Import `SendBirdCall` as an es6 module
 ```javascript
 import SendBirdCall from "sendbird-calls";
 
 SendBirdCall.init(APP_ID)
 ```
-> **Note**: If you are using TypeScript, you have to set ['--esModuleInterop' setting to `true` for 'default import'](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#support-for-import-d-from-cjs-from-commonjs-modules-with---esmoduleinterop), or use `import * as SendBirdCall from "sendbird-calls"` instead.
+> **Note**: If you are using `TypeScript`, you have to set ['--esModuleInterop' setting to `true` for 'default import'](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#support-for-import-d-from-cjs-from-commonjs-modules-with---esmoduleinterop), or use `import * as SendBirdCall from "sendbird-calls"` instead.
 
 Or use the minified file to initialize `SendBirdCall` as global variable in the header 
 ```html
 <script type="text/javascript" src="SendBirdCall.min.js"></script>
 <script type="text/javascript">
-  SendBirdCall.init(APP_ID)
+    SendBirdCall.init(APP_ID)
 </script>
 ```
 
-## Acquiring Media Device Permissions
-When a user makes or receives a call for the first time on a given website, the browser will prompt the user to grant microphone and camera access permissions.  This might also occur when the `SendBirdCall.useMedia()` function is first called. Without these permissions, users will be unable to retrieve a list of available media devices or to retrieve any actual media streams.
+### Grant media device permissions
+
+When a user makes or receives a call for the first time on a given website, the browser will prompt the user to grant microphone and camera access permissions. This might also occur when the `SendBirdCall.useMedia()` function is first called. Without these permissions, users will be unable to retrieve a list of available media devices or to retrieve any actual media streams.
+
+<br />
+
+## Make your first call
+
+Follow the step-by-step instructions below to authenticate and make your first call. 
+
+### Step 1: Initialize the SendBirdCall instance in a client app
+
+As shown below, the `SendBirdCall` instance must be initiated when a client app is launched. Initialize the `SendBirdCall` instance with the `APP_ID` of the Sendbird application you would like to use to make a call.
 
-## Initialize the SendBirdCall instance in a client application
-As shown below, the `SendBirdCall` instance must be initiated when a client app is launched. If another initialization with another `APP_ID` takes place, all existing data will be deleted and the `SendBirdCall` instance will be initialized with the new `APP_ID`.
 ```javascript
 SendBirdCall.init(APP_ID);
 ```
 
-## Authenticate a user and connect websocket to server
-In order to make and receive calls, users must first be authenticated on the SendBird server using the  `SendBirdCall.authenticate()` function. The `SendBirdCall` object must then be connected to the websocket server using `SendBirdCall.connectWebSocket()` method.
+### Step 2: Authenticate a user and connect websocket to server
+
+In order to make and receive calls, users must first be authenticated on the SendBird server using the `SendBirdCall.authenticate()` function. The `SendBirdCall` object must then be connected to the websocket server using the `SendBirdCall.connectWebSocket()` method.
+
 ```javascript
 // Authentication
 const authOption = { userId: USER_ID, accessToken: ACCESS_TOKEN };
 
 SendBirdCall.authenticate(authOption, (res, error) => {
-  if (error) {
-    // auth failed
-  } else {
-    // auth succeeded
-  }
+    if (error) {
+        // auth failed
+    } else {
+        // auth succeeded
+    }
 });
 
 // Websocket Connection
@@ -78,305 +121,522 @@ SendBirdCall.connectWebSocket()
   .catch(/* connect failed */);
 ```
 
-## Register event handlers
-Two types of event handlers must be registered for various events that client apps may respond to: a device-specific listener and a call-specific listener.
+### Step 3: Add an event handler
+
+There are two types of event handlers the SDK provides for a client app to respond to various events: a device-specific listener and a call-specific listener.
+
+#### - Device-specific Listener
+
+Register a device-specific event handler using the `SendBirdCall.addListener()` method. It is recommended to add the event handler during initialization because it is a prerequisite for detecting an `onRinging()` event. The code below shows the way device-wide events such as incoming calls are handled once device-specific event is added. 
 
-### Device-specific Listener
-Register a device-specific event handler using the `SendBirdCall.addListener()` method. Prior to registering this, the `onRinging()` event cannot be detected. It is therefore recommended that this event handler be added during initialization.  After this device-specific event is added, responding to device-wide events (e.g. incoming calls) is handled as shown below:
 ```javascript
 SendBirdCall.addListener(UNIQUE_HANDLER_ID, {
-  onRinging: (call) => {
-    ...
-  },
-  onAudioInputDeviceChanged: (currentDevice, availableDevices) => {
-    ...
-  },
-  onAudioOutputDeviceChanged: (currentDevice, availableDevices) => {
-    ...
-  },
-  onVideoInputDeviceChanged: (currentDevice, availableDevices) => {
-    ...
-  }
+    onRinging: (call) => {
+        ...
+    },
+    onAudioInputDeviceChanged: (currentDevice, availableDevices) => {
+        ...
+    },
+    onAudioOutputDeviceChanged: (currentDevice, availableDevices) => {
+        ...
+    },
+    onVideoInputDeviceChanged: (currentDevice, availableDevices) => {
+        ...
+    }
 });
 ```
-`UNIQUE_HANDLER_ID` is any unique string value (e.g. UUID).
-<br/>
 
-| Event Listener | Invocation Criteria                                         |
-|---------------|------------------------------------------------------------------|
-|onRinging    | Incoming calls are received on the callee’s device. |
+`UNIQUE_HANDLER_ID` is any unique string value such as UUID.
+
+| Event listener | Invocation criteria|
+|---|---|
+|onRinging| Incoming calls are received on the callee’s device. |
 |onAudioInputDeviceChanged | Audio input devices have changed. |
 |onAudioOutputDeviceChanged | Audio output devices have changed. |
 |onVideoInputDeviceChanged | Video input devices have changed. |
 
-### Call-specific Listener
-Register a call-specific event handler by attaching an event handler function directly to the properties of the call object. Responding to call-specific events (e.g. sucessfull call connection) is then handled as shown below:
+#### - Call-specific Listener
+
+Register a call-specific event handler by attaching an event handler function directly to the properties of the call object. Responding to call-specific events such as establishing a successful call connection is then handled as shown below.
 
 ```javascript
 // call is 'DirectCall' object
 call.onEstablished = (call) => {
-  ...
+    ..,
 };
 
 call.onConnected = (call) => {
-  ...
+    ...
 };
 
 call.onEnded = (call) => {
-  ...
+    ...
 };
 
 call.onReconnecting = (call) => {
-  ...
+    ...
 };
 
 call.onReconnected = (call) => {
-  ...
+    ...
 };
 
 call.onRemoteAudioSettingsChanged = (call) => {
-  ...
+    ...
 };
 
 call.onRemoteVideoSettingsChanged = (call) => {
-  ...
+    ...
 };
 
 call.onCustomItemsUpdated = (call, updatedKeys) => {
-  ...
+    ...
 };
 
 call.onCustomItemsDeleted = (call, deletedKeys) => {
-  ...
+    ...
 };
 
 call.onRemoteRecordingStatusChanged = (call) => {
-  ...
+    ...
 };
 ```
 
-| Event Listener                         | Invocation Criteria |
-|--------------------------------|--------------|
-| onEstablished                 | The callee accepted the call using the method `call.accept()`, but neither the caller or callee’s devices are as of yet connected to media devices. |
-| onConnected                   | Media devices (e.g. microphone and speakers) between the caller and callee are connected and the voice or video call can begin. |
-| onEnded                       | The call has ended on either the caller or the callee’s devices. This is triggered automatically when either party runs the method `call.end()`. This event listener is also invoked if the call is ended for other reasons. See the bottom of this readme for a list of all possible reasons for call termination.  |
-| onRemoteAudioSettingsChanged  | The other party changed their audio settings. |
-| onRemoteVideoSettingsChanged  | The other party changed their video settings. |
-| onCustomItemsUpdated          | One or more of `call`’s custom items (metadata) have been updated. |
-| onCustomItemsDeleted          | One or more of `call`’s custom items (metadata) have been deleted. |
-| onReconnecting                | `call` started attempting to reconnect to the other party after a media connection disruption. |
-| onReconnected                 | The disrupted media connection reconnected. |
-| onRemoteRecordingStatusChanged | The other user’s recording status has been changed. |
+|Event listener|Invocation criteria |
+|---|---|
+|onEstablished|The callee accepted the call using the method `call.accept()`. However, neither the caller or callee’s devices are connected to media devices yet.|
+|onConnected|A connection is established between the caller and callee’s media devices such as microphones and speakers. The voice or video call can begin.|
+|onEnded | The call has ended on either the caller or the callee’s devices. When the `call.end()` method is used from either party, a call ends. The `call.end()` event listener is also invoked if the call is ended for other reasons. Refer to [Calls result] in Appendix for all possible reasons for call termination. |
+|onRemoteAudioSettingsChanged| The other party changed their audio settings. |
+|onRemoteVideoSettingsChanged| The other party changed their video settings. |
+|onCustomItemsUpdated| One or more of `call`’s custom items that are used to store additional information have been updated.|
+|onCustomItemsDeleted| One or more of `call`’s custom items that are used to store additional information have been deleted.|
+|onReconnecting| `call` started attempting to reconnect to the other party after a media connection disruption. |
+|onReconnected| The disrupted media connection reconnected. |
+|onRemoteRecordingStatusChanged | The other user’s recording status has been changed. |
 
+### Step 4: Make a call
 
+First, prepare the `dialParams` call parameter object to initiate a call. This contains the intended callee’s user id and a `callOption` object. The `callOption` is used to set the call’s initial configuration, such as mute or unmute. Once prepared, the `dialParams` object is then passed into the `SendBirdCall.dial()` method to start making a call.
 
-## Make a call
-Initiate a call by first preparing the `dialParams` call parameter object. This contains the intended callee’s user id, whether or not it is a video call, as well as a `callOption` object. `callOption` is used to set the call’s initial configuration (e.g. muted/unmuted). Once prepared, the `dialParams` object is then passed into the `SendBirdCall.dial()` method to starting making a call.
 ```javascript
 const dialParams = {
-  userId: CALLEE_ID,
-  isVideoCall: true,
-  callOption: {
-    localMediaView: document.getElementById('local_video_element_id'),
-    remoteMediaView: document.getElementById('remote_video_element_id'),
-    audioEnabled: true,
-    videoEnabled: true
-  }
+    userId: CALLEE_ID,
+    isVideoCall: true,
+    callOption: {
+        localMediaView: document.getElementById('local_video_element_id'),
+        remoteMediaView: document.getElementById('remote_video_element_id'),
+        audioEnabled: true,
+        videoEnabled: true
+    }
 };
 
 const call = SendBirdCall.dial(dialParams, (call, error) => {
     if (error) {
-      // dial failed
+        // dial failed
     }
+    
     // dial succeeded
 });
 
 call.onEstablished = (call) => {
-  ...
+    ...
 };
 
 call.onConnected = (call) => {
-  ...
+    ...
 };
 
 call.onEnded = (call) => {
-  ...
+    ...
 };
 
 call.onRemoteAudioSettingsChanged = (call) => {
-  ...
+    ...
 };
 
 call.onRemoteVideoSettingsChanged = (call) => {
-  ...
+    ...
 };
 ```
 
-> A media viewer is a [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) (e.g. &lt;audio&gt;, &lt;video&gt;) to display media stream. The `remoteMediaView` is required for the remote media stream to be displayed. Setting `autoplay` property of media viewer to `true` is also recommended. 
+A media viewer is a [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) such as `<audio>` and `<video>` tags to display media stream. The remoteMediaView is required for the remote media stream to be displayed. It is recommended to set `autoplay` property of the media viewer to **true**.
 
-> The media viewers can also be set using `call.setLocalMediaView(element)` or `call.setRemoteMediaView(element)`.  
+> The media viewers can also be set using the `call.setLocalMediaView(element)` or `call.setRemoteMediaView(element)`.  
 
 ```html
 <video id="remote_video_element_id" autoplay>
 ```
 
 ```javascript
-//to set media viewer lazily
+// Set media viewer lazily
 call.setLocalMediaView(document.getElementById('local_video_element_id'));
 call.setRemoteMediaView(document.getElementById('remote_video_element_id'));
 ```
 
-## Receive a call
-Receive incoming calls by first registering a listener. Accept or decline incoming calls using the `call.accept()` or the `call.end()` methods. If the call is accepted, a media session will automatically be established.
+### Step 5: Receive a call
+
+Register a listener first to receive incoming calls. Accept or decline incoming calls by using the `call.accept()` or the `call.end()` methods. If the call is accepted, a media session will automatically be established.
+
+Before accepting any calls, event listeners such as `onEstablished`, onConnected must be registered. Once registered, these listeners enable reacting to in-call events through callbacks methods.
+
+```javascript
+SendBirdCall.addListener(UNIQUE_HANDLER_ID, {
+    onRinging: (call) => {
+        call.onEstablished = (call) => {
+            ...
+        };
+        
+        call.onConnected = (call) => {
+            ...
+        };
+        
+        call.onEnded = (call) => {
+            ...
+        };
+        
+        call.onRemoteAudioSettingsChanged = (call) => {
+            ...
+        };
+        
+        call.onRemoteVideoSettingsChanged = (call) => {
+            ...
+        };
+        
+        const acceptParams = {
+            callOption: {
+                localMediaView: document.getElementById('local_video_element_id'),
+                remoteMediaView: document.getElementById('remote_video_element_id'),
+                audioEnabled: true,
+                videoEnabled: true
+            }
+        };
+        
+        call.accept(acceptParams);
+    }
+});
+```
+
+> **Note**: If the media viewer elements have been set through the `call.setLocalMediaView()` and `call.setRemoteMediaView()`, ensure that the same media viewers are set in `acceptParams`’s `callOption`. Otherwise, these will be overridden during the `call.accept()`.
+
+Incoming calls are received through the application's persistent internal server connection, which is established by `SendBirdCall.connectWebSocket()`. In the event of accidental disconnection, the application will attempt to reconnect every 2 seconds.
+
+<br />
+
+## Implementation guide
+
+
+### Register event handlers
 
-Before accepting any calls, event listeners (e.g. `onEstablished`, `onConnected`) must be registered upfront. Once registered, these listeners enable reacting to in-call events via callbacks methods.
+There are two types of event handlers the SDK provides for a client app to respond to various events: a device-specific listener and a call-specific listener.
+
+#### - Device-specific Listener
+
+Register a device-specific event handler using the `SendBirdCall.addListener()` method. It is recommended to add the event handler during initialization because it is a prerequisite for detecting an `onRinging()` event. The code below shows the way device-wide events such as incoming calls are handled once device-specific event is added. 
 
 ```javascript
 SendBirdCall.addListener(UNIQUE_HANDLER_ID, {
-  onRinging: (call) => {
-    call.onEstablished = (call) => {
-      ...
-    };
+    onRinging: (call) => {
+        ...
+    },
+    onAudioInputDeviceChanged: (currentDevice, availableDevices) => {
+        ...
+    },
+    onAudioOutputDeviceChanged: (currentDevice, availableDevices) => {
+        ...
+    },
+    onVideoInputDeviceChanged: (currentDevice, availableDevices) => {
+        ...
+    }
+});
+```
+
+`UNIQUE_HANDLER_ID` is any unique string value such as UUID.
 
-    call.onConnected = (call) => {
-      ...
-    };
+| Event listener | Invocation criteria|
+|---|---|
+|onRinging| Incoming calls are received on the callee’s device. |
+|onAudioInputDeviceChanged | Audio input devices have changed. |
+|onAudioOutputDeviceChanged | Audio output devices have changed. |
+|onVideoInputDeviceChanged | Video input devices have changed. |
 
-    call.onEnded = (call) => {
-      ...
-    };
+#### - Call-specific Listener
+
+Register a call-specific event handler by attaching an event handler function directly to the properties of the call object. Responding to call-specific events such as establishing a successful call connection is then handled as shown below.
+
+```javascript
+// call is 'DirectCall' object
+call.onEstablished = (call) => {
+    ..,
+};
 
-    call.onRemoteAudioSettingsChanged = (call) => {
-      ...
-    };
+call.onConnected = (call) => {
+    ...
+};
 
-    call.onRemoteVideoSettingsChanged = (call) => {
-      ...
-    };
+call.onEnded = (call) => {
+    ...
+};
 
-    const acceptParams = {
-      callOption: {
+call.onReconnecting = (call) => {
+    ...
+};
+
+call.onReconnected = (call) => {
+    ...
+};
+
+call.onRemoteAudioSettingsChanged = (call) => {
+    ...
+};
+
+call.onRemoteVideoSettingsChanged = (call) => {
+    ...
+};
+
+call.onCustomItemsUpdated = (call, updatedKeys) => {
+    ...
+};
+
+call.onCustomItemsDeleted = (call, deletedKeys) => {
+    ...
+};
+
+call.onRemoteRecordingStatusChanged = (call) => {
+    ...
+};
+```
+
+|Event listener|Invocation criteria |
+|---|---|
+|onEstablished|The callee accepted the call using the method `call.accept()`. However, neither the caller or callee’s devices are connected to media devices yet.|
+|onConnected|A connection is established between the caller and callee’s media devices such as microphones and speakers. The voice or video call can begin.|
+|onEnded | The call has ended on either the caller or the callee’s devices. When the `call.end()` method is used from either party, a call ends. The `call.end()` event listener is also invoked if the call is ended for other reasons. Refer to [Calls result] in Appendix for all possible reasons for call termination. |
+|onRemoteAudioSettingsChanged| The other party changed their audio settings. |
+|onRemoteVideoSettingsChanged| The other party changed their video settings. |
+|onCustomItemsUpdated| One or more of `call`’s custom items that are used to store additional information have been updated.|
+|onCustomItemsDeleted| One or more of `call`’s custom items that are used to store additional information have been deleted.|
+|onReconnecting| `call` started attempting to reconnect to the other party after a media connection disruption. |
+|onReconnected| The disrupted media connection reconnected. |
+|onRemoteRecordingStatusChanged | The other user’s recording status has been changed. |
+
+### Make a call
+
+First, prepare the `dialParams` call parameter object to initiate a call. This contains the intended callee’s user id and a `callOption` object. The `callOption` is used to set the call’s initial configuration, such as mute or unmute. Once prepared, the `dialParams` object is then passed into the `SendBirdCall.dial()` method to start making a call.
+
+```javascript
+const dialParams = {
+    userId: CALLEE_ID,
+    isVideoCall: true,
+    callOption: {
         localMediaView: document.getElementById('local_video_element_id'),
         remoteMediaView: document.getElementById('remote_video_element_id'),
         audioEnabled: true,
         videoEnabled: true
-      }
-    };
+    }
+};
 
-    call.accept(acceptParams);
-  }
+const call = SendBirdCall.dial(dialParams, (call, error) => {
+    if (error) {
+        // dial failed
+    }
+    
+    // dial succeeded
+});
+
+call.onEstablished = (call) => {
+    ...
+};
+
+call.onConnected = (call) => {
+    ...
+};
+
+call.onEnded = (call) => {
+    ...
+};
+
+call.onRemoteAudioSettingsChanged = (call) => {
+    ...
+};
+
+call.onRemoteVideoSettingsChanged = (call) => {
+    ...
+};
+```
+
+A media viewer is a [HTMLMediaElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement) such as `<audio>` and `<video>` tags to display media stream. The remoteMediaView is required for the remote media stream to be displayed. It is recommended to set `autoplay` property of the media viewer to **true**.
+
+> The media viewers can also be set using the `call.setLocalMediaView(element)` or `call.setRemoteMediaView(element)`.  
+
+```html
+<video id="remote_video_element_id" autoplay>
+```
+
+```javascript
+// Set media viewer lazily
+call.setLocalMediaView(document.getElementById('local_video_element_id'));
+call.setRemoteMediaView(document.getElementById('remote_video_element_id'));
+```
+
+### Receive a call
+
+Register a listener first to receive incoming calls. Accept or decline incoming calls by using the `call.accept()` or the `call.end()` methods. If the call is accepted, a media session will automatically be established.
+
+Before accepting any calls, event listeners such as `onEstablished`, onConnected must be registered. Once registered, these listeners enable reacting to in-call events through callbacks methods.
+
+```javascript
+SendBirdCall.addListener(UNIQUE_HANDLER_ID, {
+    onRinging: (call) => {
+        call.onEstablished = (call) => {
+            ...
+        };
+        
+        call.onConnected = (call) => {
+            ...
+        };
+        
+        call.onEnded = (call) => {
+            ...
+        };
+        
+        call.onRemoteAudioSettingsChanged = (call) => {
+            ...
+        };
+        
+        call.onRemoteVideoSettingsChanged = (call) => {
+            ...
+        };
+        
+        const acceptParams = {
+            callOption: {
+                localMediaView: document.getElementById('local_video_element_id'),
+                remoteMediaView: document.getElementById('remote_video_element_id'),
+                audioEnabled: true,
+                videoEnabled: true
+            }
+        };
+        
+        call.accept(acceptParams);
+    }
 });
 ```
->**Note**: If the media viewer elements have been set via `call.setLocalMediaView()` and `call.setRemoteMediaView()`, ensure that the same media viewers are set in `acceptParams`’s `callOption` . Otherwise, these will be overriden during `call.accept()`
 
-Incoming calls are received via the application's persistent internal server connection, which is established by `SendBirdCall.connectWebSocket()`.
-In the event of accidental disconnection, the application will attempt to reconnect every 2 seconds.
+> **Note**: If the media viewer elements have been set through the `call.setLocalMediaView()` and `call.setRemoteMediaView()`, ensure that the same media viewers are set in `acceptParams`’s `callOption`. Otherwise, these will be overridden during the `call.accept()`.
 
-## Handle a current call
-During an ongoing call, mute or unmute the caller’s microphone using the `call.muteMicrophone()` or `call.unmuteMicrophone()` methods. If the callee changes their audio settings, the caller is notified via the `call.onRemoteAudioSettingsChanged()` listener. The caller may start or stop video using the `call.startVideo()` or `call.stopVideo()` methods. If the callee changes their video settings, the caller is notified via the `call.onRemoteVideoSettingsChanged()` listener.
+Incoming calls are received through the application's persistent internal server connection, which is established by `SendBirdCall.connectWebSocket()`. In the event of accidental disconnection, the application will attempt to reconnect every 2 seconds.
+
+### Handle a current call
+
+During an ongoing call, a caller may mute or unmute their microphone using the `call.muteMicrophone()` or `call.unmuteMicrophone()` methods. If the callee changes their audio setting, the caller is notified through the `call.onRemoteAudioSettingsChanged()` listener. The caller may start or stop video using the `call.startVideo()` or `call.stopVideo()` methods. If the callee changes their video setting, the caller is notified through the `call.onRemoteVideoSettingsChanged()` listener.
 
 ```javascript
-// mute my microphone
+// Mute my microphone
 call.muteMicrophone();
 
-// unmute my microphone
+// Unmute my microphone
 call.unmuteMicrophone();
 
-// start to show video
+// Start to show video
 call.startVideo();
 
-// stops showing video
+// Stops showing video
 call.stopVideo();
 
-// receives the audio event
+// Receives the audio event
 call.onRemoteAudioSettingsChanged = (call) => {
-  if (call.isRemoteAudioEnabled) {
-    // The peer has been unmuted.
-    // Consider displaying a muted icon.
-  } else {
-    // The peer has been muted.
-    // Consider displaying an unmuted icon.
-  }
+    if (call.isRemoteAudioEnabled) {
+        // The peer has been unmuted.
+        // Consider displaying a muted icon.
+    } else {
+        // The peer has been muted.
+        // Consider displaying an unmuted icon.
+    }
 };
 
-// receives the video event
+// Receives the video event
 call.onRemoteVideoSettingsChanged = (call) => {
-  if (call.isRemoteVideoEnabled) {
-    // The peer has started the video.
-  } else {
-    // The peer has stopped the video.
-  }
+    if (call.isRemoteVideoEnabled) {
+        // The peer has started the video.
+    } else {
+        // The peer has stopped the video.
+    }
 };
 ```
 
-## End a call
-A caller can end a call using the `call.end()` method. This event can be processed via the `call.onEnded` listener. This listener is also triggered when the callee ends the call.
+### End a call
+
+A caller may end a call using the `call.end(`) method. This event can be processed through the `call.onEnded` listener. This listener is also triggered when the callee ends the call.
+
 
 ```javascript
 // End a call
 call.end();
 
-// receives the event
+// Receives the event
 call.onEnded = (call) => {
-  // Consider releasing or destroying call-related view from here.
+    // Consider releasing or destroying call-related view from here.
 };
 ```
 
 ## Mirror a MediaView
-You can set the current user’s local video view as mirrored or reversed when the camera is facing the user. This can be easily done by adding the `transform` CSS property to your `localMediaView` element. 
-```CSS
+
+You can set the current user’s local video view as mirrored or reversed when the camera is facing the user. This can be easily done by adding the `transform` CSS property to your `localMediaView` element.
+
+```css
 #local-media-view
 {
-  transform: rotateY(180deg); /* add this property */
+    transform: rotateY(180deg); /* add this property */
 }
 ```
 
 ## Configuring media devices
-The `SendBirdCall` object contains a collection of methods used to configure media devices. Each media type has corresponding methods to (1) retrieve a list of devices (2) retrieve the current device, (3) select a device, and (4) update devices. If media device configuration changes, any ongoing calls are affected immediately.
+
+The `SendBirdCall` object contains a collection of methods used to configure media devices. Each media type has corresponding methods to **a**. retrieve a list of devices, **b**. retrieve the current device, **c**. select a device, and **d**. update devices. If media device configuration changes, any ongoing calls are affected immediately.
 
 |Method | Description |
-|-------|-------------|
+|---|---|
 |useMedia(constraints) | Attempts to grant permission to access media devices |
 |getCurrentAudioInputDevice() | Get the current audio input device |
 |getAvailableAudioInputDevices() | Get a list of available audio input devices | 
 |selectAudioInputDevice(mediaDeviceInfo) | Select the audio input device to use |
 |getCurrentAudioOutputDevice() | Get the current audio output device  |
-|getAvailableAudioOutputDevices() | Get a list of available audio output devices   |
-|selectAudioOutputDevice(mediaDeviceInfo) | Select the audio output device to use |
+|getAvailableAudioOutputDevices() | Get a list of available audio output devices|
+|selectAudioOutputDevice(mediaDeviceInfo) | Select the audio output device to use|
 |getCurrentVideoInputDevice() | Get the current video input device |
-|getAvailableVideoInputDevices() | Get a list of available video input devices  |
+|getAvailableVideoInputDevices() | Get a list of available video input devices|
 |selectVideoInputDevice(mediaDeviceInfo) | Get the current video input device |
 |updateMediaDevices(constraints) | Manually update media devices |
 
 The device specific-event handler also contains a collection of event listeners used to handle changes in media devices.
 
-|Event Listener | Invocation criteria |
-|---------------|-------------|
-|onAudioInputDeviceChanged | audio input devices have changed |
-|onAudioOutputDeviceChanged | audio output devices have changed |
-|onVideoInputDeviceChanged | video input devices have changed |
+|Event listener | Invocation criteria |
+|---|---|
+|onAudioInputDeviceChanged | Audio input devices have changed |
+|onAudioOutputDeviceChanged | Audio output devices have changed |
+|onVideoInputDeviceChanged | Video input devices have changed |
 
 Before using the methods and event listeners listed above, ensure that `SendBirdCall.useMedia(constraints)` has been executed. Failing to do this will result in these methods causing unexpected behaviors or failed outcomes.
 
 ```javascript
-//on settings view opened
+// on settings view opened
 const mediaAccess = SendBirdCall.useMedia({audio: true, video: true});
 
-//This code demonstrates for audio input devices. The same can also be done for audio output and video input devices.
+// This code demonstrates for audio input devices. The same can also be done for audio output and video input devices.
 const availableDevices = SendBirdCall.getAvilableAudioInputDevices();
 const currentDevice = SendBirdCall.getCurrentAudioInputDevice();
-//populate option elements in select element
+// Populate option elements in select element
 populateSelectOption(availableDevices);
-//select option which matches current device
+// Select option which matches current device
 selectOption(currentDevice);
 
 SendBirdCall.addListener('my-listener', {
-  onAudioInputDeviceChanged: (currentDevice, availableDevices) => {
-    //populate option elements in select element
-    populateSelectOption(availableDevices);
-    //select option which matches current device
-    selectOption(currentDevice);
-  }
+    onAudioInputDeviceChanged: (currentDevice, availableDevices) => {
+        // Populate option elements in select element
+        populateSelectOption(availableDevices);
+        // Select option which matches current device
+        selectOption(currentDevice);
+    }
 });
 
 ...
@@ -385,57 +645,60 @@ SendBirdCall.removeListener('my-listener');
 
 //on settings view closed
 mediaAccess.dispose();
-
 ```
-> Always be sure to `dispose()` of the `mediaAccess`  retrieved from  `SendBirdCall.useMedia`. Failure to do so will result in vulnerable media access permissions that could grant unintended use of the user’s camera microphone or camera.
 
-> In `Chrome` / `Firefox`, `SendBirdCall.updateMediaDevices` does not need to be called if the media device event listener is used to update the view or device list. However, in `Safari`, those event listeners might not be called after a media device change.  In such cases, manually calling `SendBirdCall.updateMediaDevices` may be required.
+Always be sure to `dispose()` of the `mediaAccess` retrieved from `SendBirdCall.useMedia`. Failure to do so will result in vulnerable media access permissions that could grant unintended use of the user’s camera microphone or camera.
+
+> In `Chrome`/`Firefox`, `SendBirdCall.updateMediaDevices` does not need to be called if the media device event listener is used to update the view or device list. However, in `Safari`, those event listeners might not be called after a media device change.  In such cases, manually calling the `SendBirdCall.updateMediaDevices` may be required.
 
+### Deauthenticate a user
+
+When users log out of their call client apps, they must be deauthenticated with `SendBirdCall.deauthenticate()` method. This will discard all current instances of `directCall`, all session keys, and all user information. However, the device-specific event handler will remain.
 
-## Deauthenticate a user
-Users are deauthenticated (i.e. “logged out”) using with `SendBirdCall.deauthenticate()` method. This will discard all current instances of `directCall`,  all session keys, and all user information. However, the device-specific event handler will remain. 
 ```javascript
 // Deauthenticate
 SendBirdCall.deauthenticate();
 ```
 
-## Retrieve a call information
-The local or remote user’s information is available via the `directCall.localUser` and `directCall.remoteUser` properties.
+### Retrieve a call information
+
+The local or remote user’s information is available through the `directCall.localUser` and `directCall.remoteUser` properties.
+
+### Retrieve call history
 
-## Retrieve call history
-SendBird servers automatically store details of calls, which can be used later to display a call history for users. A user’s call history is available via a `DirectCallLogListQuery` instance. 
+Sendbird Calls server automatically stores details of calls, which can be used later to display a call history for users. A user’s call history is available through a `DirectCallLogListQuery` instance. 
 
 ```javascript
 /*
 interface DirectCallLogListQueryParams {
-  myRole: string
-  endResults: string[],
-  limit: number
+    myRole: string,
+    endResults: string[],
+    limit: number
 }
 */
 const params = {
-  myRole: 'dc_caller',
-  endResults: ['DECLINED', 'COMPLETED'],
-  limit: 100
+    myRole: 'dc_caller',
+    endResults: ['DECLINED', 'COMPLETED'],
+    limit: 100
 };
 const query = SendBirdCall.createDirectCallLogListQuery(params);
 
 query.next((directCallLog) => {
-  if (query.hasNext && !query.isLoading) {
-    // query.next() can be called once more
-    // if a user wants to fetch more call logs.
+    if (query.hasNext && !query.isLoading) {
+        // The query.next() can be called once more.
+        // If a user wants to fetch more call logs.
   }
 });
 ```
 
-| Method & Prop    | Description                                                                                                                                                                                                                                                                                                       |
-|------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-|next()            | Used to query call history from `SendBirdCall` server.                                                                                                                                                                                                                                                              |
-|hasNext           | If true, there is more call history to be retrieved.                                                                                                                                                                                                                                                              |
-|isLoading         | If true, call history is being retrieved from SendBirdCall server.                                                                                                                                                                                                                                                |
-|params.limit      | Specifies the number of call logs to return at once.                                                                                                                                                                                                                                                              |
-|params.myRole     | Returns call logs of the specified role. (e.g. if myRole is `'dc_callee'`, query will return only the callee’s call logs.)                                                                                                                                                                                               |
-|params.endResults | Returns the call logs for specified results. If more than one result is specified, they are processed as `OR` condition and all call logs corresponding with the specified end results will be returned. For example, if endResults is `['NO_ANSWER'`, `'CANCELED']`, only the `NO_ANSWER` and `CANCELED` call logs will be returned.|
+| Method & Property| Description |
+|---|---|
+|next()| Used to query call history from `SendBirdCall` server.                                                 |
+|hasNext| If true, there is more call history to be retrieved.|
+|isLoading| If true, call history is being retrieved from SendBirdCall server. |
+|params.limit| Specifies the number of call logs to return at once. |
+|params.myRole| Returns call logs of the specified role. (e.g. if myRole is `'dc_callee'`, query will return only the callee’s call logs.) |
+|params.endResults| Returns the call logs for specified results. If more than one result is specified, they are processed as `OR` condition and all call logs corresponding with the specified end results will be returned. For example, if endResults is `['NO_ANSWER'`, `'CANCELED']`, only the `NO_ANSWER` and `CANCELED` call logs will be returned.|
 
 ## Sound Effect
 ### Sound types

From 8bb9f9df257268408ac19dc04f5021ff0f734c0a Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Thu, 19 Nov 2020 16:38:09 +0900
Subject: [PATCH 2/9] Update README.md

---
 README.md | 126 +++++++++++++++++++++++++++++-------------------------
 1 file changed, 67 insertions(+), 59 deletions(-)

diff --git a/README.md b/README.md
index 2ecc501..7d8679f 100644
--- a/README.md
+++ b/README.md
@@ -693,70 +693,78 @@ query.next((directCallLog) => {
 
 | Method & Property| Description |
 |---|---|
-|next()| Used to query call history from `SendBirdCall` server.                                                 |
-|hasNext| If true, there is more call history to be retrieved.|
-|isLoading| If true, call history is being retrieved from SendBirdCall server. |
+|next()| Used to query call history from `SendBirdCall` server.|
+|hasNext| If **true**, there is more call history to be retrieved.|
+|isLoading| If **true**, call history is being retrieved from Sendbird Calls server. |
 |params.limit| Specifies the number of call logs to return at once. |
-|params.myRole| Returns call logs of the specified role. (e.g. if myRole is `'dc_callee'`, query will return only the callee’s call logs.) |
-|params.endResults| Returns the call logs for specified results. If more than one result is specified, they are processed as `OR` condition and all call logs corresponding with the specified end results will be returned. For example, if endResults is `['NO_ANSWER'`, `'CANCELED']`, only the `NO_ANSWER` and `CANCELED` call logs will be returned.|
-
-## Sound Effect
-### Sound types
-| Type         | Description                                                                                                                                       |
-|--------------|---------------------------------------------------------------------------------------------------------------------------------------------------|
-| DIALING      | Refers to a sound that is played on a caller’s side when the caller makes a call to a callee.                                                     |
-| RINGING      | Refers to a sound that is played on a callee’s side when receiving a call.                                                                        |
+|params.myRole| Returns call logs of the specified role. For example, if `myRole` is **dc_callee**, the query will return only the callee’s call logs.|
+|params.endResults| Returns the call logs for specified results. If more than one result is specified, they are processed as `OR` condition and all call logs corresponding with the specified end results will be returned. For example, if the `endResults` is set as **NO_ANSWER** or **CANCELED**, only the **NO_ANSWER** and **CANCELED** call logs will be returned.|
+
+### Sound effect
+
+#### - Sound types
+
+| Type | Description|
+|---|---|
+| DIALING | Refers to a sound that is played on a caller’s side when the caller makes a call to a callee.|
+| RINGING | Refers to a sound that is played on a callee’s side when receiving a call.|
 | RECONNECTING | Refers to a sound that is played when a connection is lost, but immediately tries to reconnect. Users are also allowed to customize the ringtone. |
-| RECONNECTED  | Refers to a sound that is played when a connection is re-established.                                                                             |
-
-### Add sound
-| Method               | Description                                                                           |
-|----------------------|---------------------------------------------------------------------------------------|
-| addDirectCallSound() | Adds a specific sound such as a ringtone and an alert tone with URL to a direct call. |
-##### Parameters
-| Parameter | Type      | Description                                                                                                                          |
-|-----------|-----------|--------------------------------------------------------------------------------------------------------------------------------------|
-| type      | SoundType | Specifies the sound type to be used according to the event.                                                                          |
-| url       | string    | Specifies the URL of the sound file. You can use the URI of the asset on the server or ObjectURL created by `URL.createObjectURL()`. |
-
->Note: In modern web browsers, they have their own autoplay policies and can block the `addDirectCallSound()` method from being directly executed.
-To solve this problem, for Chrome and Firefox, the `addDirectCallSound()` method should be called after a user’s event such as clicking a button. For Safari, you have to call the `addDirectCallSound()` method in the event listener of a user’s event such as `onclick()` .
+| RECONNECTED  | Refers to a sound that is played when a connection is re-established.|
+
+#### - Add sound
+
+|Method|Description|
+|---|---|
+|addDirectCallSound() | Adds a specific sound such as a ringtone and an alert tone with URL to a direct call. |
+
+|Parameter|Type|Description|
+|---|---|---|
+|type |SoundType| Specifies the sound type to be used according to the event.|
+|url| string| Specifies the URL of the sound file. You can use the URI of the asset on the server or **ObjectURL** created by `URL.createObjectURL()`. |
+
+>**Note**: In modern web browsers, they have their own autoplay policies and can block the `addDirectCallSound()` method from being directly executed. To solve this problem for `Chrome` and `Firefox`, the `addDirectCallSound()` method should be called after a user’s event such as clicking a button. For `Safari`, you have to call the `addDirectCallSound()` method in the event listener of a user’s event such as `onclick()`. 
+
 ```javascript
 document.querySelector('#yourButton').addEventListener('click', function() {
-  SendBirdCall.addDirectCallSound(SendBirdCall.SoundType.DIALING, RESOURCE_URL);
+    SendBirdCall.addDirectCallSound(SendBirdCall.SoundType.DIALING, RESOURCE_URL);
 });
 ``` 
 
-### Remove sound
-| Method                                 | Description                                  |
-|----------------------------------------|----------------------------------------------|
+#### - Remove sound
+
+| Method | Description|
+|---|---|
 | removeDirectCallSound(type: SoundType) | Removes a specific sound from a direct call. |
-##### Parameters
-| Parameter | Type      | Description                                                    |
-|-----------|-----------|----------------------------------------------------------------|
-| type      | SoundType | Specifies the type of sound to be used according to the event. |
-
-## Additional information: call results
-Information relating the end result of a call can be obtained at any time via the  `directCall.endResult`  property, best accessed within the `onEnded()` callback.  
-
-
-| EndResult        | Description                                                                                                            |
-|------------------|------------------------------------------------------------------------------------------------------------------------|
-|NO_ANSWER |	The callee failed to either accept or decline the call within a specific amount of time.|
-|CANCELED | The caller canceled the call before the callee could accept or decline.|
-|DECLINED |	The callee declined the call.|
-|COMPLETED |	The call ended after either party ended it|
-|TIMED_OUT | The SendBird server failed to establish a media session between the caller and callee within a specific amount of time.|
-|CONNECTION_LOST | The data stream from either the caller or the callee has stopped due to a WebRTC connection issue.|
-|DIAL_FAILED | The dial() method call has failed. |
-|ACCEPT_FAILED | The accept() method call has failed.|
-|OTHER_DEVICE_ACCEPTED | The incoming call was accepted on a different device. This device received an incoming call notification, but the call ended when a different device accepted it.|
-
-## Encoding Configurations
-
-| Category           | Value  | Note                     |
-|--------------------|--------|--------------------------|
-| Frames per Second  | 24 fps |                          |
-| Maximum Resolution | 720p   | 1280x720 px; standard HD |
-| Audio Codec        | OPUS   |                          |
-| Video Codec        | VP8    |                          |
+
+| Parameter |Type|Description|
+|---|---|---|
+| type| SoundType| Specifies the type of sound to be used according to the event. |
+
+<br />
+
+## Appendix
+
+### Call results
+
+Information relating the end result of a call can be obtained at any time through the `directCall.endResult` property, best accessed within the `onEnded()` callback.
+
+| EndResult | Description  |
+|---|---|
+|NO_ANSWER|The callee failed to either accept or decline the call within a specific amount of time.|
+|CANCELED|The caller canceled the call before the callee could accept or decline.|
+|DECLINED|The callee declined the call.|
+|COMPLETED|The call ended after either party ended it|
+|TIMED_OUT|Sendbird Calls server failed to establish a media session between the caller and callee within a specific amount of time.|
+|CONNECTION_LOST|The data stream from either the caller or the callee has stopped due to a `WebRTC` connection issue.|
+|DIAL_FAILED|The `dial()` method call has failed.|
+|ACCEPT_FAILED|The `accept()` method call has failed.|
+|OTHER_DEVICE_ACCEPTED|The incoming call was accepted on a different device. This device received an incoming call notification, but the call ended when a different device accepted it.|
+
+### Encoding configurations
+
+|Category|Value| Note|
+|---|---|---|
+|Frames per Second | 24 fps ||
+|Maximum Resolution| 720p| 1280x720 px; standard HD |
+|Audio Codec| OPUS| |
+|Video Codec | VP8||

From 8a66ea3b09a12404503b6b8d5d12680dc2e23adb Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Thu, 19 Nov 2020 16:39:48 +0900
Subject: [PATCH 3/9] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 7d8679f..facd540 100644
--- a/README.md
+++ b/README.md
@@ -206,7 +206,7 @@ call.onRemoteRecordingStatusChanged = (call) => {
 |---|---|
 |onEstablished|The callee accepted the call using the method `call.accept()`. However, neither the caller or callee’s devices are connected to media devices yet.|
 |onConnected|A connection is established between the caller and callee’s media devices such as microphones and speakers. The voice or video call can begin.|
-|onEnded | The call has ended on either the caller or the callee’s devices. When the `call.end()` method is used from either party, a call ends. The `call.end()` event listener is also invoked if the call is ended for other reasons. Refer to [Calls result] in Appendix for all possible reasons for call termination. |
+|onEnded | The call has ended on either the caller or the callee’s devices. When the `call.end()` method is used from either party, a call ends. The `call.end()` event listener is also invoked if the call is ended for other reasons. Refer to [Calls result](#call-results) in [Appendix](#appendix) for all possible reasons for call termination. |
 |onRemoteAudioSettingsChanged| The other party changed their audio settings. |
 |onRemoteVideoSettingsChanged| The other party changed their video settings. |
 |onCustomItemsUpdated| One or more of `call`’s custom items that are used to store additional information have been updated.|

From 57560b469f81224101ae12c150b421c27810d45d Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Thu, 19 Nov 2020 16:51:01 +0900
Subject: [PATCH 4/9] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index facd540..e90f574 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,7 @@
 
 **SendBird Calls** is the latest addition to our product portfolio. It enables real-time calls between users within a Sendbird application. SDKs are provided for iOS, Android, and JavaScript. Using any one of these, developers can quickly integrate voice and video call functions into their own client apps, allowing users to make and receive web-based real-time voice and video calls on the Sendbird platform.
 
-> If you need any help in resolving any issues or have questions, please visit [our community](https://community.sendbird.com)
+> If you need any help in resolving any issues or have questions, please visit [our community](https://community.sendbird.com).
 
 ### How it works
 

From 1c8272334fb4bf6c3abc08caef91a79ceebed4b3 Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Fri, 20 Nov 2020 14:01:43 +0900
Subject: [PATCH 5/9] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index e90f574..ae538b5 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@
   1. [Introduction](#introduction)
   1. [Before getting started](#before-getting-started)
   1. [Getting started](#getting-started)
-  1. [Make your first call](#make-your-first-call)
+  1. [Making your first call](#making-your-first-call)
   1. [Implementation guide](#implementation-guide)  
   1. [Appendix](#appendix)
 
@@ -18,7 +18,7 @@
 
 ## Introduction
 
-**SendBird Calls** is the latest addition to our product portfolio. It enables real-time calls between users within a Sendbird application. SDKs are provided for iOS, Android, and JavaScript. Using any one of these, developers can quickly integrate voice and video call functions into their own client apps, allowing users to make and receive web-based real-time voice and video calls on the Sendbird platform.
+**Sendbird Calls** is the latest addition to our product portfolio. It enables real-time calls between users within a Sendbird application. SDKs are provided for iOS, Android, and JavaScript. Using any one of these, developers can quickly integrate voice and video call functions into their own client apps, allowing users to make and receive web-based real-time voice and video calls on the Sendbird platform.
 
 > If you need any help in resolving any issues or have questions, please visit [our community](https://community.sendbird.com).
 
@@ -87,7 +87,7 @@ When a user makes or receives a call for the first time on a given website, the
 
 <br />
 
-## Make your first call
+## Making your first call
 
 Follow the step-by-step instructions below to authenticate and make your first call. 
 

From f6a537767b9cf76f99d42049a115a55397b42d95 Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Fri, 20 Nov 2020 14:11:34 +0900
Subject: [PATCH 6/9] Update README.md

---
 README.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index ae538b5..3f3b085 100644
--- a/README.md
+++ b/README.md
@@ -125,7 +125,7 @@ SendBirdCall.connectWebSocket()
 
 There are two types of event handlers the SDK provides for a client app to respond to various events: a device-specific listener and a call-specific listener.
 
-#### - Device-specific Listener
+#### - Device-specific listener
 
 Register a device-specific event handler using the `SendBirdCall.addListener()` method. It is recommended to add the event handler during initialization because it is a prerequisite for detecting an `onRinging()` event. The code below shows the way device-wide events such as incoming calls are handled once device-specific event is added. 
 
@@ -155,7 +155,7 @@ SendBirdCall.addListener(UNIQUE_HANDLER_ID, {
 |onAudioOutputDeviceChanged | Audio output devices have changed. |
 |onVideoInputDeviceChanged | Video input devices have changed. |
 
-#### - Call-specific Listener
+#### - Call-specific listener
 
 Register a call-specific event handler by attaching an event handler function directly to the properties of the call object. Responding to call-specific events such as establishing a successful call connection is then handled as shown below.
 
@@ -206,7 +206,7 @@ call.onRemoteRecordingStatusChanged = (call) => {
 |---|---|
 |onEstablished|The callee accepted the call using the method `call.accept()`. However, neither the caller or callee’s devices are connected to media devices yet.|
 |onConnected|A connection is established between the caller and callee’s media devices such as microphones and speakers. The voice or video call can begin.|
-|onEnded | The call has ended on either the caller or the callee’s devices. When the `call.end()` method is used from either party, a call ends. The `call.end()` event listener is also invoked if the call is ended for other reasons. Refer to [Calls result](#call-results) in [Appendix](#appendix) for all possible reasons for call termination. |
+|onEnded | The call has ended on either the caller or the callee’s devices. When the `call.end()` method is used from either party, a call ends. The `call.end()` event listener is also invoked if the call is ended for other reasons. Refer to [Call results](#call-results) in [Appendix](#appendix) for all possible reasons for call termination. |
 |onRemoteAudioSettingsChanged| The other party changed their audio settings. |
 |onRemoteVideoSettingsChanged| The other party changed their video settings. |
 |onCustomItemsUpdated| One or more of `call`’s custom items that are used to store additional information have been updated.|

From 6632590942c3fcbec1556bd0193b20a9f979c307 Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Fri, 20 Nov 2020 14:12:35 +0900
Subject: [PATCH 7/9] Update README.md

---
 README.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 3f3b085..d6f0777 100644
--- a/README.md
+++ b/README.md
@@ -330,7 +330,7 @@ Incoming calls are received through the application's persistent internal server
 
 There are two types of event handlers the SDK provides for a client app to respond to various events: a device-specific listener and a call-specific listener.
 
-#### - Device-specific Listener
+#### - Device-specific listener
 
 Register a device-specific event handler using the `SendBirdCall.addListener()` method. It is recommended to add the event handler during initialization because it is a prerequisite for detecting an `onRinging()` event. The code below shows the way device-wide events such as incoming calls are handled once device-specific event is added. 
 
@@ -360,7 +360,7 @@ SendBirdCall.addListener(UNIQUE_HANDLER_ID, {
 |onAudioOutputDeviceChanged | Audio output devices have changed. |
 |onVideoInputDeviceChanged | Video input devices have changed. |
 
-#### - Call-specific Listener
+#### - Call-specific listener
 
 Register a call-specific event handler by attaching an event handler function directly to the properties of the call object. Responding to call-specific events such as establishing a successful call connection is then handled as shown below.
 

From c973c8671025b537af87b9a22c5d58b94955e863 Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Fri, 20 Nov 2020 14:16:38 +0900
Subject: [PATCH 8/9] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d6f0777..a4c4ec4 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@
 
 Sendbird Calls SDK for JavaScript provides a framework to make and receive voice and video calls. **Direct calls** in the SDK refers to one-to-one calls. To make a direct voice or video call, the caller specifies the user ID of the intended callee, and dials. Upon dialing, all of the callee’s authenticated devices will receive notifications for an incoming call. The callee then can choose to accept the call from any one of the devices. When the call is accepted, a connection is established between the devices of the caller and the callee. This marks the start of a direct call. Call participants can mute themselves, or call with either or both of the audio and video by using output devices such as speaker and microphone for audio, and front, rear camera for video. A call may be ended by either party. The [Sendbird Dashboard](https://dashboard.sendbird.com/auth/signin) displays call logs in the Calls menu for dashboard owners and admins to review.
 
-### For further reference
+### More about Sendbird Calls SDK for JavaScript
 
 Find out more about Sendbird Calls for JavaScript on [Calls SDK for JavaScript doc](https://sendbird.com/docs/calls/v1/javascript/getting-started/about-calls-sdk).
 

From 350586208f2f719bfc999b05fb647e9cda26f0c5 Mon Sep 17 00:00:00 2001
From: Jeff Lim <32758512+sf-jeff-lim@users.noreply.github.com>
Date: Tue, 24 Nov 2020 18:35:32 +0900
Subject: [PATCH 9/9] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index a4c4ec4..2ceeecd 100644
--- a/README.md
+++ b/README.md
@@ -483,7 +483,7 @@ call.setRemoteMediaView(document.getElementById('remote_video_element_id'));
 
 Register a listener first to receive incoming calls. Accept or decline incoming calls by using the `call.accept()` or the `call.end()` methods. If the call is accepted, a media session will automatically be established.
 
-Before accepting any calls, event listeners such as `onEstablished`, onConnected must be registered. Once registered, these listeners enable reacting to in-call events through callbacks methods.
+Before accepting any calls, event listeners such as `onEstablished`, `onConnected` must be registered. Once registered, these listeners enable reacting to in-call events through callbacks methods.
 
 ```javascript
 SendBirdCall.addListener(UNIQUE_HANDLER_ID, {