jbavari / cordova-plugin-video-editor Goto Github PK
View Code? Open in Web Editor NEWA cordova plugin to edit videos.
License: Other
A cordova plugin to edit videos.
License: Other
@jbavari, @rossmartin i used your video editor plugin and try to trim a video and i am getting error pop up as "length=0;index=1" please give me support ASAP it will be appreciated.
Hi, sorry but i'm new in plugins, i can't understand how can i add this plugin to my ionic project, if i build my app with build.phonegap.com.
Is this possibile? What i have to do?
Help me please :)
Actually, i want to trim video in my app so is trimming working in any android version...
Cordova's Camera Plugin is compressing my videos on iOS regardless of quality filter. This is what it looks like when I select a video in my app. (that is a prosthesis)
I want users to be able to upload the video's losslessly. I tried sending both FILE_URI and NATIVE_URI to VideoEditor but it errored out as The requested URL was not found on this server.
(on the iOS emulator)
Is there a way to do this? I've found dozens of other users with the same problem, and it seems it might be a bug in the parent library. Thanks!
The plugin looks amazing but I was wondering how exactly to install it and or set it up. I read through the usage instructions but I am trying to figure out exactly where I have to put stuff in order to get this to work, I am currently testing on Ionic so I do not expect someone to have an example of that but and example of the plugin in a cordova project would be amazing!
Why are android videos being rotated 90 degrees after using transcodeVideo
? My landscape videos are now in portrait and vice versa. I am using $cordovaCapture.captureVideo
and the video appears correctly, and then after a render it's then been rotated.
Is there a way to get the size and duration/length for both uncompressed and compressed/trim videos?
Is there an event, or some indication to the transcoding progress? So we can show the user some feedback / indication of the process?
Thanks,
Doron
What version of the ffmpeg are you using with? is that the latest 2.8?
The one that you referenced with (ffmpeg v0.11.1) is pulled form below:
https://github.com/WritingMinds/ffmpeg-android (ffmpeg v2.5)
Hi,
I created a repository for easy update ffmpeg to the latest version (actually n2.5.11, the n2.4.2 is 16 month old), I added the below libaries to ffmpeg : libmp3lame, fdk-aac, opus, ogg and verbis.
This build configuration also generate a ffprobe binary, if you want.
I get this error when including the plugin in my context.xml and trying to build. Seems pretty uncommon and I can't find any solution to it online.
Cordova + platform Android
Line Code:
fileUri: currentEntries[file].fullPath
Error:
java.net.MalformedURLException: Protocol not found: /mt4p/VID_20150208_175451753.mp4
Edit Code:
fileUri: 'file://' + currentEntries[file].fullPath
Error:
java.io.FileNotFoundException
The file exist and doing console.log(currentEntries[file].fullPath); it says /mt4p/VID_20150208_175451753.mp4
Full code:
function getFileSystem(){
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0,
function(fileSystem){ // success get file system
root = fileSystem.root;
listDir(root);
}, function(evt){ // error get file system
console.log("File System Error: "+evt.target.error.code);
}
);
}
function listDir(directoryEntry){
$('#files').empty();
$('#files').append('
currentDir = directoryEntry; // set current directory
directoryEntry.getParent(function(par){ // success get parent
parentDir = par; // set parent directory
if( (parentDir.name == 'sdcard' && currentDir.name != 'sdcard') || parentDir.name != 'sdcard' ) $('#backBtn').show();
}, function(error){ // error get parent
console.log('Get parent error: '+error.code);
});
var directoryReader = directoryEntry.createReader();
directoryReader.readEntries(function(entries){
currentEntries = entries;
for(var i=0; i<entries.length; ++i){ // show directories
//var entry = sortedArr[i];
//var blockLetter = uiBlock[i%4];
//console.log(entry.name);
if( entries[i].isDirectory ){
$('#files').append('<div class="folder" onclick="openFolder('+ i + ');">' + entries[i].name + '</div>');
}else{
$('#files').append('<div class="file" onclick="openFile('+ i + ');">' + entries[i].name + '</div>');
}
}
}, function(error){
console.log('listDir readEntries error: '+error.code);
});
}
function openFolder(folder){
currentDir.getDirectory(currentEntries[folder].name, {create:false},
function(dir){ // success find directory
listDir(dir);
},
function(error){ // error find directory
console.log('Unable to find directory: '+error.code);
}
);
}
function openFile(file){
console.log(currentEntries[file].fullPath);
VideoEditor.transcodeVideo(
videoSuccess, // success cb
videoError, // error cb
{
fileUri: 'file://' + currentEntries[file].fullPath, // the path to the video on the device
outputFileName: 'file://mt4p/pepito.mp4', // the file name for the transcoded video
quality: VideoEditorOptions.Quality.MEDIUM_QUALITY,
outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
optimizeForNetworkUse: VideoEditorOptions.OptimizeForNetworkUse.YES,
duration: 20 // optional, specify duration in seconds from start of video
}
);
}
AndroidManifest.xml
cordova plugins list
org.apache.cordova.file 1.3.3 "File"
org.apache.cordova.videoeditor 0.0.2 "VideoEditor"
I've tried everything, so thought I would post an issue. I install the project with:
cordova plugin add cordova-plugin-video-editor
I confirmed that the plugin.xml
for the plugin matches #22.
I run 'ionic serve' - and VideoEditor is undefined. As a couple simple tests, I put
<script type="text/javascript">
ionic.Platform.ready(function(){
console.log('VideoEditor', VideoEditor);
});
</script>
at the bottom of the index.html for the ionic project - but it is still undefined.
I then thought it might be a browser versus emulator thing, so I add this variable to my main page
$scope.videoed = function() {
if (typeof(VideoEditor) !== 'undefined') {
console.log('loaded');
return 'loaded';
} else {
console.log('not loaded');
return 'not loaded';
}
};
$scope.videoeditor = $scope.videoed();
However - even in the iOS emulator - the value shows "not loaded."
I'm at my wits end! I would appreciate any tips on things to try. More broadly I am attempting to get videos from iOS and Android losslessly - the quality setting on cordova's getPicture does not apply to videos (or at least not in an understandable way) and therefore users are uploading less than full res videos.
Thank you!
I'm busy collaborating on an app that requires video upload but we have restrictions in place as to the length and size of videos that can be uploaded. I don't have any issues trans-coding videos straight after recording from the video camera, but I keep getting a JSON error when trying to trans-code a video from my phone's gallery. I've tried all sorts of ways of getting the file path so that it is similar to that provided by the camera's success callback to no avail. Has anyone else experienced this or have a solution?
I create the PhoneGap app that needs to upload the video after capture. To reduce the video size, I used the Cordova-plugin-video-editor plugin. This plugin is working fine in JellyBean devices but in KitKat and above it not working. It creates the o bytes file in output location only.
Please help me to solve this problem.
I've got output error while encoding from 3gp to mp4, running on my Nexus S Kitkat 4.4.4, is this ffmpeg bug or the device missing some library, seems that it cannot detect video parameters (bit_rate, rate, width..)
V/VideoEditor( 3192): shellOut: libavutil 51. 54.100 / 51. 54.100
V/VideoEditor( 3192): shellOut: libavcodec 54. 23.100 / 54. 23.100
V/VideoEditor( 3192): shellOut: libavformat 54. 6.100 / 54. 6.100
V/VideoEditor( 3192): shellOut: libavdevice 54. 0.100 / 54. 0.100
V/VideoEditor( 3192): shellOut: libavfilter 2. 77.100 / 2. 77.100
V/VideoEditor( 3192): shellOut: libswscale 2. 1.100 / 2. 1.100
V/VideoEditor( 3192): shellOut: libswresample 0. 15.100 / 0. 15.100
V/VideoEditor( 3192): shellOut: libpostproc 52. 0.100 / 52. 0.100
V/VideoEditor( 3192): shellOut: Input #0, mov,mp4,m4a,3gp,3g2,mj2, from '/storage/sdcard0/DCIM/Camera/VID_20151104_131009.3gp':
V/VideoEditor( 3192): shellOut: Metadata:
V/VideoEditor( 3192): shellOut: major_brand : 3gp4
V/VideoEditor( 3192): shellOut: minor_version : 0
V/VideoEditor( 3192): shellOut: compatible_brands: isom3gp4
V/VideoEditor( 3192): shellOut: creation_time : 2015-11-04 06:11:05
V/VideoEditor( 3192): shellOut: Duration: 00:00:54.40, start: 0.000000, bitrate: 272 kb/s
V/VideoEditor( 3192): shellOut: Stream #0:0(eng): Video: h264 (Baseline) (avc1 / 0x31637661), yuv420p, 176x144, 256 kb/s, SAR 65536:65536 DAR 11:9, 30.02 fps, 30 tbr, 90k tbn, 180k tbc
V/VideoEditor( 3192): shellOut: Metadata:
V/VideoEditor( 3192): shellOut: rotate : 90
V/VideoEditor( 3192): shellOut: creation_time : 2015-11-04 06:11:05
V/VideoEditor( 3192): shellOut: handler_name : VideoHandle
V/VideoEditor( 3192): shellOut: Stream #0:1(eng): Audio: aac (mp4a / 0x6134706D), 8000 Hz, mono, s16, 12 kb/s
V/VideoEditor( 3192): shellOut: Metadata:
V/VideoEditor( 3192): shellOut: creation_time : 2015-11-04 06:11:05
V/VideoEditor( 3192): shellOut: handler_name : SoundHandle
V/VideoEditor( 3192): shellOut: [buffer @ 0x2af18b00] w:176 h:144 pixfmt:yuv420p tb:1/90000 sar:65536/65536 sws_param:flags=2
V/VideoEditor( 3192): shellOut: [buffersink @ 0x2af18c20] No opaque field provided
V/VideoEditor( 3192): shellOut: [scale @ 0x2af18db0] w:176 h:144 fmt:yuv420p sar:65536/65536 -> w:320 h:320 fmt:yuv420p sar:11/9 flags:0x4
V/VideoEditor( 3192): shellOut: [transpose @ 0x2aee7520] w:320 h:320 dir:1 -> w:320 h:320 rotation:clockwise vflip:0
V/VideoEditor( 3192): shellOut: [aformat @ 0x2af2e280] auto-inserting filter 'auto-inserted resampler 0' between the filter 'src' and the filter 'aformat'
V/VideoEditor( 3192): shellOut: [aresample @ 0x2af29d90] chl:mono fmt:s16 r:8000Hz -> chl:mono fmt:flt r:8000Hz
V/VideoEditor( 3192): shellOut: [libx264 @ 0x2aef6bb0] using SAR=9/11
V/VideoEditor( 3192): shellOut: [libx264 @ 0x2aef6bb0] using cpu capabilities: ARMv6 NEON
V/VideoEditor( 3192): shellOut: [libx264 @ 0x2aef6bb0] profile High, level 2.1
V/VideoEditor( 3192): shellOut: [libx264 @ 0x2aef6bb0] 264 - core 125 r680+1521 37be552 - H.264/MPEG-4 AVC codec - Copyleft 2003-2012 - http://www.videolan.org/x264.html - options: cabac=1 ref=3 deblock=1:0:0 analyse=0x3:0x113 me=hex subme=7 psy=1 psy_rd=1.00:0.00 mixed_ref=1 me_range=16 chroma_me=1 trellis=1 8x8dct=1 cqm=0 deadzone=21,11 fast_pskip=1 chroma_qp_offset=-2 threads=1 lookahead_threads=1 sliced_threads=0 nr=0 decimate=1 interlaced=0 bluray_compat=0 constrained_intra=0 bframes=3 b_pyramid=2 b_adapt=1 b_bias=0 direct=1 weightb=1 open_gop=0 weightp=2 keyint=250 keyint_min=24 scenecut=40 intra_refresh=0 rc_lookahead=40 rc=abr mbtree=1 bitrate=512 ratetol=1.0 qcomp=0.60 qpmin=0 qpmax=69 qpstep=4 ip_ratio=1.40 aq=1:1.00
V/VideoEditor( 3192): shellOut: [aac @ 0x2af18140] Too many bits per frame requested
V/VideoEditor( 3192): shellOut: Output #0, mp4, to '/storage/sdcard0/Movies/myvid/VID_MV9raGFsaWRAdGhpbmsud2ViLmlkX2J1YW5nc2F0dHR0dHR0XzE0NDY2MTczODQzNTM=.mp4':
V/VideoEditor( 3192): shellOut: Metadata:
V/VideoEditor( 3192): shellOut: major_brand : 3gp4
V/VideoEditor( 3192): shellOut: minor_version : 0
V/VideoEditor( 3192): shellOut: compatible_brands: isom3gp4
V/VideoEditor( 3192): shellOut: creation_time : 2015-11-04 06:11:05
V/VideoEditor( 3192): shellOut: Stream #0:0(eng): Video: h264, yuv420p, 320x320 [SAR 9:11 DAR 9:11], q=-1--1, 512 kb/s, 90k tbn, 24 tbc
V/VideoEditor( 3192): shellOut: Metadata:
V/VideoEditor( 3192): shellOut: handler_name : VideoHandle
V/VideoEditor( 3192): shellOut: creation_time : 2015-11-04 06:11:05
V/VideoEditor( 3192): shellOut: rotate : 0
V/VideoEditor( 3192): shellOut: Stream #0:1(eng): Audio: aac, 8000 Hz, mono, flt, 128 kb/s
V/VideoEditor( 3192): shellOut: Metadata:
V/VideoEditor( 3192): shellOut: creation_time : 2015-11-04 06:11:05
V/VideoEditor( 3192): shellOut: handler_name : SoundHandle
V/VideoEditor( 3192): shellOut: Stream mapping:
V/VideoEditor( 3192): shellOut: Stream #0:0 -> #0:0 (h264 -> libx264)
V/VideoEditor( 3192): shellOut: Stream #0:1 -> #0:1 (aac -> aac)
V/VideoEditor( 3192): shellOut: Error while opening encoder for output stream #0:1 - maybe incorrect parameters such as bit_rate, rate, width or height
V/VideoEditor( 3192): shellOut: ret 0, stream_spec v:0
V/VideoEditor( 3192): processComplete: 1
D/VideoEditor( 3192): ffmpeg finished
This one through me off because I thought I was doing something wrong my end. It turns out this line of code is causing an unexpected behaviour:
VideoEditor.java
line 275 - 278
if (!inFile.delete()) {
Log.d(TAG, "unable to delete in file");
}
After commenting out this line, input files are kept after rendering! Maybe you should consider this action being the default, and users need to pass an option to have the file removed?
Great plugin, working really well :)
Just a question, if you can switch the dependancy on the ffmpeg4android library. When running it states it's only a trial. After investigation I've found the license costs $400!!
I/Videokit﹕ licenseCheck in path: /data/data/com.example.hello/files
I/Videokit﹕ isLicExistsComplex...
I/Videokit﹕ trying to open /data/data/com.example.hello/files/ffmpeglicense.lic
I/Videokit﹕ license file found...
I/Videokit﹕ You used 1 of your 15 trial days.
I believe this is the license information here:
http://www.appfree.org/item.php?item_id=com.netcompss.ffmpeg4android
http://ffmpeg4android.netcompss.com/home/purchase
Consider switching to another library such as:
https://github.com/roman10/android-ffmpeg-tutorial
https://github.com/appunite/AndroidFFmpeg
https://github.com/guardianproject/android-ffmpeg
https://github.com/yixia/FFmpeg-Android
https://github.com/hiteshsondhi88/ffmpeg-android
https://github.com/hiteshsondhi88/ffmpeg-android-java
Thanks!
Hey,
Would it be possible to add FFmpeg stream input/output support ?
For example, for download and convert a video in same time, it's a conversion on-the-fly.
I'm not able to build my project after upgrading to Cordova 5. This plugin was the culprit.
Here's the relevant build error:
:processDebugManifest/Users/username/Projects/torreville-update/frontend/TorreVille/platforms/android/AndroidManifest.xml:7:53 Error:
Attribute application@icon value=(@drawable/icon) from AndroidManifest.xml:7:53
is also present at android.org.apache.cordova.videoeditor:android-ffmpeg-java:unspecified:debug:12:9 value=(@drawable/ic_launcher)
Suggestion: add 'tools:replace="android:icon"' to <application> element at AndroidManifest.xml:7:5 to override
FAILED
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':processDebugManifest'.
> Manifest merger failed : Attribute application@icon value=(@drawable/icon) from AndroidManifest.xml:7:53
is also present at android.org.apache.cordova.videoeditor:android-ffmpeg-java:unspecified:debug:12:9 value=(@drawable/ic_launcher)
Suggestion: add 'tools:replace="android:icon"' to <application> element at AndroidManifest.xml:7:5 to override
* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
BUILD FAILED
Total time: 2.015 secs
/Users/username/Projects/torreville-update/frontend/TorreVille/platforms/android/cordova/node_modules/q/q.js:126
throw e;
^
Error code 1 for command: /Users/username/Projects/torreville-update/frontend/TorreVille/platforms/android/gradlew with args: cdvBuildDebug,-b,/Users/username/Projects/torreville-update/frontend/TorreVille/platforms/android/build.gradle,-Dorg.gradle.daemon=true
ERROR building one of the platforms: Error: /Users/username/Projects/torreville-update/frontend/TorreVille/platforms/android/cordova/build: Command failed with exit code 1
You may not have the required environment or OS to build this project
Error: /Users/username/Projects/torreville-update/frontend/TorreVille/platforms/android/cordova/build: Command failed with exit code 1
at ChildProcess.whenDone (/usr/local/lib/node_modules/cordova/node_modules/cordova-lib/src/cordova/superspawn.js:139:23)
at ChildProcess.emit (events.js:110:17)
at maybeClose (child_process.js:1015:16)
at Process.ChildProcess._handle.onexit (child_process.js:1087:5)
Can you receive streams - ffmpeg -i input -f rtsp -rtsp_transport tcp rtsp://localhost:8888/live.sdp
and snapshot save an image of the stream?..
Thanks
J.
So poking around the code it seems as though it's only possible to trim starting from the very start of the video and setting an end point via duration
.
Is there going to be any support for setting a starting trim time, or have I missed it somewhere? Thank you!
Hello when i add your plugin to my project using this syntax
cordova plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And after i build my project a new error is occured which points to this import syntax
import com.netcompss.loader.LoadJNI;
As i think their is no package with this name or at least my project cannot access this library so what i need to solve this issue ?
Thank in advance for best regards hope this will solved in next hours due the necessity of this plugin in my project :(
Hello,
Thanks for this great plugin.
It is possible to use html file input ?
Example <input type="file" id="uploadVideo" accept="video/*" />
I have try using and i get this error.
`2016-01-28 12:16:32.192 App[2038:400661] -[__NSDictionaryM stringByReplacingOccurrencesOfString:withString:]: unrecognized selector sent to instance 0x1310db840
2016-01-28 12:16:32.193 App[2038:400661] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[__NSDictionaryM stringByReplacingOccurrencesOfString:withString:]: unrecognized selector sent to instance 0x1310db840'
*** First throw call stack:
(0x182a6d900 0x1820dbf80 0x182a7461c 0x182a715b8 0x18297568c 0x1000bf874 0x1001094d0 0x10006f058 0x18a48eb38 0x18a4372b8 0x18a439198 0x18a292fd4 0x18a418f8c 0x18a24e14c 0x18a2501f8 0x18622f0e8 0x18622f744 0x182a24efc 0x182a24910 0x182a22690 0x182951680 0x183e60088 0x1877c8d90 0x10006b48c 0x1824f28b8)
libc++abi.dylib: terminating with uncaught exception of type NSException`
assetPath = [[assetPath stringByReplacingOccurrencesOfString:@"file://" withString:@""] mutableCopy];
Works great with media capture plugin.
Thanks
Greetings,
I have encountered the error, 'Can't access or make Movies directory', whilst attempting to transcode a captured video on Android. I am using the plugin and compiling with PhoneGap Build.
It feels like I may be missing a permission. Could this be a result of using the plugin via Build? What might be a way to enable that permission via config or alter the plugin to work with build?
I have a fork of the project to test with as a build plugin:
https://github.com/oliverholmberg/cordova-plugin-video-editor
function captureSuccessAndroid(mediaFiles) {
var file = mediaFiles[0];
console.log("Preparing to transcode the video: " + file.fullPath);
var videoFileName = 'video-transcoded-' + Math.floor(Date.now() / 1000) + '.mp4';
console.log("Transcoding to: " + videoFileName);
// Wrap this call in a ~100 ms timeout on Android if
// you just recorded the video using the capture plugin.
// For some reason it is not available immediately in the file system.'
setTimeout(function(){
VideoEditor.transcodeVideo(
androidTranscodeSuccess,
videoTranscodeError,
{
fileUri: file.fullPath,
outputFileName: videoFileName,
quality: VideoEditorOptions.Quality.MEDIUM_QUALITY,
outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
optimizeForNetworkUse: VideoEditorOptions.OptimizeForNetworkUse.YES,
duration: 20
}
);
}, 500);
}
It would be nice to be able to get the length of the movie file, resolution etc.. before calling transcode.
Thanks,
Doron
Hello jbavari,
first of all thank you for this plugin ! I have searched it for ages.
I installed it in my application but I've found a problem. When it transcodes the video the result is rotated if I shot it in portrait mode or stretched if i shot it in landscape mode.
Here's a frame of the video.
There are some settings to change ? Here's my code:
var captureSuccess = function(mediaFiles) {
var url = mediaFiles[0].fullPath;
var output = mediaFiles[0].name;
output = output.substr(0, output.length - 4) + "D";
alert(url);
alert(output);
var videoTranscodeSuccess = function(result){
alert("Video Transcoded");
}
var videoTranscodeError = function(err){
alert("Error: " + err);
}
VideoEditor.transcodeVideo(
videoTranscodeSuccess,
videoTranscodeError, {
fileUri: url,
outputFileName: output,
quality: VideoEditorOptions.Quality.HIGH_QUALITY,
outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
optimizeForNetworkUse: VideoEditorOptions.OptimizeForNetworkUse.NO
}
);
};
// capture error callback
var captureError = function(error) {
alert('Error code: ' + error.code, null, 'Capture Error');
};
// start video capture
try {
navigator.device.capture.captureVideo(captureSuccess, captureError, {
limit: 1
});
} catch (e) {
alert(e);
}
Seems like the createThumbnail function is not working properly on Android. I managed to get a working version using the following code:
VideoEditor.java
line 323
@SuppressWarnings("unused")
private void createThumbnail(JSONArray args) throws JSONException, IOException {
try {
JSONObject options = args.optJSONObject(0);
Log.d(TAG, "options: " + options.toString());
String sourceVideo = options.getString("fileUri");
String targetImage = options.getString("outputFileName");
Bitmap thumbnail = ThumbnailUtils.createVideoThumbnail(sourceVideo.substring(7), MediaStore.Images.Thumbnails.MINI_KIND);
if (thumbnail == null) {
callback.error("issue with video codec or something else");
}
FileOutputStream theOutputStream;
try {
File theOutputFile = new File (targetImage.substring(7));
if (!theOutputFile.exists()) {
if (!theOutputFile.createNewFile()) {
callback.error("Could not save thumbnail.");
}
}
if (theOutputFile.canWrite()) {
theOutputStream = new FileOutputStream (theOutputFile);
if (theOutputStream != null) {
thumbnail.compress(CompressFormat.JPEG, 75, theOutputStream);
}
else {
callback.error("Could not save thumbnail; target not writeable");
}
}
} catch (IOException e) {
e.printStackTrace();
callback.error("I/O exception saving thumbnail");
}
callback.success(targetImage);
} catch (JSONException e) {
callback.error("JSON Exception");
}
}
In the future I would like to grab different frames for the thumbnail. Would be really useful!
Is it possible to have the thumbnail generator to match the same ratio as the video? Thumbnails for Landscape videos are turned into squares and look horrible.
Is that possible to add compression progress status update for both platforms?
On the description it says:
"function videoCaptureSuccess(mediaFiles) {"
Which should come back with an array of the media files, but it's a file path.
Actually the mediaFiles is quite useful because I can get the actual file object instead of the path for file upload.
My question is, is there an option to get the actual mediaFiles array instead of the file path for file upload to server or cloud storage?
Is there a way to compress videos without changing the resolution/aspect ratio?
Hey,
The file url is display in the console but if i want to preview in the app it say file can't be found. I'm using Cordova 5.4.1 also with Meteor JS i don't know if it counts. I can access the video that the media capture plugin take.
Below is the log of the xCode.
2016-01-26 13:52:14.618 App[464:54192] srcVideoPath: /local-filesystem/private/var/mobile/Containers/Data/Application/8991E404-FEE0-4444-8A90-46E98EC41D40/tmp/capture-T0x15cd14340.tmp.niFbPm/capturedvideo.MOV
2016-01-26 13:52:14.620 App[464:75396] videopath of your file: /var/mobile/Containers/Data/Application/8991E404-FEE0-4444-8A90-46E98EC41D40/Documents/CuA9sKz6RkhieTdXL.mp4
2016-01-26 13:52:14.622 App[464:75396] AVAssetExport running progress=0.00
2016-01-26 13:52:14.625 App[464:75396] Export failed: The requested URL was not found on this server.
2016-01-26 13:52:14.707 App[464:54192] path to your video thumbnail: /var/mobile/Containers/Data/Application/8991E404-FEE0-4444-8A90-46E98EC41D40/Documents/CuA9sKz6RkhieTdXL.jpg
2016-01-26 13:52:14.708 App[464:54192] THREAD WARNING: ['VideoEditor'] took '89.800049' ms. Plugin should use a background thread.
2016-01-26 13:52:14.773 App[464:54192] videoTranscodeError, err: The requested URL was not found on this server.
2016-01-26 13:52:14.775 App[464:54192] createThumbnailError, err: null
As you can see it create the video and the thumbnail but also show the error.
My code:
function videoCaptureSuccess(mediaFiles) {
// Wrap this below in a ~100 ms timeout on Android if
// you just recorded the video using the capture plugin.
// For some reason it is not available immediately in the file system.
setTimeout(function(){
var file = "/local-filesystem" + mediaFiles[0].fullPath;
var videoFileName = Random.id(); // I suggest a uuid
var v = "<video webkit-playsinline controls='controls' src='" + file + "'>";
v += "</video>";
document.querySelector("#videoArea").innerHTML = v;
VideoEditor.transcodeVideo(
videoTranscodeSuccess,
videoTranscodeError,
{
fileUri: file,
outputFileName: videoFileName,
quality: VideoEditorOptions.Quality.MEDIUM_QUALITY,
outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
optimizeForNetworkUse: VideoEditorOptions.OptimizeForNetworkUse.YES,
saveToLibrary: false
}
);
VideoEditor.createThumbnail(
createThumbnailSuccess,
createThumbnailError,
{
fileUri: file,
outputFileName: videoFileName
}
);
}, 100);
}
function videoTranscodeSuccess(result) {
// result is the path to the transcoded video on the device
console.log('videoTranscodeSuccess, result: ' + result);
alert(result);
var v = "<video webkit-playsinline controls='controls' src='" + result + "'>";
v += "</video>";
document.querySelector("#videoArea").innerHTML = v;
}
function createThumbnailSuccess(result) {
// result is the path to the jpeg image on the device
console.log('createThumbnailSuccess, result: ' + result);
var i = "<img src='/local-filesystem/" + result + "'>";
document.querySelector("#videoArea").innerHTML = i;
}
// error
var videoCaptureError = function(error) {
navigator.notification.alert('ERROR:' + error.message, null, "Capture Error");
}
function createThumbnailError(err) {
console.log('createThumbnailError, err: ' + err);
}
function videoTranscodeError(err) {
console.log('videoTranscodeError, err: ' + err);
}
Any help will be appreciated.
Thanks
I'm having an issue with the outputFileName only on iOS. The first time it works, but then if you try again, I get the message "Cannot Save". It seems like the output file already exists and then just errors out. If I change the outputFileName, it'll work once, and then back to this error.
I'm using Ionic 1.2.4 and the latest version of iOS
Error in the CLI:
videopath of your file: /var/mobile/Containers/Data/Application/874852D7-4D7D-4496-B2D2-E160686EE4E4/Documents/render.mp4
Export failed: Cannot Save
and the code:
VideoEditor.transcodeVideo(
videoTranscodeSuccess, // success cb
videoTranscodeError, // error cb
{
fileUri: file, // the path to the video on the device
outputFileName: 'render', // the file name for the transcoded video
quality: VideoEditorOptions.Quality.MEDIUM_QUALITY,
outputFileType: VideoEditorOptions.OutputFileType.MPEG4,
optimizeForNetworkUse: VideoEditorOptions.OptimizeForNetworkUse.YES,
//duration: 20, // optional, specify duration in seconds from start of video
saveToLibrary: false, // optional, defaults to true
deleteInputFile: false, // optional (android only), defaults to false
progress: function(info) {
} // optional, see docs on progress
}
)
Is there a way to transcode the videos to 1080p in MP4 with high quality option instead of 720p?
Hi,
Is there a possibility to upload it to phonegap build / cordova.io pleassssee?
Thank you in advance!!
Raz
Is it possible to set a trim start point with the plugin?
On iOS, an extra .mov
file remains in the Documents
directory following a recording.
Looks to be the tempVideoPath
file created, which is never removed.
Thanks!
Hi there,
Is there a way to use complex filter with ffmpeg and avfoundation,
I want to merge two videos side by side and add a PNG water mark.
Since we can control all video Bitrate, video FPS, video dimension and audio channels on Android, is there a way to control them on iOS? Because I want to keep the consistency of the output video between iOS and Android.
When I add SQLite as plugin this plugin starts to crash the program because it is looking for libloader-jni.so file (part of this plugin in sub directory). It seems somehow after I added SQLite it does not any more look for *.so files in subdirectory.
By removing arm64-v8a and armeabi folders from libraries (SQLite brings support for more processor types) everything starts to work.
When using the concatAndTrimFilesMP4Stream function there is a bug in the code of the convertToMP4Stream function. Here is the original code which outputs 00:00:5.6 - an invalid duration:
double dValue = mediaIn.duration;
int hours = (int)(dValue/3600f);
dValue -= (hours*3600);
cmd.add("0");
cmd.add(String.format(Locale.US,"%s",hours));
cmd.add(":");
int min = (int)(dValue/60f);
dValue -= (min*60);
cmd.add("0");
cmd.add(String.format(Locale.US,"%s",min));
cmd.add(":");
cmd.add(String.format(Locale.US,"%f",dValue));
//cmd.add("00:00:" + String.format(Locale.US,"%f",mediaIn.duration));
My fixed version outputs 00:00:05
cmd.add(Double.toString(mediaIn.duration));
However after fixing this, I have another another transcode error which I can't figure out, here is my code for VideoEditor.java:
FfmpegController ffmpegController = new FfmpegController(appContext, appContext.getCacheDir());
TranscodeCallback tcCallback = new TranscodeCallback();
ArrayList<Clip> listVideos = new ArrayList<Clip>();
Clip clip = new Clip();
clip.path = new File(videoSrcPath).getCanonicalPath();
ffmpegController.getInfo(clip);
clip.duration = 5;
listVideos.add(clip);
Clip clip2 = new Clip();
clip2.path = new File(videoSrcPath2).getCanonicalPath();
ffmpegController.getInfo(clip2);
clip2.duration = 5;
listVideos.add(clip2);
Clip clipOut = new Clip();
clipOut.path = new File(outputFilePath).getCanonicalPath();
ffmpegController.concatAndTrimFilesMP4Stream(listVideos, clipOut, false, false, new ShellUtils.ShellCallback() {
@Override
public void shellOut(String shellLine) {
System.out.println("fc>" + shellLine);
}
@Override
public void processComplete(int exitValue) {
if (exitValue < 0)
System.err.println("concat non-zero exit: " + exitValue);
}
});
Do you have a working version using the concatAndTrimFilesMP4Stream I could reference?
Thanks @jbavari and @rossmartin for putting this plugin together! A simple license statement would help people who want to reuse your project, MIT and/or Apache 2 would be most preferred.
Hi Guys,
I hope someone could help me with this. I added the plugin to an existing project via the below command
cordova plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
Plugin got added successfully but when using it based on the documentation, I get an error related to VideoEditor not defined. Not sure if the they I need to include the plugin is wrong or if the way to call the plugin transcode function should be different.
Thanks
PS: we want to be able to create a small video sizes as when a user on Android creates even a small video of 6 seconds the file size is > 10M. So we hope that using this plugin will help to reduce the filesize so it can be transferred over the 3G, 4G connection.
An app using the VideoEditor was working just fine before I updated to Lollipop (or rather CM12 on the OnePlus One). Then it suddenly started giving me a very vague warning about the video transcoding just failing. Is this a known issue and can someone please confirm if they can get this working on Lollipop (or CM12?) Thank you.
Edit: For some reason I had originally reported this as a problem affecting Jelly Bean, but what I meant was Lollipop (Android 5.X)
installed with this command,
cordova plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
Got Reference Error issue here,
[phonegap] [console.error] ReferenceError: VideoEditor is not defined
I've tried serveral way to load,
load with deviceReady but still not resolve the issue.
"navigator.device.VideoEditor" still not resolve the issue.
"$window.plugins.VideoEditor" still not resolve the issue.
creating ngCordova plugins doesn't work either.
I really have a hard time to debug this
any help guys.. I'm using Cordova 5.2.0
I've been using the plugin as a base and added some new features, unfortunately I had to make the changes pretty quickly and only supporting Android. So I didn't create a pull request. I've copied the code in here because it could help extend your plugin:
VideoEditor.js
VideoEditor.java
FfmpegController.java
I was planning on updating my own version with these features, but haven't go around to doing that yet:
https://github.com/kmturley/cordova-plugin-video-editor
Feel free to copy the code you need to enhance your project!
Is there a way to crop the thumbnail to a specific size? as well as control the jpeg compression settings? (e.g. export the jpeg thumbnail as 300 width x 50 height with 65% compression)
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.