Vue.js

This page shows how to get started with Vue.js and videojs-record.

Installation

Install the Vue.js CLI globally:

npm install -g @vue/cli

Create a new application called record-app:

vue create --preset default record-app

Install videojs-record:

cd record-app
npm install --save videojs-record

Webpack config

Create vue.config.js with the following content:

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    resolve: {
        alias: {
            videojs: 'video.js',
            WaveSurfer: 'wavesurfer.js',
            RecordRTC: 'recordrtc'
        }
    },
    plugins: [
        new webpack.ProvidePlugin({
            videojs: 'video.js/dist/video.cjs.js',
            RecordRTC: 'recordrtc',
            MediaStreamRecorder: ['recordrtc', 'MediaStreamRecorder']
        })
    ]
  }
}

Application

Create src/components/VideoJSRecord.vue:

<template>
    <video id="myVideo" class="video-js vjs-default-skin"></video>
</template>

<style>
/* change player background color */
#myVideo {
  background-color: #95DDF5;
}
</style>

<script>
    import 'video.js/dist/video-js.css'
    import 'videojs-record/dist/css/videojs.record.css'

    import videojs from 'video.js'
    import Record from 'videojs-record/dist/videojs.record.js'

    export default {
        data() {
            return {
                player: '',
                options: {
                    controls: true,
                    autoplay: false,
                    fluid: false,
                    loop: false,
                    width: 320,
                    height: 240,
                    controlBar: {
                        volumePanel: false
                    },
                    plugins: {
                        // configure videojs-record plugin
                        record: {
                            audio: false,
                            video: true,
                            debug: true
                        }
                    }
                }
            };
        },
        mounted() {
            this.player = videojs('#myVideo', this.options, () => {
                // 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', () => {
                // the blob object contains 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);
            });
        },
        beforeDestroy() { 
            if (this.player) {
                this.player.dispose();
            }
        }
    }
</script>

Change src/App.vue to:

<template>
  <div id="app">
    <VideoJSRecord />
  </div>
</template>

<script>
import VideoJSRecord from './components/VideoJSRecord.vue'

export default {
  name: 'app',
  components: {
    VideoJSRecord
  }
}
</script>

Run example

Start the Vue.js development server:

npm run serve

And open http://localhost:8080 in a browser.