Angular

Angular

This document describes how to setup Angular (version 6 or newer) with videojs-record.

Installation

This tutorial uses the Angular starter kit to quickly setup an Angular development environment.

Clone the starter kit using Git:

git clone --depth 1 https://github.com/gdi2290/angular-starter.git

Change to the repository directory and install the dependencies:

cd angular-starter
npm install

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

Finally, install and save videojs-record and @types/video.js using npm:

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

Sample project

Create src/app/videojs.record.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 * as RecordRTC from 'recordrtc';

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

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

export class VideoJSRecordComponent 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;

  private config: any;
  private player: any; 
  private plugin: any;

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

    // save reference to plugin (so it initializes)
    this.plugin = Record;

    // video.js configuration
    this.config = {
      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
        }
      }
    };
  }

  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, () => {
      console.log('player ready! id:', el);

      // 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', (element, error) => {
      console.warn(error);
    });

    this.player.on('deviceError', () => {
      console.error('device error:', this.player.deviceErrorCode);
    });
  }

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

}

Create src/app/videojs.record.component.html:

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

Create src/app/videojs.record.component.css:

/* change player background color */
.video-js video {
  background-color: #42f489;
}

Add a VideoJSRecordComponent import in src/app/app.module.ts:

import { VideoJSRecordComponent } from './videojs.record.component';

And then add VideoJSRecordComponent to the @NgModule declarations:

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
    AboutComponent,
    HomeComponent,
    NoContentComponent,
    XLargeDirective,
    VideoJSRecordComponent
  ],

Import the extra required stylesheets in src/styles.scss:

@import '~video.js/dist/video-js.css';
/*
videojs.wavesurfer.css is only required when recording audio-only:
@import '~videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
*/
@import '~videojs-record/dist/css/videojs.record.css';

And finally, add the component to the template in src/app/app.component.ts:

<videojs-record [idx]="1"></videojs-record>

Webpack config

Add a ProvidePlugin import at the top of config/webpack.common.js:

const ProvidePlugin = require('webpack/lib/ProvidePlugin');

And change the alias definition in the resolve section to:

alias: {
    videojs: 'video.js',
    WaveSurfer: 'wavesurfer.js',
    RecordRTC: 'recordrtc'
}

Finally, add the ProvidePlugin to the plugins section at the bottom of the file:

plugins: [
  new ProvidePlugin({
    videojs: 'video.js/dist/video.cjs.js',
    RecordRTC: 'recordrtc',
    MediaStreamRecorder: ['recordrtc', 'MediaStreamRecorder']
  }),

Run example

Start the development server:

npm start

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