Я изо всех сил пытаюсь заставить видео js работать в моем приложении angular 9. Я просмотрел все существующие сообщения stackoverflow, применил их решение, просмотрел разные сообщения в блогах и github на предмет проблем с видео js, но у меня все еще есть проблема «Не удается разрешить видео js».
Я бы хотел, чтобы человек, просматривающий страницу, мог начать записывать собственное видео.
Может кто-нибудь посоветует? Пожалуйста, посмотрите мой код ниже @
мой пакет. json файл:
{
"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 файл:
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' })
]
}
видеокомпонент. ts файл:
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;
}
}
}
видеокомпонент. html файл:
<!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:
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"
}
}
Сообщение об ошибке: Ошибка : Не удается разрешить 'video js' in 'C: \ Users \ LearnerA \ stroke-care-project \ node_modules \ video js -record \ dist'
фрагмент плитки, находящейся в указанной выше папке
update (пишу здесь @ tmhao2005, так как я не могу уместить все это в разделе комментариев) После применения вашего решения и указания имени конфигурации веб-пакета я получаю сообщение об ошибке с указанием
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', но никаких изменений не внес.
Пожалуйста, посмотрите мой код после обновления (я установил предложенные вами пакеты):
angular. json файл:
{
"$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
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts",
]
}