有人将 videojs-record 与 angular 7 集成了吗?
is anyone integrated videojs-record with angular 7?
我正在尝试使用 videojs-record 录制带有音频的视频,我的应用程序在 angular 7. 我关注了他们的 wiki。这是下面的 link
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'
这是我的代码和视频中videojs的配置-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;
}
}
}
这是我的视频-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
我是 angular 的新手。因此,对此的任何帮助将不胜感激。提前致谢。
大家不用担心,我已经自己解决了。在做了一些研究之后,我开始知道当我使用 angular cli 来服务和构建时,我使用了 ngx-build-plus(因为 ng eject
在 angular 7 中被弃用并且将会从 angular 中删除 8) 使用 angular cli 执行 webpack 配置。之前缺少此 webpack 配置。这可能会帮助某些人,这就是为什么要分享。谢谢。
你不能那样用。如果您使用 angular cli 来提供服务或构建,那么您必须创建一个部分 webpack 配置文件并通过 angular cli 提供或构建它。您应该遵循以下事项。
请访问下面link并安装软件包并按照说明配置您的东西。
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
],
}
package.json
文件中的 和 scripts
应该类似于
"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
基于环境。
我正在尝试使用 videojs-record 录制带有音频的视频,我的应用程序在 angular 7. 我关注了他们的 wiki。这是下面的 link 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'
这是我的代码和视频中videojs的配置-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;
}
}
}
这是我的视频-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
我是 angular 的新手。因此,对此的任何帮助将不胜感激。提前致谢。
大家不用担心,我已经自己解决了。在做了一些研究之后,我开始知道当我使用 angular cli 来服务和构建时,我使用了 ngx-build-plus(因为 ng eject
在 angular 7 中被弃用并且将会从 angular 中删除 8) 使用 angular cli 执行 webpack 配置。之前缺少此 webpack 配置。这可能会帮助某些人,这就是为什么要分享。谢谢。
你不能那样用。如果您使用 angular cli 来提供服务或构建,那么您必须创建一个部分 webpack 配置文件并通过 angular cli 提供或构建它。您应该遵循以下事项。
请访问下面link并安装软件包并按照说明配置您的东西。
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
],
}
package.json
文件中的 和 scripts
应该类似于
"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
基于环境。