Angular 9中的视频JS-实时视频-'无法解决videojs'问题? [英] Video JS in Angular 9 - live video - 'Can't resolve videojs' problem?
问题描述
我正在努力让videojs在我的angular 9应用程序中工作.我已经查看了所有exisitng stackoverflow帖子,应用了它们的解决方案,查看了不同的博客帖子和github,以了解视频js的问题,但是我仍然遇到无法解决videojs"的问题.
I am struggling to get the videojs to work in my angular 9 app. I have viewed all the exisitng stackoverflow posts, applied their solution, looked at different blog posts and github for issues with video js but I still have the 'Can't resolve videojs' problem.
我希望它能正常工作,因为查看页面的个人可以开始录制自己的视频.
I would like it to work in that an individual viewing the page could start recording a video of themselves.
有人可以请教吗?请在下面查看我的代码@
Can someone please advise? Please see my code below@
我的package.json文件:
my package.json file:
{
"name": "post-stroke-care-project",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.9",
"@angular/common": "~9.1.9",
"@angular/compiler": "~9.1.9",
"@angular/core": "~9.1.9",
"@angular/forms": "~9.1.9",
"@angular/platform-browser": "~9.1.9",
"@angular/platform-browser-dynamic": "~9.1.9",
"@angular/router": "~9.1.9",
"@fortawesome/angular-fontawesome": "^0.6.1",
"@fortawesome/fontawesome-svg-core": "^1.2.29",
"@fortawesome/free-brands-svg-icons": "^5.13.1",
"@fortawesome/free-regular-svg-icons": "^5.13.1",
"@fortawesome/free-solid-svg-icons": "^5.13.1",
"@fullcalendar/angular": "^5.1.0",
"@fullcalendar/daygrid": "^5.1.0",
"@fullcalendar/interaction": "^5.1.0",
"@types/video.js": "^7.3.10",
"angular-google-charts": "^1.1.4",
"bootstrap": "^4.5.0",
"core-js": "^3.6.5",
"fullcalendar": "^5.1.0",
"html-webpack-plugin": "^4.3.0",
"jquery": "^3.5.1",
"moment": "^2.27.0",
"ngx-build-plus": "^10.1.1",
"popper.js": "^1.16.1",
"raw-loader": "^4.0.1",
"rxjs": "~6.5.4",
"rxjs-compat": "^6.6.0",
"ts-loader": "^8.0.1",
"tslib": "^1.10.0",
"video.js": "^7.8.4",
"videojs-record": "^4.0.0",
"webpack": "^4.44.0",
"webpack-cli": "^3.3.12",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.7",
"@angular/cli": "~9.1.7",
"@angular/compiler-cli": "~9.1.9",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^12.12.53",
"codelyzer": "^5.1.2",
"jasmine": "^3.6.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~3.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~7.0.0",
"ts-node": "~8.3.0",
"tslint": "~6.1.0",
"typescript": "~3.8.3",
"webpack-dev-server": "^3.11.0"
}
}
webpack.config.js文件:
webpack.config.js file:
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
entry: './src/main.ts',
resolve: {
extensions: ['.ts', '.js'],
alias: {
videojs: 'video.js',
WaveSurfer: 'wavesurfer.js',
RecordRTC: 'recordrtc'
}
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader']
},
{
test: /\.(html|css)$/,
use: 'raw-loader'
}
]
},
plugins: [
new ProvidePlugin({
videojs: 'video.js/dist/video.cjs.js',
RecordRTC: 'recordrtc'
}),
new HtmlWebpackPlugin({ template: './src/index.html' })
]
}
video component.ts文件:
video component.ts file:
import {
Component,
OnInit,
OnDestroy,
ElementRef
} from '@angular/core';
import videojs from 'video.js';
import * as adapter from 'webrtc-adapter/out/adapter_no_global.js';
import * as RecordRTC from 'recordrtc';
import * as Record from 'videojs-record/dist/videojs.record.js';
@Component({
selector: 'videojs-record',
template: `
<style>
/* change player background color */
.video-js video {
background-color: #42f489;
}
</style>
<video id="video_{{idx}}" class="video-js vjs-default-skin" playsinline></video>
`
})
export class VideorComponent implements OnInit, OnDestroy {
// reference to the element itself: used to access events and methods
private _elementRef: ElementRef
// index to create unique ID for component
idx = 'clip1';
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,
bigPlayButton: false,
controlBar: {
volumePanel: false
},
plugins: {
/*
// wavesurfer section is only needed when recording audio-only
wavesurfer: {
backend: 'WebAudio',
waveColor: '#36393b',
progressColor: 'black',
debug: true,
cursorWidth: 1,
displayMilliseconds: true,
hideScrollbar: true,
plugins: [
// enable microphone plugin
WaveSurfer.microphone.create({
bufferSize: 4096,
numberOfInputChannels: 1,
numberOfOutputChannels: 1,
constraints: {
video: false,
audio: true
}
})
]
},
*/
// 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 component.html文件:
video component.html file:
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>Angular videojs-record example</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- styles -->
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
<!-- videojs.wavesurfer.css is only required when recording audio-only
<link href="node_modules/videojs-wavesurfer/dist/css/videojs.wavesurfer.css" rel="stylesheet">
-->
<link href="node_modules/videojs-record/dist/css/videojs.record.css" rel="stylesheet">
</head>
<body>
<videojs-record></videojs-record>
</body>
</html>
webpack.externals.js:
webpack.externals.js:
const webpack = require('webpack');
module.exports = {
"externals": {
"rxjs": "rxjs",
"@angular/core": "ng.core",
"@angular/common": "ng.common",
"@angular/common/http": "ng.common.http",
"@angular/platform-browser": "ng.platformBrowser",
"@angular/platform-browser-dynamic": "ng.platformBrowserDynamic",
"@angular/compiler": "ng.compiler",
"@angular/elements": "ng.elements",
// Uncomment and add to scripts in angular.json if needed
// "@angular/router": "ng.router",
// "@angular/forms": "ng.forms"
}
}
错误消息:错误:无法解析"C:\ Users \ learnerA \ stroke-care-project \ node_modules \ videojs-record \ dist"中的"videojs"
Error message:Error: Can't resolve 'videojs' in 'C:\Users\learnerA\stroke-care-project\node_modules\videojs-record\dist'
更新(将其写在这里@ tmhao2005,因为我无法在评论部分中全部放入它)应用您的解决方案并指定webpack配置名称后,我收到一条错误消息,指出
update (writing it here @tmhao2005 as I am unable to fit it all in the comments section) Upon applying your solution and specifying the webpack config name, I receive an error stating
WARNING in C:\Users\j\post-stroke-care-project\src\polyfills.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
根据您的建议,我已删除了"entry:'./src/main.ts",但未进行任何更改.
As per your advise I have removed `entry: './src/main.ts', but it didn't make any changes.
请在更新后查看我的代码(我已经安装了您建议的软件包):
Please see my code after the updates ( I have installed the packages you've suggested):
angular.json文件:
angular.json file:
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"post-stroke-care-project": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig":{
"path":"./webpack.config.js"
},
"outputPath": "dist/post-stroke-care-project",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/fullcalendar/main.min.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/moment/min/moment.min.js",
"node_modules/fullcalendar/main.min.js",
{
"bundleName": "polyfill-webcomp-es5",
"input": "node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
},
{
"bundleName": "polyfill-webcomp",
"input": "node_modules/@webcomponents/webcomponentsjs/bundles/webcomponents-sd-ce-pf.js"
},
"node_modules/rxjs/bundles/rxjs.umd.js",
"node_modules/@angular/core/bundles/core.umd.js",
"node_modules/@angular/common/bundles/common.umd.js",
"node_modules/@angular/common/bundles/common-http.umd.js",
"node_modules/@angular/compiler/bundles/compiler.umd.js",
"node_modules/@angular/platform-browser/bundles/platform-browser.umd.js",
"node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
"options": {
"browserTarget": "post-stroke-care-project:build"
},
"configurations": {
"production": {
"browserTarget": "post-stroke-care-project:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "post-stroke-care-project:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "post-stroke-care-project:serve"
},
"configurations": {
"production": {
"devServerTarget": "post-stroke-care-project:serve:production"
}
}
}
}
}
},
"defaultProject": "post-stroke-care-project"
}
tsconfig.app.json
tsconfig.app.json
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts",
]
}
推荐答案
我认为问题在于您的 webpack.alias
没有受到影响.另一方面,您的 webpack.config.js
尚未应用.这是为您提供的解决方案:
I think the problem is your webpack.alias
doesn't get affected. On the other hand, your webpack.config.js
is not applied yet. Here is the solution for you:
- 安装以下软件包,这些软件包使您能够自定义
webpack
:
npm i -D @angular-builders/custom-webpack @angular-builders/dev-server
- 在
angular.json
文件中,然后将构建器从@ angular-devkit/build-angular:browser
更改为@ angular-builders/custom-webpack:browser
并添加customWebpackConfig
: - In
angular.json
file, then change the builder from@angular-devkit/build-angular:browser
to@angular-builders/custom-webpack:browser
and add thecustomWebpackConfig
:
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
// path to your webpack config
"path": "./webpack.config.js"
}
}
}
- 也在
angular.json
中,将build
属性的值从@ angular-devkit/build-angular:dev-server
替换为<serve
块下的code> @ angular-builders/custom-webpack:dev-server . - Also in
angular.json
, replace value ofbuild
property from@angular-devkit/build-angular:dev-server
to@angular-builders/custom-webpack:dev-server
underserve
block.
"serve": {
"builder": "@angular-builders/custom-webpack:dev-server",
}
关于您的 webpack.config.js
,解决问题的最小代码是从 video.js
->中设置别名. videojs
,因为 videojs-record
需要模块 videojs
:
Regarding to your webpack.config.js
, the minimal code to resolve problem is to set alias from video.js
-> videojs
since videojs-record
requires module videojs
:
module.exports = {
resolve: {
alias: {
videojs: 'video.js'
}
},
}
就是这样!希望这将有助于解决您的问题.
That's it! Hopefully it would help to resolve your problem.
这篇关于Angular 9中的视频JS-实时视频-'无法解决videojs'问题?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!