New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
videojs-record
Advanced tools
videojs-record - npm Package Compare versions
Comparing version 0.2.0 to 0.3.0
| { | ||
| "name": "videojs-record", | ||
| "version": "0.2.0", | ||
| "version": "0.3.0", | ||
| "homepage": "https://github.com/collab-project/videojs-record", | ||
@@ -39,4 +39,4 @@ "description": "A video.js plugin for recording audio/video files.", | ||
| "grunt-contrib-cssmin": "~0.11.0", | ||
| "grunt-videojs-languages": "git://github.com/videojs/grunt-videojs-languages.git" | ||
| "grunt-videojs-languages": "~0.0.4" | ||
| } | ||
| } |
| { | ||
| "name": "videojs-record", | ||
| "version": "0.2.0", | ||
| "version": "0.3.0", | ||
| "description": "A video.js plugin for recording audio/video files.", | ||
@@ -9,5 +9,2 @@ "main": "src/js/videojs.record.js", | ||
| }, | ||
| "scripts": { | ||
| "test": "echo \"Error: no test specified\" && exit 1" | ||
| }, | ||
| "repository": { | ||
@@ -14,0 +11,0 @@ "type": "git", |
@@ -11,5 +11,5 @@ Video.js Record | ||
| You can use [bower](http://bower.io) (`bower install videojs-record`) or | ||
| [npm](https://www.npmjs.org) (`npm install videojs-record`) to install the | ||
| plugin, or download and include `videojs.record.js` in your project. | ||
| Use [bower](http://bower.io) (`bower install videojs-record`) or | ||
| [npm](https://www.npmjs.org) (`npm install videojs-record`) to install | ||
| the plugin or download and include the dependencies manually. | ||
@@ -19,7 +19,7 @@ The plugin has the following mandatory dependencies: | ||
| - [Video.js](http://www.videojs.com) - HTML5 media player that provides the user interface. | ||
| - [RecordRTC.js](http://recordrtc.org) - Provides support for audio/video recording. | ||
| - [RecordRTC.js](http://recordrtc.org) - Adds support for audio/video recording. | ||
| If you're going to record audio-only, you'll also need these dependencies: | ||
| When recording audio-only, the following dependencies are also required: | ||
| - [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) - Adds navigable waveform for audio files. Also comes with a [microphone plugin](http://www.wavesurfer.fm/example/microphone) used for realtime visualization of the microphone. | ||
| - [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js) - Provides a navigable waveform for audio files. Comes with a [microphone plugin](http://www.wavesurfer.fm/example/microphone) used for realtime visualization of the microphone audio signal. | ||
| - [videojs-wavesurfer](https://github.com/collab-project/videojs-wavesurfer) - Turns Video.js into an audio-player. | ||
@@ -31,13 +31,13 @@ | ||
| Whether you're going to record audio or video, or both, you'll always need | ||
| video.js and recordrtc.js. Start by including these on your page: | ||
| video.js and recordrtc.js. Start by including the following: | ||
| ```html | ||
| <link href="http://vjs.zencdn.net/4.11.3/video-js.css" rel="stylesheet"> | ||
| <link href="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.11.3/video-js.css" rel="stylesheet"> | ||
| <script src="http://vjs.zencdn.net/4.11.3/video.js"></script> | ||
| <script src="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.11.3/video.js"></script> | ||
| <script src="http://recordrtc.org/latest.js"></script> | ||
| ``` | ||
| The videojs-record plugin automatically registers itself when you include the script | ||
| on your page: | ||
| The videojs-record plugin automatically registers itself when the script | ||
| is included on the page: | ||
@@ -48,3 +48,3 @@ ```html | ||
| You also need to include an extra stylesheet that includes a | ||
| Add the extra stylesheet that includes a | ||
| [custom font](src/css/font) with additional icons: | ||
@@ -58,4 +58,4 @@ | ||
| If you want to record both audio/video, or video-only, then include a | ||
| `video` element on your page that will display a live camera preview: | ||
| When recording both audio/video, or video-only, include a | ||
| `video` element: | ||
@@ -73,4 +73,4 @@ ```html | ||
| If you're only recording audio, you also need to include wavesurfer.js and | ||
| the videojs-wavesurfer and microphone plugins. Make sure to place them before | ||
| When recording audio-only, also include the wavesurfer.js library and | ||
| the videojs-wavesurfer and microphone plugins. Make sure to place this before | ||
| the `videojs.record.js` script. | ||
@@ -93,4 +93,4 @@ | ||
| Options | ||
| ------- | ||
| Plugin options | ||
| -------------- | ||
@@ -118,12 +118,11 @@ Configure the player using the video.js | ||
| Plugin options | ||
| -------------- | ||
| The available options for this plugin are: | ||
| Available options for this plugin: | ||
| | Option | Type | Default | Description | | ||
| | --- | --- | --- | --- | | ||
| | `audio` | boolean | `false` | Set to `true` for recording audio. | | ||
| | `video` | boolean | `true` | Set to `true` for recording video. | | ||
| | `recordTimeMax` | float | `10` | Maximum length of a recorded clip. | | ||
| | `audio` | boolean | `false` | Include audio in the recorded clip. | | ||
| | `video` | boolean | `true` | Include video in the recorded clip. | | ||
| | `maxLength` | float | `10` | Maximum length of the recorded clip. | | ||
| | `audioBufferSize` | float | `4096` | The size of the audio buffer (in sample-frames per second). Legal values: 256, 512, 1024, 2048, 4096, 8192 and 16384. | | ||
| | `audioSampleRate` | float | `22050` | 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. | | ||
@@ -137,6 +136,7 @@ Plugin events | ||
| | --- | --- | | ||
| | `deviceReady` | Triggered when the device is ready to use. | | ||
| | `deviceError` | Triggered when the user doesn't allow the browser to access the microphone. Check `player.deviceErrorCode` for the specific [error code](https://developer.mozilla.org/en-US/docs/NavigatorUserMedia.getUserMedia#errorCallback). | | ||
| | `startRecord` | Triggered when the user clicked the record button to start recording. | | ||
| | `stopRecord` | Triggered when the user clicked the stop button to stop recording. | | ||
| | `finishRecord` | Triggered once the recorded stream is available. Check `player.recordedData` for the Blob data of your recorded clip. | | ||
| | `finishRecord` | Triggered once the recorded stream is available. Check `player.recordedData` for the Blob data of the recorded clip. | | ||
@@ -162,3 +162,3 @@ Get recorded data | ||
| If you want to disable and hide specific controls, use the video.js `children` | ||
| To disable and hide specific controls, use the video.js `children` | ||
| option: | ||
@@ -177,2 +177,43 @@ | ||
| Localization | ||
| ------------ | ||
| This plugin supports multiple languages. Each language has it's own file | ||
| (found in the `lang` directory) that contains the translated text. | ||
| Using a different language, for example Dutch (`nl`), is done by including | ||
| the Video.js language file and the plugin's language file: | ||
| ```html | ||
| <script src="videojs-record/dist/lang/nl.js"></script> | ||
| <script src="http://cdnjs.cloudflare.com/ajax/libs/video.js/4.11.3/lang/nl.js"></script> | ||
| ``` | ||
| And setting the Video.js player's `language` option: | ||
| ```javascript | ||
| language: "nl" | ||
| ``` | ||
| Adding support | ||
| for an additional language is done by adding a new file with a filename that | ||
| consists of the countrycode and the `.json` extension, eg. `fr.json`. The | ||
| [build script](#Development) compiles the JSON into a usable language file, | ||
| eg. `fr.js`. Check the Video.js wiki for a | ||
| [list of supported countrycodes](https://github.com/videojs/video.js/blob/master/docs/guides/languages.md#language-codes). | ||
| Pull requests to add more languages to this plugin are always welcome! | ||
| More features using other plugins | ||
| --------------------------------- | ||
| The Video.js community created | ||
| [lots of plugins](https://github.com/videojs/video.js/wiki/Plugins) | ||
| that can be used to enhance the player's functionality. Plugins actually | ||
| tested with `videojs-record`: | ||
| - [videojs-persistvolume](https://github.com/theonion/videojs-persistvolume) - | ||
| Saves user's volume setting using `localStorage`, but falls back to cookies | ||
| if necessary. | ||
| Development | ||
@@ -179,0 +220,0 @@ ----------- |
@@ -28,5 +28,8 @@ (function(window, videojs) { | ||
| this.recordVideo = this.options().options.video; | ||
| this.recordTimeMax = this.options().options.recordTimeMax; | ||
| this.audioBufferSize = this.options().options.audioBufferSize; | ||
| this.audioSampleRate = this.options().options.audioSampleRate; | ||
| this.maxLength = this.options().options.maxLength; | ||
| this._recording = false; | ||
| this._processing = false; | ||
@@ -84,3 +87,3 @@ // shortcut | ||
| // display max record time | ||
| this.setDuration(this.recordTimeMax); | ||
| this.setDuration(this.maxLength); | ||
@@ -111,22 +114,5 @@ // hide play control | ||
| // The size of the buffer (in sample-frames) which needs to | ||
| // be processed each time onprocessaudio is called. | ||
| // From the spec: This value controls how frequently the audioprocess event is | ||
| // dispatched and how many sample-frames need to be processed each call. | ||
| // Lower values for buffer size will result in a lower (better) latency. | ||
| // Higher values will be necessary to avoid audio breakup and glitches. | ||
| // Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384). | ||
| 'buffer-size': 4096, | ||
| 'bufferSize': this.audioBufferSize, | ||
| // The sample rate (in sample-frames per second) at which the | ||
| // AudioContext handles audio. It is assumed that all AudioNodes | ||
| // in the context run at this rate. In making this assumption, | ||
| // sample-rate converters or "varispeed" processors are not supported | ||
| // in real-time processing. | ||
| // The sampleRate parameter describes the sample-rate of the | ||
| // linear PCM audio data in the buffer in sample-frames per second. | ||
| // An implementation must support sample-rates in at least | ||
| // the range 22050 to 96000. | ||
| 'sample-rate': 44100 | ||
| 'sampleRate': this.audioSampleRate | ||
| }; | ||
@@ -180,2 +166,5 @@ | ||
| // forward to listeners | ||
| this.player().trigger('deviceReady'); | ||
| // connect stream to recording engine | ||
@@ -228,45 +217,49 @@ this.engine = new RecordRTC(this.stream, this.recordOptions); | ||
| { | ||
| this._recording = true; | ||
| if (!this._processing) | ||
| { | ||
| this._recording = true; | ||
| // hide play control | ||
| this.player().controlBar.playToggle.hide(); | ||
| // hide play control | ||
| this.player().controlBar.playToggle.hide(); | ||
| // setup engine | ||
| switch (this.getRecordType()) | ||
| { | ||
| case this.AUDIO_ONLY: | ||
| // disable playback events | ||
| this.surfer.setupPlaybackEvents(false); | ||
| // setup engine | ||
| switch (this.getRecordType()) | ||
| { | ||
| case this.AUDIO_ONLY: | ||
| // disable playback events | ||
| this.surfer.setupPlaybackEvents(false); | ||
| // hide playhead | ||
| this.playhead.style.display = 'none'; | ||
| // hide playhead | ||
| this.playhead.style.display = 'none'; | ||
| // start/resume live audio visualization | ||
| this.surfer.liveMode = true; | ||
| this.player().play(); | ||
| break; | ||
| // start/resume live audio visualization | ||
| this.surfer.liveMode = true; | ||
| this.player().play(); | ||
| break; | ||
| default: | ||
| // disable playback events | ||
| this.off('timeupdate'); | ||
| this.off('play'); | ||
| default: | ||
| // disable playback events | ||
| this.off('timeupdate'); | ||
| this.off('play'); | ||
| // mute local audio | ||
| this.mediaElement.muted = true; | ||
| // mute local audio | ||
| this.mediaElement.muted = true; | ||
| // start/resume live preview | ||
| this.load(URL.createObjectURL(this.stream)); | ||
| this.mediaElement.play(); | ||
| break; | ||
| } | ||
| // start/resume live preview | ||
| this.load(URL.createObjectURL(this.stream)); | ||
| this.mediaElement.play(); | ||
| break; | ||
| } | ||
| // start countdown | ||
| this.startTime = this.stream.currentTime; | ||
| this.countDown = this.setInterval(this.onCountDown.bind(this), 100); | ||
| // start countdown | ||
| this.startTime = new Date().getTime(); | ||
| this.countDown = this.setInterval(this.onCountDown.bind(this), | ||
| 100); | ||
| // start recording stream | ||
| this.engine.startRecording(); | ||
| // start recording stream | ||
| this.engine.startRecording(); | ||
| // notify UI | ||
| this.trigger('startRecord'); | ||
| // notify UI | ||
| this.trigger('startRecord'); | ||
| } | ||
| }, | ||
@@ -279,12 +272,16 @@ | ||
| { | ||
| this._recording = false; | ||
| if (!this._processing) | ||
| { | ||
| this._recording = false; | ||
| this._processing = true; | ||
| // stop countdown | ||
| this.clearInterval(this.countDown); | ||
| // stop countdown | ||
| this.clearInterval(this.countDown); | ||
| // stop recording stream | ||
| this.engine.stopRecording(this.onStopRecording.bind(this)); | ||
| // stop recording stream | ||
| this.engine.stopRecording(this.onStopRecording.bind(this)); | ||
| // notify UI | ||
| this.trigger('stopRecord'); | ||
| // notify UI | ||
| this.trigger('stopRecord'); | ||
| } | ||
| }, | ||
@@ -326,2 +323,8 @@ | ||
| // restore interaction with controls after waveform | ||
| // rendering is complete | ||
| this.surfer.surfer.once('ready', function(){ | ||
| this._processing = false; | ||
| }.bind(this)); | ||
| // visualize recorded stream | ||
@@ -336,2 +339,5 @@ this.load(this.player().recordedData); | ||
| { | ||
| // video data is ready | ||
| this._processing = false; | ||
| // hide loader | ||
@@ -385,4 +391,4 @@ this.player().loadingSpinner.hide(); | ||
| { | ||
| var currentTime = this.stream.currentTime - this.startTime; | ||
| var duration = this.recordTimeMax; | ||
| var currentTime = (new Date().getTime() - this.startTime) / 1000; | ||
| var duration = this.maxLength; | ||
@@ -562,3 +568,3 @@ this.streamDuration = currentTime; | ||
| var RecordToggle, DeviceButton; | ||
| var RecordToggle, DeviceButton, RecordIndicator; | ||
@@ -584,3 +590,2 @@ /** | ||
| }); | ||
| RecordToggle.prototype.onClick = function(e) | ||
@@ -602,3 +607,2 @@ { | ||
| }; | ||
| RecordToggle.prototype.onStart = function() | ||
@@ -613,3 +617,2 @@ { | ||
| }; | ||
| RecordToggle.prototype.onStop = function() | ||
@@ -651,5 +654,22 @@ { | ||
| // Note that we're not doing this in prototype.createEl() because | ||
| // it won't be called by Component.init (due to name obfuscation). | ||
| /** | ||
| * Icon indicating recording is active. | ||
| * @param {videojs.Player|Object} player | ||
| * @param {Object=} options | ||
| * @class | ||
| * @constructor | ||
| */ | ||
| RecordIndicator = videojs.Component.extend( | ||
| { | ||
| /** @constructor */ | ||
| init: function(player, options) | ||
| { | ||
| videojs.Component.call(this, player, options); | ||
| this.on(player, 'startRecord', this.show); | ||
| this.on(player, 'stopRecord', this.hide); | ||
| } | ||
| }); | ||
| /** | ||
| * Create a custom button | ||
@@ -683,5 +703,26 @@ * @param className {string} class name for the new button | ||
| var defaults = { | ||
| // Include audio in the recorded clip. | ||
| audio: false, | ||
| // Include video in the recorded clip. | ||
| video: true, | ||
| recordTimeMax: 10 | ||
| // Maximum length of the recorded clip. | ||
| maxLength: 10, | ||
| // The size of the audio buffer (in sample-frames) which needs to | ||
| // be processed each time onprocessaudio is called. | ||
| // From the spec: This value controls how frequently the audioprocess event is | ||
| // dispatched and how many sample-frames need to be processed each call. | ||
| // Lower values for buffer size will result in a lower (better) latency. | ||
| // Higher values will be necessary to avoid audio breakup and glitches. | ||
| // Legal values are (256, 512, 1024, 2048, 4096, 8192, 16384). | ||
| audioBufferSize: 4096, | ||
| // The audio sample rate (in sample-frames per second) at which the | ||
| // AudioContext handles audio. It is assumed that all AudioNodes | ||
| // in the context run at this rate. In making this assumption, | ||
| // sample-rate converters or "varispeed" processors are not supported | ||
| // in real-time processing. | ||
| // The sampleRate parameter describes the sample-rate of the | ||
| // linear PCM audio data in the buffer in sample-frames per second. | ||
| // An implementation must support sample-rates in at least | ||
| // the range 22050 to 96000. | ||
| audioSampleRate: 22050 | ||
| }; | ||
@@ -713,2 +754,11 @@ | ||
| // add record indicator | ||
| player.recordIndicator = new RecordIndicator(player, | ||
| { | ||
| 'el': videojs.Component.prototype.createEl(null, { | ||
| className: 'vjs-record-indicator vjs-control', | ||
| }) | ||
| }); | ||
| player.recorder.el().appendChild(player.recordIndicator.el()); | ||
| // add record toggle | ||
@@ -715,0 +765,0 @@ player.recordToggle = new RecordToggle(player, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Fixed alerts
No tests
QualityPackage does not have any tests. This is a strong signal of a poorly maintained or low quality package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.99%
164656
- Number of package files
- increased by4.76%
22
- Lines of code
- increased by6.49%
1067
- Number of low quality alerts
- decreased by-50%
1
- Number of lines in readme file
- increased by20.5%
241
No dependency changes