Angular 9 中的视频 JS - 实时视频 - “无法解决 videojs”问题？

我正在努力让 videojs 在我的 Angular 9 应用程序中工作。我已经查看了所有现有的 stackoverflow 帖子，应用了他们的解决方案，查看了不同的博客文章和 github 来了解视频 js 的问题，但我仍然遇到“无法解决 videojs”问题。

我希望它的工作原理是，查看该页面的个人可以开始录制自己的视频。

有人可以建议吗？请看下面我的代码@

我的 package.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"
    }
}

错误消息：错误：无法解析“C:\Users\learnerA\中风护理项目\node_modules\videojs-record\dist”中的“videojs”

update（写在这里@tmhao2005，因为我无法将其全部放入评论部分） 应用您的解决方案并指定 webpack 配置名称后，我收到一条错误消息

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'”，但它没有进行任何更改。

请在更新后查看我的代码（我已经安装了您建议的软件包）：

角度.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",
    
  ]
  
}

我认为问题是你的webpack.alias不受影响。另一方面，你的webpack.config.js尚未应用。这是为您提供的解决方案：

• 安装以下软件包，使您能够自定义webpack:

npm i -D @angular-builders/custom-webpack @angular-builders/dev-server

• In angular.json文件，然后更改构建器@angular-devkit/build-angular:browser to @angular-builders/custom-webpack:browser并添加customWebpackConfig:

"build": {
  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      // path to your webpack config
      "path": "./webpack.config.js"
    }
  }
}

• Also in angular.json，替换值build财产来自@angular-devkit/build-angular:dev-server to @angular-builders/custom-webpack:dev-server under serve block.

"serve": {
  "builder": "@angular-builders/custom-webpack:dev-server",
}

关于您的webpack.config.js，解决问题的最少代码是设置别名video.js -> videojs since videojs-record需要模块videojs:

module.exports = {
  resolve: {
    alias: {
      videojs: 'video.js'
    }
  },
}

就是这样！希望它能帮助解决您的问题。