add angular example and/or documentation

[priyach21]

Hi I am facing issue with video recording and got the below issue.its been 2 days since im trying to fix but dint
In Angular we need to declare a variable for videojs

In component.ts:

let videojs = require('./../../../../../node_modules/video.js/dist/video.js');

ngAfterViewInit() {
var player = videojs("myVideo", {
controls: true,
width: 320,
height: 240,
fluid: false,
plugins: {
record: {
audio: true,
video: true,
maxLength: 15,
debug: true
}
}
});

// error handling
player.on('deviceError', function () {
  console.log('device error:', player.deviceErrorCode);
});

player.on('error', function (error) {
  console.log('error:', error);
});

// user clicked the record button and started recording
player.on('startRecord', function () {
  console.log('started recording!');
});

// user completed recording and stream is available
player.on('finishRecord', function () {
  // the blob object contains the recorded data that
  // can be downloaded by the user, stored on server etc.
  console.log('finished recording: ', player.recordedData);
});
}

angualrcli.json:

"styles": [
"styles.scss",
"assets/sass/style.scss",
"../node_modules/videojs-record/dist/css/videojs.record.css",
"../node_modules/video.js/dist/video-js.min.css"
],
"scripts": [
"assets/js/app.js",
"assets/js/bootstrap.min.js",
"assets/js/bootstrap-select.js",
"assets/js/bootstrap-datepicker.js",
"assets/js/ion.rangeSlider.min.js",
"assets/js/jquery.ui.js",
"assets/js/jquery.scrollbar.js",
"assets/js/photobooth_min.js",
"../node_modules/chart.js/dist/chart.min.js",
"../node_modules/videojs-record/dist/videojs.record.js",
"../node_modules/video.js/dist/video.min.js",
"../node_modules/recordrtc/RecordRTC.js",
"../node_modules/webrtc-adapter/out/adapter.js"
],

index.html

 <script src="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.12.5/video.js"></script>
 <script src="http://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>

css
http://cdnjs.cloudflare.com/ajax/libs/video.js/4.12.5/video-js.css" rel="stylesheet

package.json:

"@angular/cli": "1.4.9",
"recordrtc": "^5.4.7",
"video.js": "^7.1.0",
"videojs-record": "^2.0.3",
"videojs-vr": "^1.4.7",
"videojs-wavesurfer": "^2.5.1",
"webrtc-adapter": "^6.3.2",
"@dfl/videojs-record": "^2.4.1",
"@types/videojs": "^5.16.2",

thanks
priya

[thijstriemstra]

@priyach21 you are using an ancient version of video.js.

<script src="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.12.5/video.js"></script>

Try the latest (7.2.2).

[priyach21]

for videojs().. which reference is required?
let videojs = require('./../../../../../node_modules/video.js/dist/video.js');

I mean video.js or video-record.js ?

ngAfterViewInit() {
var player = videojs("myVideo", {
controls: true,....
.....
}

once i update to the latest version video.getcomponent error got cleared and the other issue plugin- record does not exists is still there and video is displaying black - (camera is not showing)

[thijstriemstra]

@priyach21 take a look at the react wiki for the various imports: https://github.com/collab-project/videojs-record/wiki/React

[thijstriemstra]

Started on a wiki page for this: https://github.com/collab-project/videojs-record/wiki/Angular

But it looks like it's blocked by DefinitelyTyped/DefinitelyTyped#28776 for now because I'm getting this error: (new @types/video.js release fixed this)

ERROR in src/app/videojs.component.ts(11,8): error TS1192: Module '"/private/tmp/angular-record-app/node_modules/@types/video.js/index"' has no default export.

@types/videojs (^5.16.2) is outdated, you need @types/video.js (notice the different package name).

After following the new Angular wiki page I'm now running into:

 ERROR Error: "plugin "record" does not exist"

Looks like the webpack config needs to be adjusted but this is not as easy in angular (6) it seems, there's no ng eject. See angular/angular-cli#10618

This is my first time using Angular but so far it feels very over-engineered. I can agree with https://medium.com/dirtyjs/why-angular-2-4-5-6-sucks-afb36567ad68.

[thijstriemstra]

An example using angular-starter is now available on the wiki: https://github.com/collab-project/videojs-record/wiki/Angular

[ericniaina]

For those who are getting the "Uncaught ReferenceError: videojs is not defined" when following the Angular example:
change the
import * as Record from 'videojs-record/dist/videojs.record.js';
to
import * as Record from 'videojs-record';

as the first one try to access videojs as a global variable.