diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..ab70b55
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,245 @@
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env.production
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+### PyCharm ###
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn. Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+local_test
+
+### PyCharm Patch ###
+# Comment Reason: https://github.com/joeblau/gitignore.io/issues/186#issuecomment-215987721
+
+# *.iml
+# modules.xml
+# .idea/misc.xml
+# *.ipr
+
+# Sonarlint plugin
+# https://plugins.jetbrains.com/plugin/7973-sonarlint
+.idea/**/sonarlint/
+
+# SonarQube Plugin
+# https://plugins.jetbrains.com/plugin/7238-sonarqube-community-plugin
+.idea/**/sonarIssues.xml
+
+# Markdown Navigator plugin
+# https://plugins.jetbrains.com/plugin/7896-markdown-navigator-enhanced
+.idea/**/markdown-navigator.xml
+.idea/**/markdown-navigator-enh.xml
+.idea/**/markdown-navigator/
+
+# Cache file creation bug
+# See https://youtrack.jetbrains.com/issue/JBR-2257
+.idea/$CACHE_FILE$
+
+# CodeStream plugin
+# https://plugins.jetbrains.com/plugin/12206-codestream
+.idea/codestream.xml
+
+### VisualStudioCode ###
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+*.code-workspace
+
+# Local History for Visual Studio Code
+.history/
+
+### VisualStudioCode Patch ###
+# Ignore all local history of files
+.history
+.ionide
+
+# End of https://www.toptal.com/developers/gitignore/api/node,pycharm,visualstudiocode
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..6c1c99d
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2021 AirenSoft Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7314050
--- /dev/null
+++ b/README.md
@@ -0,0 +1,306 @@
+# "HTML5 Streaming SDK for OvenMediaEngine" OvenLiveKit for Web
+
+## What is OvenLiveKit for Web?
+In short, OvenLiveKit for Web is **Open-Source** and **HTML5 Streaming SDK** (JavaScript) for [OvenMediaEngine](https://github.com/AirenSoft/OvenMediaEngine), Open-Source Streaming Server with Sub-Second Latency.
+
+OvenLiveKit for Web can send media streams to OvenMediaEngine. This means it can capture the user's webcam from any web browser that supports WebRTC and tranmit it directly to OvenMediaEngine's WebRTC Provider. This makes it easy to build web conferencing calls, video chats, and more.
+
+If you're interested, try out [**WebRTC Input Demo**](https://demo.ovenplayer.com/demo_input.html) based on OvenPlayer.
+
+## What is the goal of this project?
+AirenSoft aims to make it easier for you to build a stable broadcasting/streaming service with Sub-Second Latency.
+Therefore, we will continue developing and providing the most optimized tools for smooth Sub-Second Latency Streaming.
+
+Would you please click on each link below for details:
+* ["Live Streaming Encoder for Mobile" **OvenLiveKit SDK**](https://www.airensoft.com/olk)
+* ["Sub-Second Latency Streaming Server" **OvenMediaEngine**](https://www.ovenmediaengine.com/ome)
+* ["HTML5 Player" **OvenPlayer**](https://www.ovenmediaengine.com/ovenplayer)
+
+## Features
+* Streaming to OvenMediaEngine's WebRTC Provider.
+ * Implement [OvenMediaEngine's signaling protocol](https://airensoft.gitbook.io/ovenmediaengine/live-source/webrtc-beta#custom-webrtc-producer)
+* Built-in Device Capture.
+* Set the Quality of the Input Stream.
+
+## Quick Start
+### Installation
+#### OveliveKit CDN
+```html
+
+```
+#### Install via npm
+```
+$ npm install ovenlivekit
+```
+
+```JavaScript
+import OvenLiveKit from 'ovenlivekit'
+```
+### Getting started
+This is the simplest example of sending a device media stream such as a webcam to OvenMediaEngine's WebRTC Provider.
+```JavaScript
+// Initialize OvenLiveKit
+let ovenLivekit = OvenLiveKit.create();
+
+// Get media stream from user device
+ovenLivekit.getUserMedia().then(function () {
+
+ // Got device stream and start streaming to OvenMediaEngine
+ ovenLivekit.startStreaming('wss://your_oven_media_engine:3333/app/stream?direction=send');
+});
+```
+### Quick demo
+You can see a quick demo in action by cloning the repository.
+1. Clone repository
+```
+$ git clone https://github.com/AirenSoft/OvenLiveKit-Web.git
+```
+```
+$ cd OvenLiveKit-Web
+```
+2. Install development dependencies.
+```
+$ npm install
+```
+3. Open the demo page using the WebPack's built-in web server.
+```
+$ npm run start
+```
+## Configurations & APIs
+
+- [`Initialization and destroying instance`](#)
+ - `OvenLiveKit.create()`
+ - `Configuration`
+ - `instance.remove()`
+- [`Input device listing`](#)
+ - `OvenLiveKit.getDevices()`
+- [`Media APIs`](#)
+ - `instance.attachMedia(videoElement)`
+ - `instance.getUserMedia()`
+- [`Streaming APIs`](#)
+ - `instance.startStreaming()`
+ - `instance.stopStreaming()`
+
+### Initialization and destroying instance
+Configuration parameters could be provided to OvenLiveKit.js upon instantiation of the OvenLiveKit object.
+
+```JavaScript
+// Configuration
+var config = {
+ callbacks: {
+ error: function (error) {
+
+ },
+ connected: function (event) {
+
+ },
+ connectionClosed: function (type, event) {
+
+ },
+ iceStateChange: function (state) {
+
+ }
+ }
+}
+
+// Initialize ovenLivekit instance
+let ovenLivekit = OvenLiveKit.create(config);
+
+// Release all resources and destroy the instance
+ovenLivekit.remove();
+```
+#### `OvenLiveKit.create(config)`
+- parameters
+ - config: [Initialization configurations](#).
+- Initialize OvenLiveKit instance. Please see the [configuration details](#) next.
+
+#### `Configurations`
+To make the library lightweight and easy to use, only callback options are implemented now.
+##### `callbacks.error`
+- type
+ - Function
+- parameters
+ - error: Various Type of Error
+- A callback that receives any errors that occur in an instance of OvenLiveKit.
+- Errors are could occur from `getUserMedia`, `webSocket`, or `peerConnection`.
+
+##### `callbacks.connected`
+- type
+ - Function
+- parameters
+ - event: event object of iceconnectionstatechange
+- This is a callback that occurs when the `RTCPeerConnection.iceConnectionState` becomes `connected`.
+- It means that the media stream is normally being transmitted to OvenMediaEngine's WebRTC Provider.
+
+##### `callbacks.connectionClosed`
+- type
+ - Function
+- parameters
+ - type: (`ice` | `websocket`) Notes which connection is closed.
+ - event: event object of iceconnectionstatechange or websocket
+- A callback that is fired when the websocket's `onclose` event occurs, or when `RTCPeerConnection.iceConnectionState` changes to `failed`, `disconnected`, or `closed`.
+- It may be that the media stream is not being sent normally to OvenMediaEngine.
+##### `callbacks.iceStateChange`
+- type
+ - Function
+- parameters
+ - event: event object of iceconnectionstatechange
+- A callback that fires whenever [`RTCPeerConnection.iceConnectionState`](https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/iceConnectionState) changes.
+- This is useful when checking the current streaming status.
+
+#### `instance.remove()`
+- Release all resources(websocket, peerconnection, mediastream) and destroy the instance.
+
+### Input device listing
+OvenLiveKit provides an API to get a list of user devices for convenience.
+```JavaScript
+// Lists the available media input and output devices
+OvenLiveKit.getDevices().then(function (devices) {
+
+ // Got a list of user devices
+ console.log(devices);
+
+ /*
+ console output is
+
+ {
+ "videoinput": [
+ {
+ "deviceId": "b1ab3a7041b1c9a91037b51d9c380f599f3914297b5c0ce2eb8d385dab3b8812",
+ "label": "c922 Pro Stream Webcam (046d:085c)"
+ }
+ ],
+ "audioinput": [
+ {
+ "deviceId": "default",
+ "label": "default - Microphone(C922 Pro Stream Webcam) (046d:085c)"
+ },
+ {
+ "deviceId": "communications",
+ "label": "Communication - Microphone(C922 Pro Stream Webcam) (046d:085c)"
+ },
+ {
+ "deviceId": "2feb7f29a130802404f47d8ad9adc9418b1a01e0a4d37e60335771aba21f328d",
+ "label": "Microphone(C922 Pro Stream Webcam) (046d:085c)"
+ }
+ ],
+ "audiooutput": [
+ {
+ "deviceId": "default",
+ "label": "default - Headphone(2- Xbox Controller) (045e:02f6)"
+ },
+ {
+ "deviceId": "communications",
+ "label": "Communication - Headphone(2- Xbox Controller) (045e:02f6)"
+ },
+ {
+ "deviceId": "c3d04828621712f9cc006c49486218aca0d89619ac9993809d5f082a2d13a6b0",
+ "label": "Headphone(2- Xbox Controller) (045e:02f6)"
+ },
+ ],
+ "other": []
+ }
+ */
+
+}).catch(function (error) {
+
+ // Failed to get a list of user devices
+ console.log(error);
+});
+```
+#### `OvenLiveKit.getDevices()`
+- This static method lists the available media input and output devices, such as microphones, cameras, headsets, and so forth.
+- `videoinput`, `audioinput`, `audiooutput`, `other` is available input/output devices. You can use `deviceId` to specify a device to streaming or `label` to make device selection UI.
+
+### Media APIs
+OvenLiveKit also provides APIs to control a media stream from a user device.
+```HTML
+
+```
+```JavaScript
+// Create instance
+let ovenLivekit = OvenLiveKit.create();
+
+// Attaching video element for playing device stream
+ovenLivekit.attachMedia(document.getElementById('myVideo'));
+
+// Gets a device stream with a constraint that specifies the type of media to request.
+ovenLivekit.getUserMedia(constraints).then(function (stream) {
+
+ // Got device stream. Ready for streaming.
+}).catch(function (error) {
+
+ // Failed to get device stream.
+});
+```
+#### `instance.attachMedia(videoElement)`
+- parameters
+ - videoElement: HTML `