时间戳

首页 > 解决方案 > Angular 6 videojs-record 导致运行时错误

angular - Angular 6 videojs-record 导致运行时错误

问题描述

我正在使用 Angular 6 和 videojs-record 插件。我在我的项目中配置了以下依赖项。

npm install --save video.js
npm install --save videojs-record

后来我使用下面的 import 语句引用了 videojs 插件。

import videojs from 'video.js';
import 'webrtc-adapter';
import RecordRTC from 'recordrtc';
import Record from 'videojs-record/dist/videojs.record.js';

虽然在编译时没有报告错误，但当我点击浏览器时，我在控制台中收到以下错误。

Uncaught ReferenceError: global is not defined
    at Object../node_modules/webrtc-adapter/src/js/adapter_core.js (adapter_core.js:13)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.component.ts (main.js:93)
    at __webpack_require__ (bootstrap:78)
    at Module../src/app/app.module.ts (app.component.ts:13)
    at __webpack_require__ (bootstrap:78)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:78)
    at Object.0 (main.ts:12)
    at __webpack_require__ (bootstrap:78)

请让我知道，我在这里缺少什么？

版本信息： 

"video.js": "^7.2.3",
"videojs-record": "^2.4.1",
"@angular/compiler": "^6.0.3",
"@angular/core": "^6.0.3",

UPDATE-1： 如果我更改 webrtc-adapter 导入

import 'webrtc-adapter'

至

import 'webrtc-adapter/out/adapter_no_global.js';

videojs 失败并出现以下错误。

ERROR Error: plugin "record" does not exist
    at Player.<anonymous> (video.es.js:19615)
    at Array.forEach (<anonymous>)
    at new Player (video.es.js:19611)
    at videojs$1 (video.es.js:24059)
    at AppComponent.push../src/app/app.component.ts.AppComponent.startRecording (app.component.ts:43)
    at Object.eval [as handleEvent] (AppComponent.html:5)
    at handleEvent (core.js:10251)
    at callWithDebugContext (core.js:11344)
    at Object.debugHandleEvent [as handleEvent] (core.js:11047)
    at dispatchEvent (core.js:7710)

更新2：

我尝试使用 angular cli 定制器（https://github.com/nfriend/angular-cli-customizer）并按照https://github.com/collab-project/videojs-record/wiki/Angular中指定的说明进行操作

不幸的是，这也没有用:(

标签： angularwebpackangular6video.jsangular-webpack

解决方案

我遇到了同样的问题，但我使用以下方法解决了它，您的“videojs-record/dist/videojs.record.js”文件未加载到该特定组件上，因此请尝试从 component.ts文件动态加载它

有关更多参考，请参见下面的链接 Dynamically load external javascript file from Angular component

推荐阅读