Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Uncaught Error: plugin "record" does not exist

See original GitHub issue

Description

I’m running into an issue that others have run into: Uncaught Error: plugin "record" does not exist

I read through other issues and tried updating the video.js links to use 7.2.2 (something suggested in a different issue), but that doesn’t seem to resolve it. I tried digging into the source generated, but because it’s minified I couldn’t get much from it. The good news is i’m not running react, angular, or any other framework 🙃 … and it’s a one-pager example.

Page/Code: video-snap.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Video-only Example - Record Plugin for Video.js</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.2.2/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.1.1/adapter.min.js"></script>
    <script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/2.0.6/videojs.record.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.2.2/video.min.js"></script>
    

    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.2.2/video-js.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/2.0.6/css/videojs.record.min.css" rel="stylesheet">

</head>
<body>

    <video id="myImage" playsinline class="video-js vjs-default-skin"></video>

    <script>
    /* eslint-disable */
    var options = {
        controls: true,
        width: 320,
        height: 240,
        fluid: false,
        controlBar: {
            volumePanel: false,
            fullscreenToggle: false
        },
        plugins: {
            record: {
                image: true,
                debug: true
            }
        }
    };
    var player = videojs('myImage', options, function() {
        // print version information at startup
        var msg = 'Using video.js ' + videojs.VERSION +
            ' with videojs-record ' + videojs.getPluginVersion('record');
        videojs.log(msg);
    });
    // error handling
    player.on('deviceError', function() {
        console.warn('device error:', player.deviceErrorCode);
    });
    player.on('error', function(element, error) {
        console.error(error);
    });
    // snapshot is available
    player.on('finishRecord', function() {
        // the blob object contains the image data that
        // can be downloaded by the user, stored on server etc.
        console.log('snapshot ready: ', player.recordedData);
    });
    </script>


</body>
</html>

Sorry you’ve had to troubleshoot this issue so many times… asking here was the last thing I could think of before posting to SO.

FWIW I couldn’t get the “video-only” example to work, either (same error).

Steps to reproduce

Open the page above in chrome (Version 76.0.3809.132 (Official Build) (64-bit)) on Windows 10 (Pro, Version 1903) and look at the dev-console.

Results

Expected

Working version similar to those here

Actual

Black image box

Error output

If there are any errors at all, please include them here. Uncaught Error: plugin "record" does not exist

Additional Information

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

versions

Windows 10 Pro Version 1903
Chrome Version 76.0.3809.132 (Official Build) (64-bit)

videojs

what version of videojs does this occur with? 6.7.1, 7.2.2

browsers

what browser(s) are affected? Make sure to test with all third-party browser extensions disabled.

Chrome Version 76.0.3809.132 (Official Build) (64-bit)

OSes

Windows 10 Pro Version 1903

Issue Analytics

State:
Created 4 years ago
Comments:10 (3 by maintainers)

Top GitHub Comments

1reaction

inyourcornercommented, Sep 8, 2019

Thanks for everything, @thijstriemstra - keep up all your good work!

1reaction

inyourcornercommented, Sep 8, 2019

In case it’s useful to anyone else later, this was the properly ordered (and non-duped 😉) import list:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.5/video-js.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/3.8.0/css/videojs.record.min.css" rel="stylesheet">

    <script src="https://cdn.WebRTC-Experiment.com/RecordRTC.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.5.5/video.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/6.1.1/adapter.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-record/3.8.0/videojs.record.js"></script>