有没有人将 videojs-record 与 angular 7 集成? [英] is anyone integrated videojs-record with angular 7?

问题描述

我正在尝试使用 videojs-record 录制带音频的视频，而我的应用程序是 angular 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 below https://github.com/collab-project/videojs-record/wiki/Angular but 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

我是 angular 的新手.因此，我们将不胜感激.提前致谢.

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

推荐答案

别担心，我已经自己解决了.在做了一些研究之后，我开始知道，因为我使用 angular cli 来服务和构建，所以我使用了 ngx-build-plus(因为 ng eject 在 angular 7 中已弃用，将从 angular 8 中删除)以使用 angular 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.

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