Angular

Angular

---

WORK IN PROGRESS (see #274)

---

This document describes how to setup Angular with videojs-record.

Setup

Install Angular CLI globally:

npm install -g @angular/cli

Now create a Angular project in a new directory (/tmp/angular-record-app in this case):

cd /tmp
ng new angular-record-app

The Angular CLI installs the necessary npm packages, creates the project files, and populates the project with a simple default app. This can take some time.

Now install videojs-record and @types/video.js using npm:

cd angular-record-app
npm install --save videojs-record @types/video.js

Sample project

Replace src/app/app.module.ts with the following:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { VideoJSComponent } from './videojs.component';

@NgModule({
  declarations: [
    AppComponent,
    VideoJSComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create src/app/videojs.component.ts:

import {
  Component,
  OnInit,
  OnDestroy,
  ElementRef,
  Input
} from '@angular/core';

import videojs from 'video.js';
import * as adapter from 'webrtc-adapter/out/adapter_no_global.js';
import RecordRTC from 'recordrtc';

// register videojs-record plugin with this import
import Record from 'videojs-record/dist/videojs.record.js';

@Component({
  selector: 'videojs',
  templateUrl: './videojs.component.html',
  styleUrls: ['./videojs.component.css']
})

export class VideoJSComponent implements OnInit, OnDestroy {

  // reference to the element itself: used to access events and methods
  private _elementRef: ElementRef

  // index to create unique ID for component
  @Input() idx: string;

  // player config
  @Input() config: any;

  // declare player var
  private player: any; 

  // constructor initializes our declared vars
  constructor(elementRef: ElementRef) {
    this.config = false;
    this.player = false;
  }

  ngOnInit() {}

  // use ngAfterViewInit to make sure we initialize the videojs element
  // after the component template itself has been rendered
  ngAfterViewInit() {
    // ID with which to access the template's video element
    let el = 'video_' + this.idx;

    // setup the player via the unique element ID
    this.player = videojs(document.getElementById(el), this.config, function() {
      // Store the video object
      var myPlayer = this, id = myPlayer.id();

      // print version information at startup
      var msg = 'Using video.js ' + videojs.VERSION +
        ' with videojs-record ' + videojs.getPluginVersion('record') +
        ' and recordrtc ' + RecordRTC.version;
      videojs.log(msg);
    });

    // device is ready
    this.player.on('deviceReady', () => {
      console.log('device is ready!');
    });

    // user clicked the record button and started recording
    this.player.on('startRecord', () => {
      console.log('started recording!');
    });

    // user completed recording and stream is available
    this.player.on('finishRecord', () => {
      // recordedData is a blob object containing the recorded data that
      // can be downloaded by the user, stored on server etc.
      console.log('finished recording: ', this.player.recordedData);
    });

    // error handling
    this.player.on('error', (error) => {
      console.warn(error);
    });
  }

  // use ngOnDestroy to detach event handlers and remove the player
  ngOnDestroy() {
    if (this.player) {
      this.player.dispose();
      this.player = false;
    }
  }

}

Create src/app/videojs.component.html:

<video id="video_{{idx}}" class="video-js vjs-default-skin"></video>

Create src/app/videojs.component.css:

/* change player background color */
#myVideo {
  background-color: #1a535c;
}

Replace src/app/app.component.html with the following:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <videojs [idx]="1" [config]="recordConfig"></videojs>
</div>

Replace src/app/app.component.ts with the following:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-record-app';

  // video.js configuration
  public recordConfig = {
    controls: true,
    autoplay: false,
    fluid: false,
    loop: false,
    width: 320,
    height: 240,
    controlBar: {
      volumePanel: false
    },
    plugins: {
      // configure videojs-record plugin
      record: {
        audio: false,
        video: true,
        debug: true
      }
    }
  };

}

And finally, include the library styles in angular.json. Add them to the styles list of the angular-record-app section:

"styles": [
  "src/styles.css",
  "node_modules/video.js/dist/video-js.min.css",
  "node_modules/videojs-record/dist/css/videojs.record.min.css"
]

Run example

Start the Angular development server:

ng serve

And open http://localhost:4200/ in a browser.