Plugin "record" does not exist in NextJS

[ajparrah]

Description

I'm trying to run the react example on NextJS, but it doesn't work. However, if I use create-react-app it works fine...

If i try to run without plugins key on options, it works fine, i can reproduce a video with no problem

Well, I needed to make some additional things to be able to get this result. NextJS makes a pre-rendering on server and this library doesn't work on server (I got an error that i solved using Dynamic Import preventing Server Side Rendering) https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr. So that, I geting this error now, but i'm sure about videojs works fine...

Plugin "record" does not exist.

Steps to reproduce

Video Example Component

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

import 'video.js/dist/video-js.css';
import videojs from 'video.js';

import 'webrtc-adapter';
import RecordRTC from 'recordrtc';

// register videojs-record plugin with this import
import 'videojs-record/dist/css/videojs.record.css';
import Record from 'videojs-record/dist/videojs.record.js';

class VideoExample extends Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, () => {
      // print version information at startup
      const version_info =
        'Using video.js ' +
        videojs.VERSION +
        ' with videojs-record ' +
        videojs.getPluginVersion('record') +
        ' and recordrtc ' +
        RecordRTC.version;
      videojs.log(version_info);
    });

    // 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', () => {
      // recordedData is a blob object containing 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);
    });
  }

  // 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 vjs-default-skin"
          playsInline></video>
      </div>
    );
  }
}

export default VideoExample;

Video Page

import { NextPage } from 'next';
import dynamic from 'next/dynamic';

const DynamicComponentWithNoSSR = dynamic(
  () => import('@Components/Video/VideoExample'),
  { ssr: false },
);

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

const VideoPage: NextPage<{}> = () => {
  return (
    <div className="flex">
      <h1>Hola</h1>
      <DynamicComponentWithNoSSR {...videoJsOptions} />
    </div>
  );
};

export default VideoPage;

Results

Expected

Video player with record capabilities

Actual

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs-record: 4.5.0

browsers

Brave - Version 1.27.109 Chromium: 92.0.4515.115 (Official Build) (64-bit)

OSes

Edition Windows 10 Home
Version 20H2
Installed on ‎4/‎24/‎2021
OS build 19042.1110
Experience Windows Feature Experience Pack 120.2212.3530.0

[thijstriemstra]

No idea. Maybe this helps? https://github.com/vercel/next.js/tree/canary/examples/with-videojs

[ajparrah]

@thijstriemstra Yes, i tried it and it works fine. However, when i try to integrate with videojs-record i get the same error

[ajparrah]

I found the solution... This line was the error, I replaced from import Record from 'videojs-record/dist/videojs.record.js'; to only import 'videojs-record/dist/videojs.record.js'; and it works fine. I would like to send a PR with a NextJS Example to help preventing this confusion later. Also, with function component (i want to test it well before)

Video Example Component

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

import 'video.js/dist/video-js.css';
import videojs from 'video.js';

import 'webrtc-adapter';
import RecordRTC from 'recordrtc';

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

class VideoExample extends Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, () => {
      // print version information at startup
      const version_info =
        'Using video.js ' +
        videojs.VERSION +
        ' with videojs-record ' +
        videojs.getPluginVersion('record') +
        ' and recordrtc ' +
        RecordRTC.version;
      videojs.log(version_info);
    });

    // 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', () => {
      // recordedData is a blob object containing 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);
    });
  }

  // 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 vjs-default-skin"
          playsInline></video>
      </div>
    );
  }
}

export default VideoExample;

Video Page

const DynamicComponentWithNoSSR = dynamic(
  () => import('@Components/Video/VideoHola'),
  { ssr: false },
);

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

const VideoPage: NextPage<{}> = () => {
  return (
    <div className="flex">
      <h1>Hola</h1>
      <DynamicComponentWithNoSSR {...videoJsOptions} />
    </div>
  );
};

export default VideoPage;

[thijstriemstra]

I would like to send a PR with a NextJS Example

Sounds good.

[thijstriemstra]

This line was the error, I replaced from import Record from 'videojs-record/dist/videojs.record.js'; to only import 'videojs-record/dist/videojs.record.js'; and it works fine.

Maybe this should be changed in the react examples as well (if it works there as well).

[ajparrah]

@thijstriemstra Maybe, let me try it. I will send a PR as soon as i can make the examples