Integrate RecordRTC with Angular 2 -Typescript

RecordRTC is a great library which also supports WebRTC’s getUserMedia API, the api responsible for simplifying audio/video access in HTML5 among others. Since I could not find a good example of how to integrate RecordRTC with Angular 2 I thought of writing one. If you want to see it in action, just clone this repo (Angular2-RecordRTC) and run it.

Let’s see how to integrate RecordRTC with Angular 2 in Typescript. If you already have a Angular2 repo, then skip Step 1.

Step 1: Download Angular2 repo. I prefer preboot/angular2-webpack. Here is my fork of it (angular2-starter) with angular/material and bootstrap cooked into it.

Step 2: install yarn globally. Yarn is a package manager similar to npm but better.

npm install -g yarnpkg

Step 3: install recordrtc using yarn. If this is the first time you are using yarn, it might take sometime but subsequent runs will be faster.

yarn add recordrtc

The yarn add is same as npm install --save.

Step 4: create a folder record-rtc and create the Angular 2 component related files inside it. At the end it should look like this

src/app/
       record-rtc/
           record-rtc.component.ts
           record-rtc.component.html…