> Back to EasyRTC Blog posts

EasyRTC TypeScript Support with AngularJS 2 Code Example

Published on November 24, 2016

The EasyRTC Beta Branch now supports TypeScript, making it easier to develop large scale WebRTC applications and integration with modern frameworks based on TypeScript, such as AngularJS 2 and ReactJS.

Files needed for TypeScript support with EasyRTC are found in typescript_support directory on the Beta branch of EasyRTC. The files found in the typescript_support directory contain the declarations needed to use EasyRTC in your TypeScript application. This includes declarations for easyrtc, easyapp, easyrtc_ft, and api/easyrtc_rates.

Please note that TypeScript support for desktop screen capture with EasyRTC is not yet available.

To learn more about TypeScript, visit http://www.typescriptlang.org/

Sample Code using EasyRTC, TypeScript, and AngularJS 2

The sample code found below is a basic example of using EasyRTC within AngularJS 2. This sample code replicates the EasyRTC Simple Audio/Video demonstration found at https://demo.easyrtc.com/demos/demo_audio_video_simple.html, using TypeScript.

To learn more about using AngularJS 2, visit https://angular.io

This sample project runs against a local node server, and therefore, needs to be included within the EasyRTC Beta project folder. To accomplish this, the AngularJS 2 application project has been placed within the EasyRTC demos directory: easyrtc/demos/angularjs2-demo-app (or a project directory name of your own choosing).

The file structure of this sample application uses the basic AngularJS 2 file structure produced by Getting Started Quickstart guide found at: https://angular.io/docs/ts/latest/quickstart.html

Upon creating a fresh AngularJS 2 project, copy and paste the code for the following 3 files into your AngularJS 2 project files:

  1. easyrtc/demo/angularjs2-demo-app/app/app.component.ts
  2. easyrtc/demo/angularjs2-demo-app/app/partials/app.html
  3. easyrtc/demo/angularjs2-demo-app/styles.css

Once your files are copied, start the EasyRTC and AngularJS 2 Node servers respectively, and visit the localhost URL for your AngularJS project. For example: localhost:8080/demos/angularjs2-demo-app/index.html

easyrtc/demo/angularjs2-demo-app/app/app.component.ts

/// <reference path="../../../typescript_support/d.ts.files/client/easyrtc.d.ts" />

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: 'app/partials/app.html'
})

export class AppComponent {

  constructor(private cdr:ChangeDetectorRef) { }

  myId:string = '';
  connectedClientsList:Array<string> = [];

  clearConnectList():void {
    this.connectedClientsList = [];
    this.cdr.detectChanges();
  }
  
  performCall(clientEasyrtcId:string):void {
    let successCB = function(a:string, b:string):void {};
    let failureCB = function(a:string, b:string):void {};
    easyrtc.call(clientEasyrtcId, successCB, failureCB, undefined, undefined);
  }

  buildCaller(easyrtcid:string):(()=>void) {
    return ():void => {
      this.performCall(easyrtcid);
    };
  }

  convertListToButtons (roomName:string, data:Easyrtc_PerRoomData, isPrimary:boolean):void {
    this.clearConnectList();
    for(let easyrtcid in data) {
      this.connectedClientsList.push(easyrtc.idToName(easyrtcid));
    }
    this.cdr.detectChanges();
  }

  updateMyEasyRTCId(myEasyRTCId:string):void {
    this.myId = myEasyRTCId;
    this.cdr.detectChanges();
  }
  
  loginSuccess(easyrtcid:string):void {
    this.updateMyEasyRTCId(easyrtc.cleanId(easyrtcid));
  }

  loginFailure(errorCode:string, message:string):void {
    this.updateMyEasyRTCId('Login failed. Reason: '+ message);
  }

  connect():void {
    easyrtc.setVideoDims(320,240,undefined);
    let convertListToButtonShim = (roomName:string, data:Easyrtc_PerRoomData, isPrimary:boolean):void => {
      this.convertListToButtons(roomName, data, isPrimary);
    }
    easyrtc.setRoomOccupantListener(convertListToButtonShim);
    easyrtc.easyApp("easyrtc.audioVideoSimple", "videoSelf", ["videoCaller"], this.loginSuccess.bind(this), this.loginFailure.bind(this));
  }

  ngAfterViewInit() {
    this.connect();
  }

}

easyrtc/demo/angularjs2-demo-app/app/partials/app.html

<div class="wrapper-app">
  <header><h1>EasyRTC TypeScript with Angular 2</h1></header>
  <div class="wrapper-content">
    <h2>Simple Audio/Video Demo</h2>
    <div><strong>I am:</strong> {{myId}}</div>
    <div class="connect-caller-buttons">
      <h3>Connected Clients:</h3>
      <div id="otherClients"><button *ngFor="let easyrtcId of (connectedClientsList)" (click)="performCall(easyrtcId)">{{easyrtcId}}</button></div>
    </div>
    <div class="video-frames">
      <div class="video-self"><video id="videoSelf"></video></div>
      <div class="video-caller"><video id="videoCaller"></video></div>
    </div>
  </div>
  <footer><div>Copyright &copy; 2016 Skedans Systems Inc.</div></footer>
</div>

easyrtc/demo/angularjs2-demo-app/styles.css

html {
  font-size:10px;
}

body {
  font-size:1.4rem;
  font-family: Arial, Helvetica, sans-serif;
  margin:1rem;
  background-color:#ddd;
}

header,
footer {
  display:block;
  color:#fff;
  font-size:1.4rem;
  padding:2rem;
  background-color:rgb(0,0,0);
}

h1 {
  color:#fff;
  font-size:2.5rem;
  margin:0;
}

h2 {
  color:#000;
  font-size:2rem;
  margin-top:0;
}

div.wrapper-app,
footer div {
  max-width:80rem;
  margin:0 auto;
}

div.wrapper-app {
  border:0.1rem solid #000;
  background-color:#fff;
}

div.wrapper-content {
  min-height:40rem;
  overflow: visible;
  padding:2rem;
}

/** EasyRTC Styles **/

div.connect-caller-buttons {
  margin-bottom:1rem;
}

div.connect-caller-buttons > h3,
div.connect-caller-buttons > div {
  display:inline-block;
}

div.video-frames {
  text-align:center;
}

div.video-self,
div.video-caller {
  width:32rem;
  height:24rem;
  display:inline-block;
  overflow:hidden;
  border:0.1rem solid #000;
  background-color:#ddd;
  margin:0 1.4rem;
}

div.video-caller {
  position:relative; /* Required so that Close (X) button appears */
}

video {
  width:32rem;
  height:24rem;
  object-fit:cover;
}