device error: ReferenceError: MRecordRTC is not defined

[UnknownMi]

Description

There is a project build with Vue and webpack, now I add the 'videojs-record' into the project

Steps to reproduce

npm install videojs-record --save
then I add 'video.js' in webpack like this

new webpack.ProvidePlugin({
           videojs: "video.js",
          "window.videojs": "video.js"
        }),

test.vue

<template>
    <div class="videoPage">
        <video id="myVideo" class="video-js vjs-default-skin"></video>
    </div>
</template>
<style lang='less'> 
</style>
<script>
    import 'videojs-record';
    import 'video.js/dist/video-js.css';
    import 'videojs-record/dist/css/videojs.record.css';

    export default {
        data() {
            return {}
        },
        methods: {},
        created() {

        },
        computed: {},
        mounted () {
            var player = videojs("myVideo", {
                controls: true,
                width: 320,
                height: 240,
                fluid: false,
                controlBar: {
                    volumePanel: false
                },
                plugins: {
                    record: {
                        audio: false,
                        video: true,
                        maxLength: 5,
                        debug: true
                    }
                }
            });

            // error handling
            player.on('deviceError', function() {
                console.warn('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);
            });
        },
        watch: {},
        components: {}
    }
</script>

Results

When I click the record button, although the camare is worked, but the video is black.

Error output

device error: ReferenceError: MRecordRTC is not defined
  at RecordRTCEngine.setup (record-rtc.js?d50f:57)
  at Record.onDeviceReady (videojs.record.js?c957:529)
  at <anonymous>

versions

videojs

what version of videojs does this occur with?
npm latest version

browsers

what browser are affected?
chrome

Please help me!
Thank you!!

[UnknownMi]

I try to edit the 'record-rtc.js'...and it's working...

value: function setup(stream, mediaType, debug) {
            this.inputStream = stream;
            this.mediaType = mediaType;
            this.debug = debug;

            // setup RecordRTC
            this.engine = new MRecordRTC();                         //=====>here
            this.engine.mediaType = this.mediaType;
            this.engine.disableLogs = !this.debug;
            this.engine.mimeType = this.mimeType;

            // audio settings
            this.engine.bufferSize = this.bufferSize;
            this.engine.sampleRate = this.sampleRate;
            this.engine.numberOfAudioChannels = this.audioChannels;

            // video/canvas settings
            this.engine.video = this.video;
            this.engine.canvas = this.canvas;

            // animated gif settings
            this.engine.quality = this.quality;
            this.engine.frameRate = this.frameRate;
            if (this.onTimeStamp !== undefined) {
                this.engine.timeSlice = this.timeSlice;
                this.engine.onTimeStamp = this.onTimeStamp;
            }

            // connect stream to recording engine
            this.engine.addStream(this.inputStream);
        }

Changed to

value: function setup(stream, mediaType, debug) {
            this.inputStream = stream;
            this.mediaType = mediaType;
            this.debug = debug;

            // setup RecordRTC
            this.engine = new RecordRTC.MRecordRTC();                     //=======>here
            this.engine.mediaType = this.mediaType;
            this.engine.disableLogs = !this.debug;
            this.engine.mimeType = this.mimeType;

            // audio settings
            this.engine.bufferSize = this.bufferSize;
            this.engine.sampleRate = this.sampleRate;
            this.engine.numberOfAudioChannels = this.audioChannels;

            // video/canvas settings
            this.engine.video = this.video;
            this.engine.canvas = this.canvas;

            // animated gif settings
            this.engine.quality = this.quality;
            this.engine.frameRate = this.frameRate;
            if (this.onTimeStamp !== undefined) {
                this.engine.timeSlice = this.timeSlice;
                this.engine.onTimeStamp = this.onTimeStamp;
            }

            // connect stream to recording engine
            this.engine.addStream(this.inputStream);
        }

[thijstriemstra]

thanks for the report and suggested fix!

[thijstriemstra]

Should be part of 2.0.1 release. Fixed with 16b310a.