collab-project / videojs-record Goto Github PK
View Code? Open in Web Editor NEWvideo.js plugin for recording audio/video/image files
Home Page: https://collab-project.github.io/videojs-record
License: MIT License
video.js plugin for recording audio/video/image files
Home Page: https://collab-project.github.io/videojs-record
License: MIT License
In chrome voice doesnt work. How can i fix it
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 ๐
https://github.com/mattdiamond/Recorderjs is a plugin for recording/exporting the output of Web Audio API nodes.
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
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
Thanks in advance
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.
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:
any idea ?
Thank You
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.
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.
https://github.com/zhuker/lamejs offers an mp3 encoder in javascript.
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()
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
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.
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?
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
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.
https://github.com/brianchirls/Seriously.js provides 40+ high-quality video effects for browsers that support WebGL.
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).
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.
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.
var player = videojs("record", { controls: true, loop: false, width: 1280, height: 720, plugins: { record: { audio: true, video: true, maxLength: 60 } } });
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)
Got 'Invalid duration' when I try to use ffmpeg to take thumbnails or seeking in player etc
Besides audio/video recording, a snapshot image from a webcam would be nice as well.
Add note about 4.x-only support for now to readme etc. Also see #6.
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?
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/
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);
}
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
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 .
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.
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
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 .
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);
});
Is there a way to trigger the vjs-device-button button programmatically?
Use case:
thanks
https://github.com/Theodeus/tuna is an audio effects library for the Web Audio API.
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
Question : Is it possible to press a button to pause/resume recording?
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.
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]
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)
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.
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!
It would be cool to add the wavesurfer waveform canvas image to the audio file metadata so it can be displayed as album art.
loadedmetadata
event: https://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadataThe 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.
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?.
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
Resolution 720p, on Chrome 49 stable iMac. Page crashes when I click on the finish button.
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:
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
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
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.