is anyone integrated videojs-record with angular 7?

问题

I am trying to record video with audio using videojs-record and my application is in angular 7. I have followed their wiki. Here is the link below https://github.com/collab-project/videojs-record/wiki/Angular but this does not work for me.

here is the error what I am getting

ERROR in ./node_modules/videojs-record/dist/videojs.record.js
Module not found: Error: Can't resolve 'RecordRTC' in '/path/to/project/root/node_modules/videojs-record/dist'
ERROR in ./node_modules/videojs-record/dist/videojs.record.js
Module not found: Error: Can't resolve 'videojs' in '/path/to/project/root/node_modules/videojs-record/dist'

Here is my code and my configuration for videojs in video-recorder.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: 'app-video-recorder',
  templateUrl: './video-recorder.component.html',
  styleUrls: ['./video-recorder.component.scss']
})
export class VideoRecorderComponent 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;
    }
  }

}

and here is my video-recorder.component.html

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

Below information may help to figure it out the issue.

Angular CLI: 7.2.3
Node: 10.15.1
OS: linux x64
Angular: 7.2.2
... common, compiler, core, forms, language-service
... platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.3
@angular-devkit/build-angular     0.12.3
@angular-devkit/build-optimizer   0.12.3
@angular-devkit/build-webpack     0.12.3
@angular-devkit/core              7.2.3
@angular-devkit/schematics        7.2.3
@angular/animations               7.2.7
@angular/cdk                      7.3.0
@angular/cli                      7.2.3
@angular/compiler-cli             7.2.7
@ngtools/webpack                  7.2.3
@schematics/angular               7.2.3
@schematics/update                0.12.3
rxjs                              6.3.3
typescript                        3.2.4

I am new to angular. So any help on this will be appreciated. Thanks in advance.

回答1:

No worries guys, I have fixed it by myself. After doing some research I came to know that as I was using angular cli to serve and build so I have used ngx-build-plus (as ng eject is deprecated in angular 7 and will be removed from angular 8) to execute webpack config using angular cli. This webpack config was missing before. This may help someone that's why just shared. Thank you.

回答2:

Could you give me a better idea of this solution?

I currently have an application in Angular 6 (no webpack) and I need to include this plugin "videojs-record", keeping the application as is.

I can make an example work if I start the application using "webpack-dev-server --mode = development --config webpack.config.js ........"

But if I start like this, I can not run my application because I need to start with "ng serve" using the CLI ...

Could you tell me how you made the call in package.json?

Thank you.

回答3:

you can't use in that way. if you are using angular cli to serve or build then you have to create a partial webpack config file and serve or build it through angular cli. You should follow below things.

Please visit below link and install the package and follow the instruction to configure your stuffs.

https://www.npmjs.com/package/ngx-build-plus

Your webpack.partial.js should look like

const webpack = require('webpack');

module.exports = {
    resolve: {
        alias: {
            // place your config
        }
    },
    plugins: [
        // place your config
    ],

}

and scripts in package.json file should look like

"scripts": {
    "ng": "ng",
    "start": "ng serve --extra-webpack-config webpack.partial.js",
    "build": "ng build --extra-webpack-config webpack.partial.js",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build:prod": "ng build --prod --extra-webpack-config webpack.partial.js",
    "build:stage": "ng build --prod -c staging --extra-webpack-config webpack.partial.js",
    "build:dev": "ng build -c development --extra-webpack-config webpack.partial.js"
  },

Then you can serve your app using npm start To build you use npm run build:dev || npm run build:stage || npm run build:prod based on the environment.

来源：https://stackoverflow.com/questions/55832898/is-anyone-integrated-videojs-record-with-angular-7

标签

angular7

video.js

videojs-record