Comments (27)
That's a nice plugin. I can add an example but it'll take a day or two since it's christmas ;)
But looks like https://github.com/blueimp/jQuery-File-Upload/wiki/Chunked-file-uploads has most info you'll need..
from videojs-record.
Thanks a lot. :)
Yep, one of the reason I am choosing that lib is the chunked upload feature to improve the memory performance etc. I tried with their example but not able to figure out how to pass the generated video/audio blob data. It will be great if you can create an example, much appreciated.
Thanks again,
Lucy
from videojs-record.
Hi!
This is an outstanding plugin! I have one quick question that is an extension of the one above. After I get the recordedData uploaded and stored offsite, how can I feed the data back into the player on a subsequent page load? Eg. User A records + uploads a video with audio, and User B wants to watch it.
Any help you can provide would be much appreciated!
Thanks!
Patrick
from videojs-record.
@pmccarren , did you try videojs to play the recorded video? e.g. http://videojs.com/
BTW, did you use blueimp to get the recordedData to server? If so, do you mind to share your code with us? :)
thanks,
Lucy
from videojs-record.
Hi @zang! I utilized the logic found here: http://bit.ly/1TmDg7k to do an Amazon S3 upload. I've been looking at videojs but am not sure how to load both the audio + video tracks in the chrome browser. (video is a webm blob and the audio is a wav blob). Obviously in the videojs-record demo (https://collab-project.github.io/videojs-record/examples/audio-video.html) you can record a video with audio and play it back. Know how to take the recorded data and load it at a later date? What if someone records with Firefox and someone else wants to play with Chrome? Chrome doesn't support the single track webm+audio format.
Thanks a bunch!!
Patrick
from videojs-record.
@zang I uploaded an jquery fileupload example just now, could you give it a try and let me know how it works out?
from videojs-record.
@pmccarren you could use http://ffmpeg.org on the server-side to generate the files for different browsers (mp3, mp4, ogg etc).
from videojs-record.
You are a star!! The file uploading works perfectly. However, I got a separate issue when I try to trans-code the video with ffmpeg. It throws an error saying 'invalid duration'. I then run ffprobe and got the following results. Any idea on how to set the duration and bitrate? :)
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)
--- A separate question ---
Btw, is there a way to increase resolution from 640*480 to 720p?
thanks again,
Lucy
from videojs-record.
Hi Patrick, I am planning to use ffmpeg to merge the audio and video for chrome recording. :)
from videojs-record.
@zang what browser version and platform? Sounds like an issue with the way RecordRTC records these mixed media files.
from videojs-record.
@zang try setting width and height, it defaults to 640*480 I think.
from videojs-record.
@thijstriemstra I am on Macintosh Firefox 43.0. and my initialize script is :
var player = videojs("record", { controls: true, loop: false, width: 1280, height: 720, plugins: { record: { audio: true, video: true, maxLength: 60 } } });
The recorded video is still in 640*480.
thanks,
Lucy
from videojs-record.
That sounds like a separate issue, can you create a new ticket for that?
from videojs-record.
@zang @thijstriemstra
I implemented setting video constraints in #30
from videojs-record.
Excellent! :)
@thijstriemstra , I've created a separate issue for the 'invalid duration' via #31
thanks @thijstriemstra @alsar
from videojs-record.
I've also added an example for the Fine Uploader library. Considering this ticket fixed and closing.
from videojs-record.
Thank you so much for your help!
P.S. As requested, I created a separate ticket for the invalid duration issue. thanks again. :)
from videojs-record.
Updated to latest script, got a few errors when I setup the recorder with the following script:
var player = videojs("record", { controls: true, loop: false, plugins: { record: { audio: true, video: { width: 1280, height: 720 }, maxLength: 60 } } });
-
On Chrome Version 47.0.2526.106 (64-bit), I got the following error
Uncaught TypeError: Failed to execute 'webkitGetUserMedia' on 'Navigator': Malformed constraints object. -
On Firefox, I got the following error when playback the recorded video (I don't get this error for 640*480 solution):
The media playback was aborted due to a corruption problem or because the media used features your browser did not support. -
On Chrome, I also got the following error when recording both video and audio
Uncaught TypeError: Cannot read property 'split' of undefined
from videojs-record.
Chrome doesn't support the latest specification for constraints.
You still have to use the "old" syntax for Chrome:
video: {
mandatory: {
minWidth: 1280,
minHeight: 720,
},
},
This old syntax is still supported in Firefox, but it will be removed in the future.
@thijstriemstra What about using this shim https://github.com/webrtc/adapter to abstract the differences with constraints between browsers, so that the new syntax can be used everywhere?
from videojs-record.
@alsar I'd prefer to not to add another dependency but after looking at the code I guess it makes sense not to add all of that compat code to this plugin. I've opened #34 for this.
from videojs-record.
Thanks for testing @zang. I've fixed point 3 and 1 should be fixed once the webrtc adapter is used. Still need to test point 2.
from videojs-record.
Let's use separate tickets to discuss any other issues, this ticket is about uploading files to the server.
from videojs-record.
Pls help me. How to upload a video file. step by step.
plugins:
record:
audio: true,
video: true,
from videojs-record.
@minhnguyenwp there are obvious examples here: https://github.com/collab-project/videojs-record/tree/master/examples/upload If you can't figure it out, contact me and send me a bitcoin and I'll help you out ;)
from videojs-record.
Thk master. i did exactly like that. but i need upload a video file and i dont know how to add header options with 'blueimp-file-upload', and a simple php get that data file. would u pls help me.!
from videojs-record.
@minhnguyenwp this sounds like a blueimp-file-upload issue, and you should ask them or place your question on stackoverflow.
from videojs-record.
@thijstriemstra can you share upload example for the same for php server
from videojs-record.
Related Issues (20)
- Firefox: screen recording broken. Error message: "DOMException: The object can not be found here." HOT 1
- Record Camera and Screen into Single WebM. HOT 2
- taking image from Screen while screen share enabled HOT 1
- MediaRecorder API frame rate no change HOT 1
- Error Recording as Mirror Mode HOT 1
- vjs-record-indicator div overlays the screen in Chromium based browsers and takes over the clicks HOT 1
- Is timestamp blob garbage collected ?
- Encountering "Uncaught (in promise) TypeError: cannot read properties of undefined (reading 'dataEnd')" error with the videosjs.record.ts-ebml.js plugin on Android devices, causing the application to freeze
- How to record a computer speaker while recording a screen HOT 1
- Not able to enable Portrait Mode HOT 1
- ffmpeg.wasm plugin needs upgrading to 0.12+ HOT 2
- Can't record mp4 file on Google Chrome. HOT 1
- Issue record on iOS by Chrome HOT 2
- iOS Chrome - 0Kb recorded HOT 3
- Demos using wavesurfer error with 404 HOT 1
- How to Play Audio Only?
- How to Play Audio Only?
- Video Enters Fullscreen "Live Broadcast" Mode on iOS Despite playsinline Attribute in Standalone PWA HOT 2
- How to start and stop record from an external button ? HOT 1
- RecordToggle can't be found HOT 7
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from videojs-record.