New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

videojs-record

Package Overview
Dependencies
Maintainers
1
Versions
78
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

videojs-record - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

CHANGES.md
examples/audio-only-mp3.html
examples/audio-only-opus.html
examples/audio-only-recorderjs.html
examples/upload/fine-uploader.html
examples/upload/jquery.fileupload.html
src/js/plugins/videojs.record.lamejs.js
src/js/plugins/videojs.record.libvorbis.js
src/js/plugins/videojs.record.opus-recorder.js
src/js/plugins/videojs.record.recorderjs.js

18

bower.json
{
"name": "videojs-record",
"version": "1.0.3",
"version": "1.1.0",
"homepage": "https://github.com/collab-project/videojs-record",

@@ -17,2 +17,3 @@ "description": "A video.js plugin for recording audio/video/image files.",

"stream",
"microphone",
"recorder",

@@ -22,3 +23,5 @@ "RecordRTC",

"vorbis",
"ogg"
"ogg",
"mp3",
"opus"
],

@@ -35,6 +38,9 @@ "license": "MIT",

"video.js": ">=5.0.0",
"wavesurfer.js": ">=1.0.44",
"videojs-wavesurfer": ">=1.0.3",
"recordrtc": "git://github.com/muaz-khan/RecordRTC.git",
"libvorbis.js": ">=0.5.1"
"wavesurfer.js": ">=1.0.50",
"videojs-wavesurfer": ">=1.0.6",
"recordrtc": ">=5.2.7",
"libvorbis.js": ">=0.5.1",
"recorderjs": "https://github.com/mattdiamond/Recorderjs.git",
"lamejs": "https://github.com/zhuker/lamejs.git",
"opus-recorderjs": ">=0.4.4"
},

@@ -41,0 +47,0 @@ "devDependencies": {

47

Gruntfile.js

@@ -22,8 +22,2 @@ 'use strict';

pkg: pkg,
build: {
src: 'src/js/dependencies.js',
options: {
baseDir: 'src/js/'
}
},
banner: '/*! <%= pkg.name %> v<%= pkg.version %>\n' +

@@ -46,2 +40,5 @@ '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +

},
build: {
assets: 'src/css/'
},
uglify: {

@@ -52,4 +49,18 @@ options: {

dist: {
options: {
sourceMap: 'dist/videojs.record.min.js.map',
sourceMapRoot: '/'
},
src: '<%= concat.dist.dest %>',
dest: 'dist/videojs.record.min.js'
},
plugins: {
files: grunt.file.expandMapping(['src/js/plugins/*.js'], 'dist/', {
rename: function(destBase, destPath) {
var pluginName = destPath.substr(
destPath.lastIndexOf('/') + 1).replace('.js', '.min.js');
var newPath = destBase + pluginName;
return newPath;
},
})
}

@@ -62,3 +73,3 @@ },

},
src: ['src/js/*.js']
src: ['src/js/**/*.js']
},

@@ -111,22 +122,28 @@ },

grunt.registerTask('font', ['generate-font', 'update-base64', 'sass']);
grunt.registerTask('pretask', ['jshint', 'concat', 'vjslanguages', 'font']);
grunt.registerTask('font', ['generate-font', 'update-base64']);
grunt.registerTask('pretask', ['jshint', 'concat', 'vjslanguages', 'sass']);
grunt.registerTask('default', ['pretask', 'build', 'uglify']);
grunt.registerMultiTask('build', 'Building Source', function(){
grunt.registerMultiTask('build', 'build and copy css and fonts', function(){
var srcDir = this.data;
var distStylesheet = 'dist/css/videojs.record.css'
// Copy over CSS
grunt.file.copy('src/css/videojs.record.css', 'dist/css/videojs.record.css');
grunt.file.copy(srcDir + 'videojs.record.css', distStylesheet);
grunt.log.writeln('Stylesheet ' + distStylesheet['yellow'] +
' with version ' + version.full['green'] + ' created.\n');
// Inject version number into css file
var css = grunt.file.read('dist/css/videojs.record.css');
var css = grunt.file.read(distStylesheet);
css = css.replace(/GENERATED_AT_BUILD/g, version.full);
grunt.file.write('dist/css/videojs.record.css', css);
grunt.file.write(distStylesheet, css);
// Copy over font files
grunt.file.recurse('src/css/font', function(absdir, rootdir, subdir, filename) {
grunt.file.recurse(srcDir + 'font', function(absdir, rootdir, subdir, filename) {
// only fonts
var ext = filename.substring(filename.lastIndexOf('.') + 1, filename.length);
if (['ttf', 'svg', 'eot', 'woff'].indexOf(ext) > -1) {
grunt.file.copy(absdir, 'dist/css/font/' + filename);
var fpath = 'dist/css/font/' + filename;
grunt.file.copy(absdir, fpath);
grunt.log.writeln('Font ' + fpath['yellow'] + ' copied.');
}

@@ -133,0 +150,0 @@ });

18

package.json
{
"name": "videojs-record",
"version": "1.0.3",
"version": "1.1.0",
"description": "A video.js plugin for recording audio/video/image files.",

@@ -26,2 +26,3 @@ "main": "src/js/videojs.record.js",

"stream",
"microphone",
"recorder",

@@ -31,10 +32,15 @@ "RecordRTC",

"vorbis",
"ogg"
"ogg",
"mp3",
"opus"
],
"dependencies": {
"video.js": ">=5.0.0",
"wavesurfer.js": ">=1.0.44",
"videojs-wavesurfer": ">=1.0.3",
"recordrtc": ">=5.0.8",
"libvorbis.js": ">=0.5.1"
"wavesurfer.js": ">=1.0.50",
"videojs-wavesurfer": ">=1.0.6",
"recordrtc": ">=5.2.7",
"libvorbis.js": ">=0.5.1",
"recorderjs": "https://github.com/mattdiamond/Recorderjs.git",
"lamejs": ">=1.0.0",
"opus-recorder": ">=0.4.4"
},

@@ -41,0 +47,0 @@ "devDependencies": {

199

README.md

@@ -9,3 +9,3 @@ Video.js Record

[![npm version](https://img.shields.io/npm/v/videojs-record.svg?style=flat)](https://www.npmjs.com/package/videojs-record)
[![npm](https://img.shields.io/npm/dm/videojs-record.svg)]()
[![npm](https://img.shields.io/npm/dm/videojs-record.svg)](https://github.com/collab-project/videojs-record/releases)
[![License](https://img.shields.io/npm/l/videojs-record.svg)](LICENSE)

@@ -40,8 +40,11 @@ [![Build Status](https://travis-ci.org/collab-project/videojs-record.svg?branch=master)](https://travis-ci.org/collab-project/videojs-record)

- [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) - Provides a navigable waveform for audio files. Comes with a [microphone plugin](http://www.wavesurfer-js.org/example/microphone) used for realtime visualization of the microphone audio signal.
- [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) - Provides a navigable waveform for audio files. Comes with a [microphone plugin](https://katspaugh.github.io/wavesurfer.js/example/microphone) used for realtime visualization of the microphone audio signal.
- [videojs-wavesurfer](https://github.com/collab-project/videojs-wavesurfer) - Transforms Video.js into an audio-player.
Optional dependencies for other output formats:
Optional dependencies when using [other audio libraries](#other-audio-libraries):
- [libvorbis.js](https://github.com/Garciat/libvorbis.js) - Converts PCM audio data to compressed Ogg Vorbis audio, resulting a smaller audio files with similar quality.
- [libvorbis.js](#libvorbisjs) - Converts PCM audio data to compressed Ogg Vorbis audio, resulting a smaller audio files with similar quality.
- [lamejs](#lamejs) - Converts PCM audio data to compressed MP3 audio.
- [opus-recorder](#opus-recorder) - Converts the output of Web Audio API nodes as Opus and exports it into an Ogg container.
- [recorder.js](#recorderjs) - A plugin for recording the PCM output of Web Audio API nodes.

@@ -54,4 +57,4 @@ Usage

```html
<link href="//vjs.zencdn.net/5.2.1/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.2.1/video.js"></script>
<link href="//vjs.zencdn.net/5.4.6/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/5.4.6/video.min.js"></script>
```

@@ -88,8 +91,9 @@

Check out the full audio/video
([demo](https://collab-project.github.io/videojs-record/examples/audio-video.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/audio-video.html)),
image ([demo](https://collab-project.github.io/videojs-record/examples/image-only.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/image-only.html)),
animated GIF ([demo](https://collab-project.github.io/videojs-record/examples/animated-gif.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/animated-gif.html)) or the
video-only ([demo](https://collab-project.github.io/videojs-record/examples/video-only.html) or [source](https://github.com/collab-project/videojs-record/blob/master/examples/video-only.html)) examples.
Check out the examples:
- audio/video ([demo](https://collab-project.github.io/videojs-record/examples/audio-video.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/audio-video.html))
- video-only ([demo](https://collab-project.github.io/videojs-record/examples/video-only.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/video-only.html))
- image ([demo](https://collab-project.github.io/videojs-record/examples/image-only.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/image-only.html))
- animated GIF ([demo](https://collab-project.github.io/videojs-record/examples/animated-gif.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/animated-gif.html))
Note that recording both audio and video into a single WebM file is currently

@@ -108,4 +112,4 @@ only supported in Mozilla Firefox >= 29. In the Chrome browser two separate

```html
<script src="http://wavesurfer-js.org/dist/wavesurfer.min.js"></script>
<script src="http://wavesurfer-js.org/dist/plugin/wavesurfer.microphone.min.js"></script>
<script src="//katspaugh.github.io/wavesurfer.js/dist/wavesurfer.min.js"></script>
<script src="//katspaugh.github.io/wavesurfer.js/dist/plugin/wavesurfer.microphone.min.js"></script>
<script src="videojs.wavesurfer.js"></script>

@@ -122,2 +126,5 @@ ```

There is also support for [additional audio libraries](#other-audio-libraries)
that allows you to record audio with codecs like Ogg Vorbis, MP3 and Opus.
Options

@@ -134,2 +141,3 @@ -------

{
// video.js options
controls: true,

@@ -140,2 +148,3 @@ loop: false,

plugins: {
// videojs-record plugin options
record: {

@@ -145,3 +154,4 @@ image: false,

video: true,
maxLength: 5
maxLength: 5,
debug: true
}

@@ -156,15 +166,18 @@ }

| --- | --- | --- | --- |
| `image` | boolean | `false` | Create single snapshot image. |
| `audio` | boolean | `false` | Include audio in the recorded clip. |
| `video` | boolean | `false` | Include video in the recorded clip. |
| `animation` | boolean | `false` | Animated GIF. |
| `image` | boolean or object | `false` | Create single snapshot image. |
| `audio` | boolean or object | `false` | Include audio in the recorded clip. |
| `video` | boolean or object | `false` | Include video in the recorded clip. |
| `animation` | boolean or object | `false` | Animated GIF. |
| `debug` | boolean | `false` | Enables console log messages during recording for debugging purposes. |
| `maxLength` | float | `10` | Maximum length of the recorded clip. |
| `audioEngine` | string | `recordrtc` | Audio recording library to use. Legal values are `recordrtc` and `libvorbis.js`. |
| `frameWidth` | float | `320` | Width of the recorded video frames. Use [media constraints](#media-constraints) to change the camera resolution width. |
| `frameHeight` | float | `240` | Height of the recorded video frames. Use [media constraints](#media-constraints) to change the camera height. |
| `audioEngine` | string | `recordrtc` | Audio recording library to use. Legal values are `recordrtc`, `libvorbis.js`, `lamejs`, `opus-recorder` and `recorder.js`. |
| `audioBufferSize` | float | `4096` | The size of the audio buffer (in sample-frames per second). Legal values: 0, 256, 512, 1024, 2048, 4096, 8192 and 16384. |
| `audioSampleRate` | float | `44100` | The audio sample rate (in sample-frames per second) at which the `AudioContext` handles audio. Legal values are in the range of 22050 to 96000. |
| `audioWorkerURL` | string | `''` | URL for the audio worker, for example: `libvorbis.oggvbr.asyncencoder.worker.min.js`. Currently only used for libvorbis.js. |
| `audioChannels` | float | `2` | Number of audio channels. Using a single channel results in a smaller filesize. |
| `audioWorkerURL` | string | `''` | URL for the audio worker, for example: `libvorbis.oggvbr.asyncencoder.worker.min.js`. Currently only used for libvorbis.js, opus-recorder and lamejs. |
| `audioModuleURL` | string | `''` | URL for the audio module, for example: `libvorbis.asmjs.min.js`. Currently only used for libvorbis.js. |
| `animationFrameRate` | float | `200` | Frame rate for animated GIF (in frames per second). |
| `animationQuality` | float | `10` | Sets quality of color quantization (conversion of images to the maximum 256 colors allowed by the GIF specification). Lower values (minimum = 1) produce better colors, but slow processing significantly. The default produces good color mapping at reasonable speeds. Values greater than 20 do not yield significant improvements in speed. |
| `debug` | boolean | `false` | Enables console log messages. |

@@ -207,4 +220,41 @@ Methods

| `stopRecord` | User pressed the stop button to stop recording. |
| `finishRecord` | The recorded stream or image is available. Check the `player.recordedData` object for the recorded data. |
| `finishRecord` | The recorded stream or image is available. [Check the](#get-recorded-data) `player.recordedData` object for the recorded data. |
Media Constraints
-----------------
[Media stream constraints](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Parameters)
allow you to specify the types of media to request, along with any requirements for each type.
The following example shows how to change the camera resolution to 1280 by 720
pixels:
```javascript
var player = videojs("myVideo",
{
controls: true,
loop: false,
// dimensions of video.js player
width: 1280,
height: 720,
plugins: {
record: {
maxLength: 5,
debug: true,
audio: false,
video: {
// video constraints: set resolution of camera
mandatory: {
minWidth: 1280,
minHeight: 720,
},
},
// dimensions of captured video frames
frameWidth: 1280,
frameHeight: 720
}
}
});
```
Get recorded data

@@ -226,2 +276,5 @@ -----------------

Check the [jquery.fileupload](https://github.com/collab-project/videojs-record/blob/master/examples/upload/jquery.fileupload.html) or [Fine Uploader](https://github.com/collab-project/videojs-record/blob/master/examples/upload/fine-uploader.html) examples on how to upload the
data to a server.
Note that in the Chrome browser `player.recordedData` returns an object with

@@ -245,11 +298,18 @@ `audio` and `video` properties when recording both audio/video. In Firefox

Other output formats
--------------------
Other audio libraries
---------------------
RecordRTC is the default recording library but there is also support
for other audio libraries.
### libvorbis.js
Microphone recordings can result in large audio files, especially when there is no native
support for other audio formats (.ogg for example) in the browser (like Chrome).
libvorbis.js provides a Javascript implementation of a PCM to Ogg Vorbis encoder and
you can choose to use this instead of RecordRTC (currently only available when recording
audio-only).
[libvorbis.js](https://github.com/Garciat/libvorbis.js) provides a Javascript
implementation of a PCM to Ogg Vorbis encoder and you can choose to use this
instead of RecordRTC. libvorbis.js is currently only supported when recording
audio-only.
Include the libvorbis.js library (instead of RecordRTC.js) and place it before

@@ -262,2 +322,9 @@ any other scripts:

Also include the `videojs.record.libvorbis.js` plugin:
```html
<script src="videojs.record.js"></script>
<script src="videojs.record.libvorbis.js"></script>
```
And specify the `libvorbis.js` `audioEngine`, `audioWorkerURL` and

@@ -268,3 +335,67 @@ `audioModuleURL` options.

### lamejs
[lamejs](https://github.com/zhuker/lamejs) provides a Javascript
implementation of a PCM to MP3 encoder and you can choose to use this
instead of RecordRTC. lamejs is currently only supported when recording
audio-only.
Include the `videojs.record.lamejs.js` plugin:
```html
<script src="videojs.record.js"></script>
<script src="videojs.record.lamejs.js"></script>
```
Enable lamejs by specifying the `lamejs` `audioEngine` and the `audioWorkerURL` options.
Check out the audio-only MP3 example ([demo](https://collab-project.github.io/videojs-record/examples/audio-only-mp3.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/audio-only-mp3.html)).
### opus-recorder
[opus-recorder](https://github.com/chris-rudmin/Recorderjs) provides a Javascript
implementation of PCM to Opus encoder and exports it into an Ogg container.
opus-recorder is currently only supported when recording audio-only.
Include the recorder.js script (instead of RecordRTC.js) and place it before
any other scripts:
```html
<script src="/path/to/recorder.js"></script>
```
And include the `videojs.record.opus-recorder.js` plugin:
```html
<script src="videojs.record.js"></script>
<script src="videojs.record.opus-recorder.js"></script>
```
And specify the `opus-recorder` `audioEngine` and `audioWorkerURL` options.
Check out the audio-only Opus example ([demo](https://collab-project.github.io/videojs-record/examples/audio-only-opus.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/audio-only-opus.html)).
### recorder.js
[recorder.js](https://github.com/mattdiamond/Recorderjs) is another plugin for
recording/exporting PCM output of Web Audio API nodes, similar to RecordRTC.
recorder.js is currently only supported when recording audio-only.
Include the recorder.js library (instead of RecordRTC.js) on the page:
```html
<script src="/path/to/recorder.js" async></script>
```
And include the `videojs.record.recorderjs.js` plugin:
```html
<script src="videojs.record.js"></script>
<script src="videojs.record.recorderjs.js"></script>
```
And specify the `recorder.js` `audioEngine` option.
Check out the audio-only recorder.js example ([demo](https://collab-project.github.io/videojs-record/examples/audio-only-recorderjs.html) / [source](https://github.com/collab-project/videojs-record/blob/master/examples/audio-only-recorderjs.html)).
Localization

@@ -281,3 +412,3 @@ ------------

<script src="videojs-record/dist/lang/nl.js"></script>
<script src="//vjs.zencdn.net/5.2.1/lang/nl.js"></script>
<script src="//vjs.zencdn.net/5.4.6/lang/nl.js"></script>
```

@@ -298,3 +429,2 @@

More features using other plugins

@@ -341,2 +471,13 @@ ---------------------------------

Font
----
Generate or update the font files:
```
grunt font
```
Check the [the font readme](src/css/font/README.md) for more information.
License

@@ -343,0 +484,0 @@ -------

2

src/css/font/README.md

@@ -10,3 +10,3 @@ Font

To modify the generated font, change the `icons.json` file, located in the `src/css/font`
directory. Then run `grunt` to update the generated font files and CSS definitions. View
directory. Run `grunt font` to update the generated font files. View
`src/css/font/preview.html` in a browser to see the result.

@@ -13,0 +13,0 @@

394

src/js/videojs.record.js

@@ -36,5 +36,8 @@ (function (root, factory)

// recorder engines
// supported recorder plugin engines
RECORDRTC: 'recordrtc',
LIBVORBISJS: 'libvorbis.js',
RECORDERJS: 'recorder.js',
LAMEJS: 'lamejs',
OPUSRECORDER: 'opus-recorder',

@@ -59,5 +62,42 @@ // browser checks

VjsComponent.call(this, player, options);
},
/**
* Add filename and timestamp to recorded file object.
*/
addFileInfo: function(fileObj)
{
var now = new Date();
fileObj.lastModifiedDate = now;
// guess extension name from mime-type, e.g. audio/ogg, but
// any extension is valid here
var fileExtension = '.' + fileObj.type.split('/')[1];
// use timestamp in filename, e.g. 1451180941326
fileObj.name = now.getTime() + fileExtension;
},
/**
* Invoked when recording is stopped and resulting stream is available.
*
* @param {Blob} data Reference to the recorded Blob
*/
onStopRecording: function(data)
{
this.recordedData = data;
this.addFileInfo(this.recordedData);
// store reference to recorded stream URL
this.mediaURL = URL.createObjectURL(this.recordedData);
// notify listeners
this.trigger('recordComplete');
}
});
/**
* Engine for the RecordRTC library.
*/
videojs.RecordRTCEngine = videojs.extend(videojs.RecordBase,

@@ -82,3 +122,8 @@ {

this.engine.sampleRate = this.sampleRate;
this.engine.numberOfAudioChannels = this.audioChannels;
// video/canvas settings
this.engine.video = this.video;
this.engine.canvas = this.canvas;
// animated gif settings

@@ -130,2 +175,4 @@ this.engine.quality = this.quality;

this.addFileInfo(this.recordedData);
// notify listeners

@@ -153,3 +200,12 @@ this.trigger('recordComplete');

this.recordedData = recording;
for (var mtype in this.recordedData)
{
this.addFileInfo(this.recordedData[mtype]);
}
}
else
{
this.addFileInfo(this.recordedData);
}

@@ -164,2 +220,4 @@ // notify listeners

this.addFileInfo(this.recordedData);
// notify listeners

@@ -173,110 +231,2 @@ this.trigger('recordComplete');

videojs.LibVorbisEngine = videojs.extend(videojs.RecordBase,
{
/**
* Setup recording engine.
*/
setup: function(stream, mediaType, debug)
{
this.inputStream = stream;
this.mediaType = mediaType;
this.debug = debug;
// setup libvorbis.js
this.options = {
workerURL: this.audioWorkerURL,
moduleURL: this.audioModuleURL,
encoderOptions: {
channels: 2,
sampleRate: this.sampleRate,
quality: 0.8
}
};
},
/**
* Start recording.
*/
start: function()
{
this.chunks = [];
this.audioContext = new AudioContext();
this.audioSourceNode = this.audioContext.createMediaStreamSource(this.inputStream);
this.scriptProcessorNode = this.audioContext.createScriptProcessor(this.bufferSize);
libvorbis.OggVbrAsyncEncoder.create(
this.options,
this.onData.bind(this),
this.onStopRecording.bind(this)).then(
this.onEngineCreated.bind(this));
},
/**
* Stop recording.
*/
stop: function()
{
this.audioSourceNode.disconnect(this.scriptProcessorNode);
this.scriptProcessorNode.disconnect(this.audioContext.destination);
this.encoder.finish();
},
/**
* Invoked when the libvorbis encoder is ready for recording.
*/
onEngineCreated: function(encoder)
{
this.encoder = encoder;
this.scriptProcessorNode.onaudioprocess = this.onAudioProcess.bind(this);
this.audioSourceNode.connect(this.scriptProcessorNode);
this.scriptProcessorNode.connect(this.audioContext.destination);
},
/**
* Continous encoding of audio data.
*/
onAudioProcess: function(ev)
{
var inputBuffer = ev.inputBuffer;
var samples = inputBuffer.length;
var ch0 = inputBuffer.getChannelData(0);
var ch1 = inputBuffer.getChannelData(1);
// script processor reuses buffers; we need to make copies
ch0 = new Float32Array(ch0);
ch1 = new Float32Array(ch1);
var channelData = [ch0, ch1];
this.encoder.encode(channelData);
},
/**
*
*/
onData: function(data)
{
this.chunks.push(data);
},
/**
* Invoked when recording is stopped and resulting stream is available.
*/
onStopRecording: function()
{
this.recordedData = new Blob(this.chunks, {type: 'audio/ogg'});
// store reference to recorded stream URL
this.mediaURL = URL.createObjectURL(this.recordedData);
// notify listeners
this.trigger('recordComplete');
}
});
/**

@@ -289,3 +239,3 @@ * Record audio/video/images using the Video.js player.

* The constructor function for the class.
*
*
* @param {videojs.Player|Object} player

@@ -307,2 +257,6 @@ * @param {Object} options Player options.

// video/canvas settings
this.videoFrameWidth = this.options_.options.frameWidth;
this.videoFrameHeight = this.options_.options.frameHeight;
// audio settings

@@ -314,2 +268,3 @@ this.audioEngine = this.options_.options.audioEngine;

this.audioSampleRate = this.options_.options.audioSampleRate;
this.audioChannels = this.options_.options.audioChannels;

@@ -326,8 +281,18 @@ // animation settings

// cross-browser getUserMedia
this.getUserMedia = (
var getUserMediaFn =
navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia
).bind(navigator);
navigator.msGetUserMedia;
if (getUserMediaFn)
{
this.getUserMedia = getUserMediaFn.bind(navigator);
}
else
{
this.getUserMedia = function (constraints, successCallback, errorCallback)
{
errorCallback(new Error('getUserMedia is not supported'));
};
}

@@ -362,2 +327,5 @@ // wait until player ui is ready

// loop feature is not used in this plugin
this.player().loop(false);
// tweak player UI based on type

@@ -385,2 +353,13 @@ switch (this.getRecordType())

this.player().bigPlayButton.hide();
// the native controls don't work for this UI so disable
// them no matter what
if (this.player().usingNativeControls_ === true)
{
if (this.player().tech_.el_ !== undefined)
{
this.player().tech_.el_.controls = false;
}
}
if (this.player().options_.controls)

@@ -417,3 +396,3 @@ {

/**
* Indicates whether we're currently recording or not.
* Indicates whether the plugin is currently recording or not.
*/

@@ -426,3 +405,4 @@ isRecording: function()

/**
* Indicates whether we're currently processing recorded data or not.
* Indicates whether the plugin is currently processing recorded data
* or not.
*/

@@ -435,3 +415,3 @@ isProcessing: function()

/**
* Indicates whether the player is destroyed or not.
* Indicates whether the plugin is destroyed or not.
*/

@@ -444,3 +424,3 @@ isDestroyed: function()

/**
* Open the brower's recording device selection dialog.
* Open the browser's recording device selection dialog.
*/

@@ -462,4 +442,4 @@ getDevice: function()

}
// ask the browser to give us access to media device and get a
// stream reference in the callback function
// ask the browser to give the user access to the media device
// and get a stream reference in the callback function
switch (this.getRecordType())

@@ -473,3 +453,3 @@ {

};
// remove existing mic listeners
// remove existing microphone listeners
this.surfer.microphone.un('deviceReady',

@@ -480,3 +460,3 @@ this.deviceReadyCallback);

// setup new mic listeners
// setup new microphone listeners
this.surfer.microphone.on('deviceReady',

@@ -505,4 +485,6 @@ this.deviceReadyCallback);

};
this.getUserMedia(
this.mediaType,
this.getUserMedia({
audio: false,
video: (this.getRecordType() === this.IMAGE_ONLY) ? this.recordImage : this.recordVideo
},
this.onDeviceReady.bind(this),

@@ -518,4 +500,6 @@ this.onDeviceError.bind(this));

};
this.getUserMedia(
this.mediaType,
this.getUserMedia({
audio: this.recordAudio,
video: this.recordVideo
},
this.onDeviceReady.bind(this),

@@ -528,3 +512,3 @@ this.onDeviceError.bind(this));

this.mediaType = {
// animated gif
// animated GIF
audio: false,

@@ -536,3 +520,3 @@ video: false,

audio: false,
video: true
video: this.recordAnimation
},

@@ -578,21 +562,58 @@ this.onDeviceReady.bind(this),

{
// currently libvorbis.js is only supported in
// audio-only mode
// currently libvorbis.js, recorder.js, opus-recorder and lamejs
// are only supported in audio-only mode
if (this.getRecordType() !== this.AUDIO_ONLY &&
this.audioEngine === this.LIBVORBISJS)
(this.audioEngine === this.LIBVORBISJS ||
this.audioEngine === this.RECORDERJS ||
this.audioEngine === this.LAMEJS ||
this.audioEngine === this.OPUSRECORDER))
{
throw new Error('Currently libvorbis.js is only supported in audio-only mode.');
throw new Error('Currently ' + this.audioEngine +
' is only supported in audio-only mode.');
}
// connect stream to recording engine
if (this.audioEngine === this.RECORDRTC)
// get recorder class
var EngineClass;
switch (this.audioEngine)
{
// RecordRTC.js (default)
this.engine = new videojs.RecordRTCEngine(this.player());
case this.RECORDRTC:
// RecordRTC.js (default)
EngineClass = videojs.RecordRTCEngine;
break;
case this.LIBVORBISJS:
// libvorbis.js
EngineClass = videojs.LibVorbisEngine;
break;
case this.RECORDERJS:
// recorder.js
EngineClass = videojs.RecorderjsEngine;
break;
case this.LAMEJS:
// lamejs
EngineClass = videojs.LamejsEngine;
break;
case this.OPUSRECORDER:
// opus-recorder
EngineClass = videojs.OpusRecorderEngine;
break;
default:
// unknown engine
throw new Error('Unknown audioEngine: ' + this.audioEngine);
}
else if (this.audioEngine === this.LIBVORBISJS)
try
{
// libvorbis.js
this.engine = new videojs.LibVorbisEngine(this.player());
// connect stream to recording engine
this.engine = new EngineClass(this.player());
}
catch (err)
{
throw new Error('Could not load ' + this.audioEngine +
' plugin');
}
// listen for events

@@ -604,10 +625,22 @@ this.engine.on('recordComplete', this.engineStopCallback);

this.engine.sampleRate = this.audioSampleRate;
this.engine.audioChannels = this.audioChannels;
this.engine.audioWorkerURL = this.audioWorkerURL;
this.engine.audioModuleURL = this.audioModuleURL;
// animated gif settings
// video/canvas settings
this.engine.video = {
width: this.videoFrameWidth,
height: this.videoFrameHeight
};
this.engine.canvas = {
width: this.videoFrameWidth,
height: this.videoFrameHeight
};
// animated GIF settings
this.engine.quality = this.animationQuality;
this.engine.frameRate = this.animationFrameRate;
this.engine.setup(this.stream, this.mediaType, !this.debug);
// initialize recorder
this.engine.setup(this.stream, this.mediaType, this.debug);

@@ -803,4 +836,3 @@ // show elements that should never be hidden in animation,

{
// stop stream now, since there's no recorded data
// being available
// stop stream now, since there's no recorded data available
this.stopStream();

@@ -892,4 +924,4 @@ }

// Pausing the player so we can visualize the recorded data
// will trigger an async videojs 'pause' event that we have
// to wait for.
// will trigger an async video.js 'pause' event that we
// have to wait for.
this.player().one('pause', function()

@@ -937,5 +969,5 @@ {

// Pausing the player so we can visualize the recorded data
// will trigger an async videojs 'pause' event that we have
// to wait for.
// pausing the player so we can visualize the recorded data
// will trigger an async video.js 'pause' event that we
// have to wait for.
this.player().one('pause', function()

@@ -1136,5 +1168,5 @@ {

* Start loading data.
*
*
* @param {String|Blob|File} url Either the URL of the media file,
* or a Blob or File object.
* a Blob or a File object.
*/

@@ -1154,3 +1186,3 @@ load: function(url)

case this.ANIMATION:
// assign stream to audio/video element src
// assign stream to audio/video element source
this.mediaElement.src = url;

@@ -1208,19 +1240,22 @@ break;

{
if (this.recordImage)
if (this.isModeEnabled(this.recordImage))
{
return this.IMAGE_ONLY;
}
else if (this.recordAnimation)
else if (this.isModeEnabled(this.recordAnimation))
{
return this.ANIMATION;
}
else if (this.recordAudio && !this.recordVideo)
else if (this.isModeEnabled(this.recordAudio) && !this.isModeEnabled(
this.recordVideo))
{
return this.AUDIO_ONLY;
}
else if (this.recordAudio && this.recordVideo)
else if (this.isModeEnabled(this.recordAudio) && this.isModeEnabled(
this.recordVideo))
{
return this.AUDIO_VIDEO;
}
else if (!this.recordAudio && this.recordVideo)
else if (!this.isModeEnabled(this.recordAudio) && this.isModeEnabled(
this.recordVideo))
{

@@ -1266,3 +1301,3 @@ return this.VIDEO_ONLY;

/**
* Capture frame from camera and copy it to canvas.
* Capture frame from camera and copy data to canvas.
*/

@@ -1274,3 +1309,3 @@ captureFrame: function()

// set the canvas size to the dimensions of the camera,
// which also wipes it
// which also wipes the content of the canvas
recordCanvas.width = this.player().width();

@@ -1290,3 +1325,3 @@ recordCanvas.height = this.player().height();

/**
*
* Start preview of video stream.
*/

@@ -1305,3 +1340,3 @@ startVideoPreview: function()

// start/resume live preview
// start or resume live preview
this.load(URL.createObjectURL(this.stream));

@@ -1347,3 +1382,3 @@ this.mediaElement.play();

{
// workaround firefox issue
// workaround Firefox issue
if (this.player().seeking())

@@ -1389,3 +1424,3 @@ {

/**
* Show/hide the volume menu.
* Show or hide the volume menu.
*/

@@ -1410,6 +1445,6 @@ displayVolumeControl: function(display)

* Format seconds as a time string, H:MM:SS, M:SS or M:SS:MMM.
*
*
* Supplying a guide (in seconds) will force a number of leading zeros
* to cover the length of the guide.
*
*
* @param {Number} seconds Number of seconds to be turned into a string

@@ -1473,2 +1508,10 @@ * @param {Number} guide Number (in seconds) to model the string after

return h + m + s + ms;
},
/**
* Return boolean indicating whether mode is enabled or not.
*/
isModeEnabled: function(mode)
{
return mode === Object(mode) || mode === true;
}

@@ -1515,3 +1558,3 @@

{
// add the vjs-record-start class to the element so it can change appearance
// replace element class so it can change appearance
this.removeClass('vjs-icon-record-start');

@@ -1525,3 +1568,3 @@ this.addClass('vjs-icon-record-stop');

{
// add the vjs-record-stop class to the element so it can change appearance
// replace element class so it can change appearance
this.removeClass('vjs-icon-record-stop');

@@ -1573,3 +1616,3 @@ this.addClass('vjs-icon-record-start');

{
// add class to the element so it can change appearance
// replace element class so it can change appearance
this.removeClass('vjs-icon-photo-camera');

@@ -1583,3 +1626,3 @@ this.addClass('vjs-icon-photo-retry');

{
// add class to the element so it can change appearance
// replace element class so it can change appearance
this.removeClass('vjs-icon-photo-retry');

@@ -1692,4 +1735,10 @@ this.addClass('vjs-icon-photo-camera');

maxLength: 10,
// Audio recording library to use. Legal values are 'recordrtc'
// and 'libvorbis.js'.
// Width of the recorded video frames.
frameWidth: 320,
// Height of the recorded video frames.
frameHeight: 240,
// Enables console logging for debugging purposes.
debug: false,
// Audio recording library to use. Legal values are 'recordrtc',
// 'libvorbis.js', 'opus-recorder', 'lamejs' and 'recorder.js'.
audioEngine: 'recordrtc',

@@ -1714,2 +1763,5 @@ // The size of the audio buffer (in sample-frames) which needs to

audioSampleRate: 44100,
// Allows you to record single-channel audio, which can reduce the
// filesize.
audioChannels: 2,
// URL for the audio worker.

@@ -1728,5 +1780,3 @@ audioWorkerURL: '',

// in speed.
animationQuality: 10,
// Enables console logging for debugging purposes
debug: false
animationQuality: 10
};

@@ -1733,0 +1783,0 @@ 

.jshintrc

Sorry, the diff of this file is not supported yet

.npmignore

Sorry, the diff of this file is not supported yet

.travis.yml

Sorry, the diff of this file is not supported yet

examples/animated-gif.html

Sorry, the diff of this file is not supported yet

examples/audio-only-ogg.html

Sorry, the diff of this file is not supported yet

examples/audio-only.html

Sorry, the diff of this file is not supported yet

examples/audio-video.html

Sorry, the diff of this file is not supported yet

examples/image-only.html

Sorry, the diff of this file is not supported yet

examples/video-only.html

Sorry, the diff of this file is not supported yet

LICENSE

Sorry, the diff of this file is not supported yet

src/css/font/scss/_icons.scss

Sorry, the diff of this file is not supported yet

src/css/font/videojs-record.eot

Sorry, the diff of this file is not supported yet

src/css/font/videojs-record.ttf

Sorry, the diff of this file is not supported yet

src/css/font/videojs-record.woff

Sorry, the diff of this file is not supported yet

src/css/videojs.record.css

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc