Question

我正在尝试使用videojs-record录制带音频的视频，并且我的应用程序是在angular 7中进行的。这是下面的链接 https://github.com/collab-project/videojs-record/wiki/Angular 但这对我不起作用。

这是我得到的错误

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'

这是我的代码和我在video-recorder.component.ts中对videojs的配置

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;
    }
  }

}

这是我的video-recorder.component.html

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

以下信息可能有助于找出问题所在。

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

我是新手。因此，对此的任何帮助将不胜感激。预先感谢。

Answer 1

不用担心，我已经自己修复了。经过研究后，我知道我在使用角度cli服务和构建时使用了ngx-build-plus（因为ng eject在角度7中已弃用，将从角度8中删除）执行使用角度cli的webpack配置此webpack配置之前丢失。这可能会帮助某人，这就是为什么只是分享。谢谢。

Answer 2

您能给我一个更好的解决方案的想法吗？

我目前在Angular 6中有一个应用程序（没有webpack），我需要包含此插件“ videojs-record”，使应用程序保持原样。

如果我使用“ webpack-dev-server --mode = development --config webpack.config.js ........”启动应用程序，则可以使该示例工作

但是，如果我这样启动，我将无法运行我的应用程序，因为我需要使用CLI从“ ng serve”开始...

您能告诉我您是如何在package.json中拨打电话的吗？

谢谢。

Answer 3

您不能以这种方式使用。如果您正在使用angular cli进行服务或构建，则必须创建部分webpack配置文件，并通过angular cli进行服务或构建。您应该遵循以下内容。

请访问下面的链接并安装软件包，然后按照说明进行配置。

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

您的webpack.partial.js应该看起来像

const webpack = require('webpack');

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

}

scripts文件中的

和package.json应该看起来像

"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"
  },

然后，您可以使用npm start来服务您的应用要构建您，请使用npm run build:dev || npm run build:stage || npm run build:prod 根据环境。

有人用角度7集成了videojs-record吗？

3 个答案: