Angular 6 videojs-record results in runtime error

Question

I am using Angular 6 along with videojs-record plugin. I configured following dependencies in my project.

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

Later I referenced the videojs plugin using the following import statement.

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

While there is no error reported at the time of compilation, when I hit the browser I get following error in console.

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)

Please let me know, what I am missing here?

Version Information:

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

UPDATE-1: If I change webrtc-adapter import from

import 'webrtc-adapter'

to

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

videojs fails with the following error.

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)

UPDATE-2:

I tried using angular cli customizer (https://github.com/nfriend/angular-cli-customizer) and followed instructions specified in https://github.com/collab-project/videojs-record/wiki/Angular

Unfortunately that too didn't work :(

I didn't install it exclusively, but it is present in node_modules directory. I guess it downloaded due to transitive dependency. — CuriousMind, Oct 07 '18 at 08:59
this looks like you are using the master version instead of one of the versions published on NPM. Try the npm version, this might be a bug in master. — Philipp Hancke, Oct 07 '18 at 14:48
I am using following versions - "video.js": "^7.2.3", "videojs-record": "^2.4.1", — CuriousMind, Oct 08 '18 at 06:53

score 0 · Answer 1 · answered May 24 '19 at 12:52

I had the same issue but I solved it by using the below methodology, Your "videojs-record/dist/videojs.record.js" file is not loading on that particular component so please try loading it dynamically from the component.ts file

For more reference see below link Dynamically load external javascript file from Angular component

Angular 6 videojs-record results in runtime error

1 Answers1