Uncaught Error: plugin "record" does not exist
See original GitHub issueDescription
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)
Thanks for everything, @thijstriemstra - keep up all your good work!
In case it’s useful to anyone else later, this was the properly ordered (and non-duped 😉) import list: