collab-project/videojs-record

video.js plugin for recording audio/video/image files

videojs-record

A video.js plugin for recording audio/video/image files.

Documentation

The documentation and examples can be found on: https://collab-project.github.io/videojs-record

Donate

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

videojs-record's Issues

Trigger vjs-device-button

Is there a way to trigger the vjs-device-button button programmatically?

Use case:

1. click a link outside the player to trigger the camera
2. automatically trigger the camera to skip clicking of the button

thanks

Use adapter.js

The webrtc adapter.js provides a shim to insulate apps from browser spec changes and prefix differences.

Now that we also use media constraints it makes sense to include this adapter, even though an extra dependency should always be avoided, if possible. Perhaps the code can be adapted/included?

Besides the cross-browser constraint support it also helps with #16 and maybe #13.

Force Firefox to record video/audio separately

Is there a way to force Firefox to record video and audio separately (similar to Chrome)? The reason is that the default recorded webm got audio issues when uploaded to YouTube, Vimeo or transcode with ffmpeg. I saw other people have the same issue and reported on https://www.webrtc-experiment.com/RecordRTC/AudioVideo-on-Firefox.html

[To reproduce the issue]

1. Record video+audio as single webm
2. Either upload it to youtube OR encode the video to mp4 using ffmpeg OR play the video on VLC
3. Audio breaks

I also tried to extract both video and audio steams from recorded webm, and then merge them to a new webm. but, that didn't work either. (I am using latest version of videojs-record, recordrtc, firefox and ffmpeg)

Turn Off Devices via javascript?

vjsplayer.recorder.stop() only stop recording , so need another function for turning off camera .
I don't want users to think that i am spying for NSA 😝

webm/wav in Chrome seems to record silence

On OSX 10.11.2 in Chrome 47.0.2526.106, I'm trying to use videojs-record to record video and play it back. I'm not sure if this is a duplicate of #4, but I'm having trouble getting audio. Here's the code:

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

var recorder = videojs("#recorder", {
  controls: true,
  loop: true,
  width: 400,
  height: 250,
  debug: true,
  plugins: {
    record: {
      audio: true,
      video: true,
      maxLength: 10
    }
  }
});

recorder.on('finishRecord', function() {
  setTimeout(function() {
    recorder.play();

    sound = new Howl({
      urls: [URL.createObjectURL(recorder.recordedData.audio)],
      format: "wav",
      onplay: function() {
        console.log("playing sound");
      }
    }).play();
  }, 1000);
});

I can see the callback from howler.js work correctly but I don't hear anything. The audio seems to exist but I think it's recorded silence. I also don't hear anything in the
audio-only demo. I can hear audio in both the demo and in the merged webm in Firefox.

Is there anything obvious I'm doing wrong here? Thanks for any help and for all your work on this plugin!

Get blobs after specific time-intervals

This could be useful in scenarios where you're recording long clip and planning to submit/upload recorded blobs to a server that stiches it together (or maybe even do it clientside).

Recorder freezes on Chrome 49 beta

When i hit the record button it doesn't start to record, but it just freezes after a few seconds.
The console output shows that the recorder tries to initialize the MediaRecorder API over and over again until it crashes the browser.

On Chrome 48 it works without a problem.

On the WebRTC example it works without a problem on Chrome 49 beta: https://webrtc.github.io/samples/src/content/getusermedia/record/

How to get Webm to upload to server?

Hi, I would like to use the library to record a video and upload the clip to server.
https://collab-project.github.io/videojs-record/examples/audio-video.html

Checking console I read this log messages:

Stopped recording video stream. RecordRTC.js:154:13
finished recording:  Blob { size: 1880080, type: "video/webm" } audio-video.html:55:5
video/webm -> 1.88 MB

Where is the file stored once the plaer finished recording:

player.on('finishRecord', function()
{
    // the blob object contains the recorded data that
    // can be downloaded by the user, stored on server etc.
    console.log('finished recording: ', player.recordedData);
});

Chrome v49 - no video playback

Hi there,

First off, massive thanks for the plugin.

I've noticed an issue when trying to playback the video on the latest version of Chrome on Mac - Version 49.0.2623.87 (64-bit).

To replicate:

• Ensure you're on Chrome v49 or higher on Mac
• Start recording a video
• Stop the video
• Press the play button
• Instead of playing the video you've just recorded it will just default to the live feed

Errors seen in the console (when running locally):
Failed to parse SourceMap: http://localhost:2011/assets/js/vendor/videojs-record/videojs.record.min.js.map
Failed to parse SourceMap: http://127.0.0.1:8011/js/showdown.js.map

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

Hope this helps and that you can replicate this.

Thanks,
Josh

Recorded video is not stable

thanks @thijstriemstra it helps, but actually after several times of trying, it didn't work as well (cause: file of fileupload plugin are missing and i tried to get it from the source on github but it didn't work for me), anyway:...
finaly, i can upload the video (ONLY with FIREFOX):

JS

player.on('finishRecord', function()
{
    console.log('finished recording: ', player.recordedData);
    var blob = player.recordedData;
    var reader = new FileReader();
    // this function is triggered once a call to readAsDataURL returns
    reader.onload = function(event){
        var fd = new FormData();
        fd.append('store_video', event.target.result);
        $.ajax({
            type: 'POST',
            url: 'store.php',
            data: fd,
            processData: false,
            contentType: false
        }).done(function(data) {
            // print the output from the store.php script
        });
    };      
    // trigger the read from the reader...
    reader.readAsDataURL(blob);
});

PHP

$data = substr($_POST['store_video'], strpos($_POST['store_video'], ",") + 1);
// decode it
$decodedData = base64_decode($data);
// print out the raw data, 
//echo ($decodedData);
$filename = "video.mp4";
// write the data out to the file
$fp = fopen($filename, 'wb');
fwrite($fp, $decodedData);
fclose($fp);
exit;

and it works fine, BUT:
Audio never match the video (sound is faster than the picture - AUDIO_VIDEO) !!
notes:

• saved format was "mp4" and sometimes it was "webm" and both are having the same problem of sound!
• also video is not stable, there is flashing with black screen every 2-4 seconds: using (VLC Player) MP4 Format.

any idea ?

Thank You

Support for Seriously.js (video effects)

https://github.com/brianchirls/Seriously.js provides 40+ high-quality video effects for browsers that support WebGL.

Recording crash over 3 mins on 720p

Resolution 720p, on Chrome 49 stable iMac. Page crashes when I click on the finish button.

Chrome constraints

What's the best way to let browsers use 720p?

Experiment 1
video: { mandatory: { minWidth: 1280, minHeight: 720 } }, frameWidth: 1280, frameHeight: 720,
It works fine on my iMac fine. However, it throws media constrain error on my Mac air.

Experiment 2
video: {
width: { min: 640, ideal: 1280, max: 1280 },
height: { min: 480, ideal: 720, max: 720 },
}, frameWidth: 1280, frameHeight: 720,
It always chooses 640x480 although my webcams support 1280x720

Experiment 3
video: { width: { exact: 1280 }, height: { exact: 720 } } , frameWidth: 1280, frameHeight: 720,

Video still recorded in 640x480

Disable loop option

The loop option isn't useful in this plugin and should be disabled, even when it's enabled by the user, because it screws up playback of recordings.

Support for Firefox mobile

Hi, I am testing the solution in a Firefox mobile to upload a .webm file to the server, but current code only upload audio but if I test the same example in a Firefox for Desktop, the code runs nice.

What is the mobile support for videojs-record?

Blinking time indicator on second recording

If you record a video for the second time, the time indicator starts to blink.
Also the recording time is wrong. If the length of the recorded video is 10s the recorder shows 8s. This also happens on the second run.

Add thumbnail of audio visualization to ogg/mp3 files

It would be cool to add the wavesurfer waveform canvas image to the audio file metadata so it can be displayed as album art.

• Firefox metadata test page for ogg file: http://xiph.org/~giles/2012/metadata.html (and one for opus)
• loadedmetadata event: https://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadata
• npm library used to read and write media metadata using ffmpeg: https://github.com/parshap/node-ffmetadata

No examples of videojs-record methods

For those who are not very familiar with videojs, it is not obvious, at first, that you can access the methods through the recorder object on a video instance. @thijstriemstra would you accept a PR with an example HTML file documenting how to use them?

// create video
var player = videojs('myAudio', {
    controls: true,
    width: 600,
    height: 300,
    plugins: {
        record: {
            audio: true,
            video: false,
            maxLength: 20
        }
    }
});

// recorder methods available through `recorder` object
player.recorder.isRecording()
player.recorder.getRecordType()
player.recorder.destroy()

Support for audio input selection

https://simpl.info/getusermedia/sources/

with that , user can choose back or front camera. What do you think? If UI is going to be difficult , just an API will be fine.

Firefox Video locked in 4:3, specifying 720p. Works in Chrome

Hey Guys,

With this test setup...

var player = videojs("myVideo",
{
    controls: true,
    width: 1280,
    height: 720,
    plugins: {
        record: {
            audio: true,
            video: {
              mandatory: {
                minWidth: 1280,
                minHeight: 720,
              },
            },
            maxLength: 200,
            debug: true,
            frameWidth: 1280,
            frameHeight: 720
        }
    }
});

In Chrome, the video is played/recorded in 720p, but Firefox seems to lock in at 4:3? I've duplicated this with a few different cameras too. Any ideas?

Firefox 44.0.1/Windows 10

Add snapshot support

Besides audio/video recording, a snapshot image from a webcam would be nice as well.

Issue is sove

Thanks in advance

How to execute some events from Javascript.

Testing the example:
https://collab-project.github.io/videojs-record/examples/audio-video.html

It is necessary to interact with the skin to configurate the player to connect with camera and mic.

I would like to execute this methods using a HTML buttons. How to execute the webcam configuration and the event to start recording?

Many thanks in advance

Juan Antonio

Enable voice for chrome when recording both audio/video

In chrome voice doesnt work. How can i fix it

Add support for animated gif recordings

See http://RecordRTC.org/GifRecorder.html.

Saving/Storing on Localhost by default

first of all, Thank you for your great tools here,

What i can do to store the recorded Audio_Video on localhost/Server by default after finishing the recording process?

Wishing for the Code Please :)

Regards,
Mostafa Megahed

Support for Audio Output Devices API

Support for audio output devices API, a set of JavaScript APIs that let a Web application direct the audio output of a media element to authorized devices other than the system or user agent default.

Behind a flag since Chrome 45, enabled by default since 49. See demo at https://webrtc.github.io/samples/src/content/devices/multi/ and status at https://www.chromestatus.com/features/4621603249848320

Specifying resolution for image/video

Looks like recording on Chrome (and Edge) also needs the video and canvas settings to correctly set the width and height of the recorded video. These values are only used by RecordRTC (aka Whammy), the Firefox MediaRecorder simply uses the getUserMedia constraints.

diff --git a/src/js/videojs.record.js b/src/js/videojs.record.js
index 4b6ac3d..6b1a383 100644
--- a/src/js/videojs.record.js
+++ b/src/js/videojs.record.js
@@ -94,6 +94,16 @@
             this.engine.bufferSize = this.bufferSize;
             this.engine.sampleRate = this.sampleRate;

+            // XXX: video/canvas settings
+            this.engine.video = {
+                width: 1280,
+                height: 720
+            }
+            this.engine.canvas = {
+                width: 1280,
+                height: 720
+            }
+
             // animated gif settings
             this.engine.quality = this.quality;
             this.engine.frameRate = this.frameRate;

Very annoying but I suppose we either find a way to parse the video constraints (#34 might help?) or we need to add an explicit (video) width and height option.

Browserify error: Cannot find module 'videojs'

There seems to be an typo: require('videojs'). When i change it to require('video.js') it works.

Browserify Error { [Error: Cannot find module 'videojs' from '/vagrant/node_modules/videojs-record/src/js']

(function (root, factory)
{
    if (typeof define === 'function' && define.amd)
    {
        // AMD. Register as an anonymous module.
        define(['videojs'], factory);
    }
    else if (typeof module === 'object' && module.exports)
    {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('videojs'));
    }
    else
    {
        // Browser globals (root is window)
        root.returnExports = factory(root.videojs);
    }

videojs 5.0 support

I want to switch to 5.0 but I am struggling with their new plug-in management. I will work on it but concerning this plugin, I wanted to check first if you plan to migrate to 5.0. If I manage to do it, do you want a PR?.

Distorted video/audio

Sometimes it happens that the audio and video is recorded like this: https://www.youtube.com/watch?v=iI1yHDF2DYA

This happens in Firefox, but I don't know in which circumstances. It seems that this happens randomly.

Support for opus-recorder

opus-recorder is a library for library for recording opus encoded audio. Audio is encoded using libopus ver 1.1.1 beta compiled with emscripten.

Add note about v4.x-only support

Add note about 4.x-only support for now to readme etc. Also see #6.

Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).

Error: Failed to construct 'AudioContext': The number of hardware contexts provided (6) is greater than or equal to the maximum bound (6).
    at Error (native)
    at subClass.videojs.LibVorbisEngine.videojs.extend.start 
    at videojs.Recorder.videojs.extend.start 

This error was thrown when he 7th player is created. It should reuse AudioContext or close previous one when recording stopped.

Using Chrome Version 48.0.2564.71 beta (64-bit) on OS X 10.11.2

getUserMedia() no longer works on insecure origins

why?

At first time, I opened the html file it was ok. But when I change html file this problem was coming

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS

I use gulp browser-sync package load these files

Upload files to Server

I am trying to use the following popular file upload lib (https://github.com/blueimp/jQuery-File-Upload) to get the recorded blob data to php server, but couldn't figure out how to call the upload function.

Could anybody point me to the right direction?

thanks in advance,
Lucy

'Invalid Duration' - Recorded video on Firefox

• Device -
  Macintosh Firefox 43.0
• Recorder setup script -

  var player = videojs("record", { controls: true, loop: false, width: 1280, height: 720, plugins: { record: { audio: true, video: true, maxLength: 60 } } });

• Video info from ffprobe -

  Input #0, matroska,webm, from '1451315141116.webm':
  Metadata:
  encoder : QTmuxingAppLibWebM-0.0.1
  Duration: N/A, start: 0.000000, bitrate: N/A
  Stream #0:0(eng): Video: vp8, yuv420p, 640x480, SAR 1:1 DAR 4:3, 30 fps, 30 tbr, 1k tbn, 1k tbc (default)
  Stream #0:1(eng): Audio: vorbis, 44100 Hz, mono, fltp (default)

• Error -

  Got 'Invalid duration' when I try to use ffmpeg to take thumbnails or seeking in player etc

Compress wave audio using Libvorbis

Wav is very big.
Before we discovered videojs , we implemented compression of wav using http://garciat.com/libvorbis.js/ inside browser. It works very well.
Now we are using videojs-record due to it records both video and audio at the same time . But sizes of audio is huge and looking a way to compress it using libvorbis. Libvorbis compress stream directly.
http://garciat.com/libvorbis.js/demos/microphone-recorder.html
Can you give us some guide where to look? We will contribute.

Pause and resume recording

Question : Is it possible to press a button to pause/resume recording?

Chrome MediaRecorder

MediaRecorder API seems to be available in both Canary and stable, behind a flag (chrome://flags/#enable-experimental-web-platform-features). Does it mean that video+audio can be recorded as a single webm (similar to Firefox) in the future? :)

Is there any change I need to do with this lib to force Chrome MediaRecorder or it automatically detect MediaRecorder?

Thanks

Audio is distorted

When recording audio at 22050 sample rate Sound is totally distored , sounds like an Alien. Tested on chrome 44.0.2403.155 , Linux Kernel 3.16 .

When i run it on server i got InvalidAccessError: Failed to execute 'disconnect' on 'AudioNode'" in "AUDIO Only" recording.

videojs.record.js:172 Uncaught InvalidAccessError: Failed to execute 'disconnect' on 'AudioNode': the given destination is not connected.

It seems to do with CORS . It runs fine locally.

Firefox video quality

Using the default 640_480 setting on Firefox, and the recorded video seems in much lower quality compared with Chrome recorded video with 640_480 setting. I also tested on the recordrtc example page, and the Firefox video quality seems fine and match the chrome quality. Is there any setting I can change to improve the Firefox video quality?

All the tests performed on latest iMac with latest browsers.

Thanks in advance.

Display progress control in the control bar

It would be nice to add the progress control in the control bar, so it would be possible to have more control of the playing of the just recorded video.

IE record for video+audio

I tried to record video+audio on IE and it seems only recorded audio as wav and no video. Is that the limitation with RecordRTC?

Add support for recorder.js

https://github.com/mattdiamond/Recorderjs is a plugin for recording/exporting the output of Web Audio API nodes.

Ogg recording is not supported when using AUDIO_VIDEO

Audio recording example in Audio Only works!
But at Audio-video example isChrome is become null and trows error. Tried Forced setting isChrome to True but
that makes video blank, and it gives "cant get videoblob url" Error.

Request URL:http://localhost:8000/examples/null Request Method:GET Status Code:404 File not found

Support for lamejs mp3 recording

https://github.com/zhuker/lamejs offers an mp3 encoder in javascript.

Buttons cannot be clicked in mobile browsers.

Is that related to Videojs or record? Buttons dosen't work when tested in mobile emulation (web dev tools). Not tested on native mobile browsers tho .

Support for Tuna (audio effects)

https://github.com/Theodeus/tuna is an audio effects library for the Web Audio API.