Can't get my video played with Qt Multimedia and gstreamer - qt5

I've just installed gstreamer on my Debian Jessie linux.
I actually plan to use it within QtMultimedia framework. And though I'm familiar with vlc...I'm new in gstreamer's world.
I tried to run the following very basic qml program:
Window {
visible: true
MediaPlayer {
id: mediaplayer
source: "file:///home/kai/Videos/testx264.mp4"
}
VideoOutput {
anchors.fill: parent
source: mediaplayer
}
MouseArea {
id: playArea
anchors.fill: parent
onPressed:
{
mediaplayer.play()
console.log("error = ", mediaplayer.errorString)
}
}
}
When I try to play the video, I get the sound but no video. In the application output I get the logs below:
Warning: "No decoder available for type 'video/x-h264, stream-format=(string)avc, alignment=(string)au, level=(string)3.1, profile=(string)high, codec_data=(buffer)0164001fffe1001e6764001fac56240b435f9f016a040402800000030080000032478c18c4c001000668e88e1f2c8b, width=(int)720, height=(int)404, framerate=(fraction)50/1, pixel-aspect-ratio=(fraction)1/1, parsed=(boolean)true'."
qml: error = Cannot play stream of type: <unknown>
However, if I launch gstreamer command line as follow, I can get the video playing correctly:
gst-launch-1.0 filesrc location=/home/kai/Videos/testx264.mp4 ! decodebin name=decoder decoder. ! videoconvert ! xvimagesink decoder. ! audioconvert ! pulsesink
I don't really understand what's happening. I was wondering if my version of Qt was maybe statically link with some gst stuff ?
I have installed Qt 5.5 with regular Linux installer.
Should I set some specific settings ?
Should I recompile a specific Qt component respectively ?
Z.

Related

Video compression in react native using ffmpeg

I trying to compress video in react native using react-native-ffmpeg .
I am picking video using react-native-image-picker.
I tried using command -y -i ${inputVideo} -vcodec h264 -acodec mp3 ${finalVideo}.
But it is failing with rc:1.
My code:-
RNFFmpeg.execute(
str_cmd,
).then(result => {
if (result.rc === 0) {
console.log("successfully compressed");
} else {
console.log("error",result);
}
});
Thanks!
If I remember correctly, you have to include the input video into the directory for your app.
You should be able to do so with react-native-fs.
And here is the relevant code from the react-native-ffmeg example project.

Low latency RTMP playback with video.js

i'am trying to play a RTMP stream with low latency uinsg HTML5, vido.js and videojs-flash. For now i can get the stream to display with a 3-4 seconds latency but playing the same stream with ffplay gives a sub-second latency.
Looking at older videojs version it seems that some code that allowed to specify flashvars to be passed to the swf object were never merged. In newer video.js version, one can use the videojs-flash plugin to play a flash video and this plugin seems to support flashVars in the player options and this vars are passed to the swf object.
Did anyone used this feature and how can i provide the flashVars option to the videojs object .
This is the code i tried so far :
var player = videojs('my-video', {
autoplay: true,
muted: true,
preload: "auto",
sources: [{
type: "rtmp/flv",
}],
flashVars: {
buffertime: 0
}
});
if found an answer to my own question that reduces the latency quite a lot. It's not very stable for now since i sometimes get ~1s latency but can go up to 3s. The solution is to use a patched swf that will interpre take into account the buffering options. Now the player initialization becomes:
var player = videojs('my-video', {
techOrder: ['flash'],
autoplay: true,
sources: [{
type: "rtmp/flv",
}],
bufferTime: 0,
flash: {
swf: "js/video-js.swf",
flashVars: {
bufferTime: 0,
autoPlay: true,
bufferTimeMax: 0.25
}
}
});
the video-js.swf is compiled from the patched version at :
https://github.com/sea-kg/video-js-swf.git
Just compile this version and use the "swf:" flash option to provide the path to this swf.
This reduces the latency significantly but in my experience, the latency can vary per connection.

titanium ti.paint toimage() is returning {} after drawing on ios

the following code is resulting in to different outputs different android and ios. myBlob below is {} on ios - the image is empty even after drawing on the screen. in Android it an object with properties and is working fine, but iOS the image is always blank.
This was working before in past ios versions and builds so am I not building it right? We are using 5.3.0 GA for titanium SDK. I have the module checked for iOS in the TiApp Editor.
function uploadImage(signed) {
if (signed) {
var myBlob;
try {
myBlob = $.viewPaint.toImage();
var myImage = Titanium.Utils.base64encode(myBlob).toString();
$.nextAction.image = myImage;
} catch (ex) {
Titanium.API.error('FAILURE HANDLING SIGNATURE DOCUMENT: ' + ex);
return;
}
}
$.nextAction.perform(Alloy.Globals.requests);
}
Ti Paint Module for iPhone
#
# this is your module manifest and used by Titanium
# during compilation, packaging, distribution, etc.
#
version: 1.4.0
apiversion: 2
architectures: armv7 i386 x86_64 arm64
description: Provides a paint surface user interface view.
author: Jeff Haynie
license: Appcelerator Commercial License
copyright: Copyright (c) 2010-2014 by Appcelerator, Inc.
# these should not be edited
name: paint
moduleid: ti.paint
guid: 43f13063-d426-4e9c-8a7a-72dc5e4aec57
platform: iphone
minsdk: 3.4.1.GA
prior code that adds execute to action object
var route = action.action.uri;
Ti.API.info('route = ' + route);
newAction.execute = function(requestManager) {
Titanium.App.fireEvent('app:index:view:requested',
controller : 'signscreen',
uri : route
});
};
code that fires the event to open:
Titanium.App.fireEvent('app:index:view:requested', {
controller : 'signature'
});
if you have anything in your view hierarchy that overlays your paintview such as a confirmation dialog or closing the view in a navigation controller and not grabbing your paintview prior to the window closing the paintview will always return empty. android will continue to work fine but ios will not as the view is not present in the view hierarchy.
Your console log value of {} is a red herring.
Tested on:
TiSDK 5.2.2.GA, 5.3.0.GA
ti.paint: 1.4.0, 1.4.1 (our version with fixes that have been ignored by appc)
With <run-on-main-thread>false</run-on-main-thread> in tiapp.xml
Using the example app.js from the module and adding the following:
var buttonSave = Ti.UI.createButton({ bottom:100, right:10, width:75, height:30, title:'Save' });
buttonSave.addEventListener('click', function(e){
var test = paintView.toImage();
console.log(test.length);
console.log(paintView.toImage());
var imageFile = Titanium.Filesystem.getFile(Titanium.Filesystem.applicationDataDirectory,"testing.png");
imageFile.write(paintView.toImage());
});
win.add(buttonSave)
You will find that
The logged value always will be {}
The length of the object you assigned toImage() to increases as you add pixels to your paintView
The image DOES get written to a file.

How to offer files for download?

I have a problem. In my sencha touch application I have list items like .pdf, .png, ... If user taps on one of them file should be download on his mobile device.
How can I do this? I have no idea :-)
Thanks for help.
You can use phonegap file api to download files, If you are using sencha touch 2.3 or above just follow the bellow steps.
Install phonegap in sencha project by executing following command at the project root and this command creates phonegap folder inside project root.
sencha phonegap init
You need to install two phonegap plugins to work with file api by executing two following commands inside phonegap folder.
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file.git
$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-file-transfer.git
Now you can start working file api in sencha touch and you can follow below code i used for one of my project.
If you want to download file, first you need to read device file system and then using file system you can download files.
getFileSystem : function(){
var me =this;
Ext.Viewport.mask({
xtype: 'loadmask',
message: 'Downloading files..'
});
var extfs = Ext.create("Ext.device.filesystem.Cordova");
extfs.requestFileSystem({
type: window.PERSISTENT,
size: 1024 * 1024,
success: function(fSys) {
window.fileSys = fSys;
Ext.Viewport.unmask();
me.fileDownload("myfolder/filename.png","http://someurl");
},
failure: function(error){
alert(error);
Ext.Viewport.unmask();
}
});
}
I am passing fileLocation(location you want to store file inside phone) & url in above function.
fileDownload: function(fileLocation,Url){
Ext.Viewport.mask({
xtype: 'loadmask',
message: 'Downloading files..'
});
var me = this;
var fSys = window.fileSys
if(fSys){
var file = Ext.create('Ext.device.filesystem.FileEntry',
fSys.fs.root.toURL() + fileLocation, fSys);
file.download({
source: Url,
success: function(entry){
Ext.Msg.alert('SUCCESS', 'Image successfully downloaded');
Ext.Viewport.unmask();
},
failure: function(error){
Ext.Msg.alert('ERROR', 'Download failed');
Ext.Viewport.unmask();
}
});
}
}
Now can see image at internalMemorycard/myfolder/filename.png
Sencha docs
Ext.device.filesystem.Cordova
Ext.device.filesystem.FileEntry
If you are using sencha touch 2.2 or below only change is instead of using sencha class you need to directly use phonegap api.
For reading file system & File download follow phonegap documentation.
Sencha basically operates over HTML, CSS & JS. Rather than doing this using Sencha just implement it similar to how you would do it in HTML then integrate into your application.
Eg: Homework
Try this
document.location= url;
Try the following code it may help you.
var newWindow = window.open('filepath', '_self'); //were filepath is the path of file with extension.

IBM Worklight 6.0 - Cordova camera simulation in the Mobile Browser Simulator doesn't work

My camera code was working fine in WL 5.0.6 and the mobile browser simulator would correctly display the image. Now I moved to WL 6.0 andI get the following error when using the preview in the Mobile Browser Simulator and using the Cordova camera simulation to get a fake picture.
I am using Chrome for the preview.
Not allowed to load local resource: file:///C:/Users/Administrator/cordova/internal/sim/camera/camera1_m.jpg wljq.js:2374
The code is similar to this
navigator.camera.getPicture(onSuccess, onFail, { quality: 50,
destinationType: Camera.DestinationType.FILE_URI });
Note that if I use the DATA_URL, it seems OK with the mobile browser simulator. Just the FILE_URI doesn't seem to be working with the mobile browser simulator.
The Worklight 6.0 Mobile Browser Simulator supports Cordova 2.6 APIs. For navigator.camera.getPicture the following destination types can be used in WL 6.0:
Camera.DestinationType = {
DATA_URL : 0, // Return image as base64 encoded string
FILE_URI : 1, // Return image file URI
NATIVE_URI : 2 // Return image native URI (eg. assets-library:// on iOS or content:// on Android)
};
Example:
navigator.camera.getPicture(
function(data) {
document.getElementById('camera_status').innerHTML = "Success: picture located at " + data;
var img = document.getElementById('camera_image');
img.style.display = "none";
},
function(e) {
console.log("Error getting picture: " + e);
document.getElementById('camera_status').innerHTML = "Error getting picture.";
},
{ quality: 50, destinationType: navigator.camera.DestinationType.FILE_URI, sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM, encodingType: fileType});
Try clearing your browser cache and then be sure to accept the applet permission dialogue on Mobile Browser Simulator startup. Also make sure that your file permissions will allow transfer from the C:/Users//cordova/internal/sim/camera/ folder as that is where the applet stores the camera sim image content.
Cordova 2.6 Camera API reference:
http://docs.phonegap.com/en/2.6.0/cordova_camera_camera.md.html
Funny, that there is already a troubleshooting document for your problem.
http://www-01.ibm.com/support/docview.wss?uid=swg21614861
It looks like DATA_URL didnt work in WLv5, while (if you are right) FILE_URI is not working since WLv6.