Giter VIP home page Giter VIP logo

enablex / one-to-one-video-chat-sample-web-application Goto Github PK

View Code? Open in Web Editor NEW
7.0 4.0 6.0 10.88 MB

This Sample Web Application demonstrates the use of EnableX WebRTC Platform APIs to carry out one to one real time video calling. The main motivation behind this application is to demonstrate usage of APIs and allow developers to ramp up on app by hosting on their own.

Home Page: https://www.enablex.io/cpaas/video-api

JavaScript 27.88% Shell 0.18% CSS 55.34% HTML 16.15% SCSS 0.21% Makefile 0.24%
enablex enablex-platform videochat videocall webrtc rtc apis 1to1 onetoone cpaas

one-to-one-video-chat-sample-web-application's Introduction

1-to-1 RTC: Web App using Node.js with EnableX Web Toolkit

1-to-1 RTC: A Sample Web App using Node.js with EnableX Web Toolkit The Sample Web App demonstrates the use of APIs for EnableX platform to develop basic 1-to-1 RTC (Real Time Communication) Application. The main motivation behind this application is to demonstrate usage of APIs and allow developers to ramp up on app by hosting on their own devices instead of directly using servers.

RTC Applications hosted on EnableX platform run natively on supported set of web browsers without any additional plugin downloads.

This basic 1-to-1 Video Chat Application is developed using HTML, CSS, Bootstrap, JavaScript, jQuery, Node.js and EnxRtc (The EnableX Web Toolkit).

1. Important!

When developing a Client Application with EnxRtc.js ( present in client/js ), make sure to replace the old EnxRtc.js with updated EnxRtc.js polyfills from https://developer.enablex.io/video-api/client-api/web-toolkit/ for RTCPeerConnection and getUserMedia. Otherwise your application will not work in web browsers.

2. Trial

Sign up for a free trial https://portal.enablex.io/cpaas/trial-sign-up/ or try our multiparty video chat https://try.enablex.io/

3. Pre-Requisites

3.1 App Id and App Key

4. Installation

Two methods are provided

  • Setup everything using script or
  • Follow step by step instructions to setup

4.1 Configure and run the app using Script

Prerequisite: latest version of Node.js and git Installed

4.2 Step by Step process to configure and run the app (Jump to point 5. if you have followed 4.1)

4.2.1 Clone project repository

  • Clone this repository git clone https://github.com/EnableX/One-to-One-Video-Chat-Sample-Web-Application.git --recursive

#f03c15 Please note --recursive option. Repo should be cloned recursively to download client app.

4.2.2 SSL Certificates or Self-Signed Certificates

The Application needs to run on https. So, you need to use a valid SSL Certificate for your Domain and point your application to use them.

However you may use self-signed Certificate to run this application locally. There are many Web Sites to get a Self-Signed Certificate generated for you, Google it. Few among them are:

The following below can also be used to create a self-signed certificate.

For Mac/Linux

  cd One-to-One-Video-Chat-Sample-Web-Application
  cd server
  mkdir certs
  sudo openssl req -x509 -newkey rsa:4096 -keyout ./certs/example.key -out ./certs/example.crt -days 10000 -nodes
  sudo chmod 755 ./certs/example.*
  cd ..

For Windows (Use Git Bash)

  cd One-to-One-Video-Chat-Sample-Web-Application
  cd server
  mkdir certs
  openssl req -x509 -newkey rsa:4096 -keyout ./certs/example.key -out ./certs/example.crt -days 10000 -nodes
  chmod 755 ./certs/example.*
  cd ..

4.2.3 Configure

Before you can run this application, configure the service. Copy the server/example.env as server/.env and update the values. Or you can set following system environment variables instead:

  SERVICE_PORT - Node port on which your application will run. Default port set is 5000
  ENABLEX_APP_ID - Your EnableX `App ID` - It's your username for EnableX API and can be found at Dashboard > Projects https://portal.enablex.io/dashboard/
  ENABLEX_APP_KEY - Your EnableX `App Key` - - It's your password for EnableX API and can be found at Dashboard > Projects https://portal.enablex.io/dashboard/

For Mac and Linux, open a terminal window and type the following commands. Note - Replace all the characters after the = with values from your EnableX account:

  export SERVICE_PORT=XXXX
  export ENABLEX_APP_ID=XXXXXXXXXX
  export ENABLEX_APP_KEY=XXXXXXXXX

On Windows, open a powershell / command window and type the following commands. Note that there is no =, just the key and value separated by a space:

  setx SERVICE_PORT 'XXXX'
  setx ENABLEX_APP_ID 'XXXXXXXXX'
  setx ENABLEX_APP_KEY 'XXXXXXXXX'

4.2.4 Build

Run npm install to build the project and the build artifacts will be stored in the ./node_modules directory.

4.2.5 Run Server

Run node server.js inside server folder to start your server.

  cd server
  node server.js

Server started. Listening on Port 5000

5. Test Video Call

  • Open a browser and go to https://localhost:5000/. The browser should load the App. Go to -> Advanced -> Proceed to localhost
  • Don't have a Room ID? Create here (create a new RoomID)
  • Store the Room ID for future use or share
  • Enter a username (e.g. test0) as a moderator
  • Join and allow access to camera and microphone when prompted to start your first webRTC call through EnableX
  • Open another browser tab and enter https://localhost:5000/
  • Enter the same roomID previously created and add a different username (test1) as a participant and click join
  • Now, you should see your own video in both the tabs!

6. Server API

EnableX Server API is a Rest API service meant to be called from Partners' Application Server to provision video enabled meeting rooms. API Access is given to each Application through the assigned App ID and App Key. So, the App ID and App Key are to be used as Username and Password respectively to pass as HTTP Basic Authentication header to access Server API.

For this application, the following Server API calls are used:

To know more about Server API, go to: https://developer.enablex.io/video-api/server-api/

7. Client API

Client End Point Application uses Web Toolkit EnxRtc.js to communicate with EnableX Servers to initiate and manage RTC Communications.

To know more about Client API, go to: https://developer.enablex.io/video-api/client-api/

one-to-one-video-chat-sample-web-application's People

Contributors

andrew-pmgt avatar ashutoshmishraji avatar dependabot[bot] avatar enablexer avatar rajeshg-vcloudx avatar rajeshgoyalg avatar sourav-dhankhar avatar subratthayal avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

one-to-one-video-chat-sample-web-application's Issues

vcxconfig.SERViCE = { ReferenceError: vcxconfig is not defined

I am trying to connect server uisng my aap_id and app_key i am ubable to connect it instead i am getting an error
vcxconfig.SERViCE = { ReferenceError: vcxconfig is not defined

`b-Application-Sample-master\server\vcxconfig.js:42
vcxconfig.SERViCE = {
^

ReferenceError: vcxconfig is not defined
at Object. (D:\my_files\website_projects\testing_website_projects\enablex_video_project\Video-Conferencing-Open-Source-Web-Application-Sample-master\Video-Conferencing-Open-Source-Web-Application-Sample-master\server\vcxconfig.js:42:1)
←[90m at Module._compile (internal/modules/cjs/loader.js:1133:30)←[39m
←[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)←[39m
←[90m at Module.load (internal/modules/cjs/loader.js:977:32)←[39m
←[90m at Function.Module._load (internal/modules/cjs/loader.js:877:14)←[39m
←[90m at Module.require (internal/modules/cjs/loader.js:1019:19)←[39m
←[90m at require (internal/modules/cjs/helpers.js:77:18)←[39m
at Object. (D:\my_files\website_projects\testing_website_projects\enablex_video_project\Video-Conferencing-Open-Source-Web-Application-Sample-master\Video-Conferencing-Open-Source-Web-Application-Sample-master\server\vcxroom.js:13:17)
←[90m at Module._compile (internal/modules/cjs/loader.js:1133:30)←[39m
←[90m at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)←[39m`

Not able to make build for RFS/PROD

Hi, Kindly please suggest how do i get the build setup for RFS and production. I didn't find any build config. Normally for nodes projects, we run a command like npm run build, so that create a build with a directory of name we mention in the config file and then using jenkings, on rfs and prod same is done and the image build is deploy. This application is only running locally using the command ng server.js. So in short kindly provide me the details for RFS and production setup. I have to show demo on monday so need urgent help and support.

Thanks and regards
Som Mitra

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.