React

This page shows how to get started with React and videojs-record using the create-react-app.

Create an example application called my-app:

npx create-react-app my-app

Install videojs-record:

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

Edit src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

const videoJsOptions = {
    controls: true,
    width: 320,
    height: 240,
    fluid: false,
    plugins: {
        record: {
            audio: true,
            video: true,
            maxLength: 10,
            debug: true
        }
    }
};

ReactDOM.render(<App  { ...videoJsOptions }/>, document.getElementById('root'));
registerServiceWorker();

Edit src/App.js:

/* eslint-disable */
import React, { Component } from 'react';

import './App.css';
import 'video.js/dist/video-js.css';
import 'videojs-record/dist/css/videojs.record.css';

import videojs from 'video.js';
import 'webrtc-adapter';
import RecordRTC from 'recordrtc';

/*
// the following imports are only needed when you're recording
// audio-only using the videojs-wavesurfer plugin
import WaveSurfer from 'wavesurfer.js';
import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
WaveSurfer.microphone = MicrophonePlugin;

// register videojs-wavesurfer plugin
import Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
*/

// register videojs-record plugin with this import
// eslint-disable-next-line
import Record from 'videojs-record/dist/videojs.record.js';


class App extends Component {
    componentDidMount() {
        // instantiate Video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
            // 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);
        });

        // error handling
        this.player.on('error', function (error) {
            console.warn(error);
        });
    }

    // destroy player on unmount
    componentWillUnmount() {
        if (this.player) {
            this.player.dispose();
        }
    }
    render() {
        return (
        <div data-vjs-player>
            <video id="myVideo" ref={node => this.videoNode = node} className="video-js"></video>
        </div>
        );
    }
}

export default App;

Add this to src/index.css:

/* change player background color */
#myVideo {
  background-color: #ACB2F2;
}

Now eject the app (once):

npm run eject

And adjust the webpack config. Edit config/webpack.config.dev.js:

• add following to plugins array at the bottom of the file:

new webpack.ProvidePlugin({
      videojs: 'video.js/dist/video.cjs.js',
      RecordRTC: 'recordrtc'
}),

• the alias section should look like this:

alias: {
    videojs: 'video.js',
    WaveSurfer: 'wavesurfer.js',

    // Support React Native Web
    // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
    'react-native': 'react-native-web',
},

Now run npm start and it should work!