Vdotok JS One-to-One Audio/Video Call

This is a demo project to demonstrate “One-to-One Audio/Video Call” using Angular 9+.

Live Demo

Click here to visit the live demo of VdoTok JS One-to-One Audio/Video Call.

Prerequisites:

• Node v4.x.x or later
• npm v3.x.x or later
• git version any

To verify the version of Node and npm, open Terminal/Console window and run node -v and npm –v. Older versions produce errors.

Click here to download and install the latest versions of Node and npm.

Click here to download and install the latest versions of git

We recommend nvm for managing multiple versions of node and npm.

Sign up to get credentials i.e Project ID, Authentication Token.

Register at VdoTok to get Authentication Token and Project ID.

Setting up the local environment

To install Angular on your local system, you need the following:

Node

Angular requires an active LTS or maintenance LTS version of Node. For more information on installing Node, see nodejs.org. If you are unsure what version of Node runs on your system, run node -v in a Terminal window.

npm package manager

Angular, the Angular CLI, and Angular applications depend npm packages on npm packages for many features and functions. To download and install npm packages, you need an npm Package Manager. This guide uses the npm client command line interface, which is installed with Node by default. To check that you have the npm client installed, run npm -v in a terminal window.

Install the Angular CLI

You can use the Angular CLI to create projects, generate application and library code, and perform a variety of ongoing development tasks such as testing, bundling, and deployment.

To install the Angular CLI, open a terminal window (ctrl + shift + c) and run the following command:

   npm install –g @angular/cli

Visit Angular Setup for more information.

Clone Repo

• Clone this Repository URL into new project folder (e.g., my-proj).

    git clone https://github.com/vdotok/JS-one2one
    cd my-proj

Register at VdoTok to get Authentication Token and Project ID.

1. Click on this link -> https://vdotok.com/ in Chrome.

2. This will navigate to Sign Up page, where the User is required to enter the following information: First Name > Last Name > Email > Country > Password. Select Sign Up For Free button

3. After successfully sign up User navigates to the main dashboad of VDOTOK. Where user can find the ProjectID and Api Key.

After successful registration, you can update the existing projectID with your own projectID.

Add PROJECT ID and AUTHENTICATION Token.

• After successful registration, you can update the existing projectID with your own projectID, Which you will recieve in the response of register request.
• For One to One call in the application, You can update the projectID by following these steps. ( JS-ONE2ONE -> src -> app -> shared -> services -> pubsub.service.ts ).

You have to Update Project_id at the Login and Signup request by following these steps.

• At Login request. ( JS-ONE2ONE -> src -> app -> components -> login -> login.component.ts )
• At Signup request. ( JS-ONE2ONE -> src -> app -> components -> sign-up -> sign-up.component.ts )

After replacing the projectID at all the above places, compile and run the project.

Base URL

You have to update BaseUrl with your own apiBaseUrl. You can update apiBaseUrl by following these steps.

• In environment.prod.ts File, (JS-ONE2ONE -> src -> environments -> environment.prod.ts)
• In environment.ts File, (JS-ONE2ONE -> src -> environments -> environment.ts)

Install npm packages

Please refer to the above-stated npm and nvm version notes.

• Install the npm packages described in the package.json and verify that it works:

  npm install
  ng serve

• Open browser, application is running at http://localhost:4200

• Create New Account using Sign-up Form, and use the application

How to Generate and Install Build:

Follow the commands below to generate a “build”

  ng build
  ng build --aot --configuration production --build-optimizer --outputHashing=all

How to Configure SDK:

Add SDK into your index.html file. Declare a variable for your component or service: declare const MVDOTOK: any;

User provides config to initiate the SDK

const Client = new MVDOTOK.Client({
      projectID: "****",
      secret: "********************",
    });
    Client.on("authenticated", (res) => {
      let user = StorageService.getUserData();
      this.Client.Register(user.ref_id.toString(), user.authorization_token.toString());
    });

After Successful configuation, you can run the projcet locally by using this command.

    npm start or
    ng serve

Now open the browser and you can see the application at http://localhost:4200