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

问题描述

我正在尝试使用videojs-record来录制带音频的视频，并且我的应用程序处于角度7.我一直关注着他们的Wiki.这是下面的链接 https://github.com/collab-project/videojs-record/wiki/角度但这对我不起作用.

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 belowhttps://github.com/collab-project/videojs-record/wiki/Angularbut this does not work for me.

这是我得到的错误

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的配置

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

}

这是我的video-recorder.component.html

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.

推荐答案

不用担心，我已经自己修复了它.经过一些研究后，我知道当我使用angular cli进行服务和构建时，所以我使用了 ngx-build-plus (因为在角7中弃用了ng eject)以使用角cli执行webpack配置.此Webpack配置之前是丢失的.这可能会帮助某人，这就是为什么只是分享.谢谢.

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.

这篇关于有人用角度7集成了videojs-record吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！