I am trying to capture video in android app using phonegap, but facing problem
TypeError: Result of expression 'navigator.device.capture.captureVideo' [undefined] is not a function.
Here bellow is my code
I included following in head
<script type="text/javascript" src="js/phonegap-1.2.0.js"></script>
<script src="js/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
function recordVideo(){
var capture = navigator.device.capture;
var options1 = { limit: 1 };
navigator.device.capture.captureVideo(captureSuccess, captureError, options1);
alert("Record");
}
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
alert(mediaFiles[i].name);
}
}
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
alert(msg);
}
</script>
And code for capturing on a button click Capture Video
But I getting this error on console
TypeError: Result of expression 'navigator.device.capture.captureVideo' [undefined] is not a function.
Please help me.
Thanks in advance.
Timir
You should add the required plugin (https://github.com/apache/cordova-plugin-media-capture/blob/master/doc/index.md)
If you are using intel xdk go to project -> plugins and permissions
Related
I'm using this example Upload Video Phonegap to upload videos into a server which is a php script. I use exactly this code :
<!DOCTYPE html>
<html>
<head>
<title>Capture Video</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"> </script>
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureVideo() {
// Launch device video recording application,
// allowing user to capture up to 2 video clips
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
</head>
<body>
<button onclick="captureVideo();">Capture Video</button> <br>
</body>
</html>
Once I stop the video and I click to "Save", the app freezes and crashes just after. What can be wrong ? I have tested it on several devices because maybe some devices can't support it but still. Even if I stop the video 1 second after or 10 seconds after, the app crashes. What is weird is that the video is in the Gallery after the app crashes.
The PHP script works well because I can send it photos and it works well so I don't think the problem comes from it.
Any advice please ?
Ok I just made the changes in this answer : Phonegap video capture crashes and the app doesn't crash anymore and I can see with wireshark that something is sent to the server even if the vid isn't well received but that's an other issue.
EDIT :
Better use this function :
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
var options = new FileUploadOptions();
options.mimeType = "video/mpeg";
options.fileName = name;
options.chunkedMode = true;
ft.upload(path,
"http://192.154.23.51/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
options);
}
I can now receive succesfully the video.
I have very simple code like this:
<script type="text/javascript" charset="utf-8">
function playAudio() {
// i try to specificate path to audio file different ways:
var src ="/android_asset/www/track.mp3";
//src = "http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3";
var media = new Media(src, // success callback
function() {
console.log("playAudio():Audio Success");
},
// error callback
function(err) {
console.log("playAudio():Audio Error: "+err);
});
alert('sm'); // alert doesn't work -> so prev func 'new Media' doesn't work too
media.play();
}
</script>
And call of this func is such:
<body onload="playAudio()">
I don't understand - why doesn't it work? Audio file is 'assets/www/track.mp3'
The problem is here
var src ="/android_asset/www/track.mp3";
JS don't know /android_asset/
Only JAVA know about this path only so either use java - JS injection or put this file inside www folder.
I don't understand yet why, but when I try do work with this code:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function playAudio(url) {
// Play the audio file at url
// http://audio.ibeat.org/content/p1rj1s/p1rj1s_-_rockGuitar.mp3
var my_media = new Media(url,
// success callback
function () {
console.log("playAudio():Audio Success");
alert("ok");
},
// error callback
function (err) {
console.log("playAudio():Audio Error: " + err);
alert("oops");
}
);
// Play audio
my_media.play();
}
</script>
And called it in:
Play Audio
Or when I call it this way:
Play Audio
Only on simulator it work! But in web-browser it doesn't work still yet
I am turning a HTML app into a .apk using https://build.phonegap.com and everything works great appart from my file selector.
<input name="file" type="file" id="file">
I want to be able to select images only (it doesnt matter if it can select more - but its the images I am looking for) from both camera and file system..
In the web version http://carbonyzed.co.uk/websites/assent/1/photos.html this works great from my phone, but when converted to .apk, this functionality is lost, and I can't seem to find anything on here, or online relating to this issue.
At least for me, the input file doesn't work in Phonegap.
You need use the Phonegap API to get picture and select the source where come from, like photolibrary, camera or savedphotoalbum.
See more info about camera.getPicture: http://docs.phonegap.com/en/2.1.0/cordova_camera_camera.md.html#camera.getPicture
and about Camera.PictureSourceType parameter of cameraOptions method: http://docs.phonegap.com/en/2.1.0/cordova_camera_camera.md.html#cameraOptions
Ended up using the Child Browser system like so
In the head
<script src="childbrowser.js"></script>
in the body
<button class="button-big" onClick="window.plugins.childBrowser.showWebPage('URL_TO_GO_HERE',
{ showAddress: false });" style="width: 100%;">UPLOAD PHOTOS</button>
which has a standard fileuploader like
<input name="file" type="file" id="file">
then it let me select from root storage, works in phonegap 2.2 onwards on both iOS and Android OS
To capture an image I used this in the head
<script type="text/javascript" charset="utf-8" src="json2.js"></script>
<script type="text/javascript" charset="utf-8">
// Called when capture operation is finished
//
function captureSuccess(mediaFiles) {
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1) {
uploadFile(mediaFiles[i]);
}
}
// Called if something bad happens.
//
function captureError(error) {
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
// A button will call this function
//
function captureImage() {
// Launch device camera application,
// allowing user to capture up to 2 images
navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 2});
}
// Upload files to server
function uploadFile(mediaFile) {
var ft = new FileTransfer(),
path = mediaFile.fullPath,
name = mediaFile.name;
ft.upload(path,
"http://my.domain.com/upload.php",
function(result) {
console.log('Upload success: ' + result.responseCode);
console.log(result.bytesSent + ' bytes sent');
},
function(error) {
console.log('Error uploading file ' + path + ': ' + error.code);
},
{ fileName: name });
}
</script>
and this in the body
<input type="button" class="button-big" style="width: 100%;" onclick="captureImage();" value="TAKE PHOTO">
copy and past and it works a dream,
Check it out in this image
any questions, just email comment,
or email me... support#carbonyzed.co.uk
Hey guys i'm workin on an app, which check whether a user has logged in the app before or not. I use phonegap in combination with jquery-mobile. But if i test my app with ripple with the following code:
var SaveUserStatus = function() {
}
SaveUserStatus.prototype.check = function(succes,fail) {
return PhoneGap.exec(function(args) {
success(args);
}, function(args) {
fail(args);
}, 'SaveUserStatus', 'getUserStatus', '');
}
PhoneGap.addConstructor(function() {
PhoneGap.addPlugin('saveUserStatus', new SaveUserStatus());
PluginManager.addService("SaveUserStatus","net.testing.plugins.SaveUserStatus");
});
I get always following error messages:
"Uncaught TypeError: Object [object Object] has no method 'hasResource' - phonegap-1.0.0.js:936" and "Uncaught TypeError: Object [object Object] has no method 'addConstructor' - plugin.js:17
"
Has anyone the same error or see the error, this would be nice because i going crazy with that!
Comment out
<script type="text/javascript" charset="utf-8" src="phonegap-1.1.0.js"></script>
in your HTML-File.
For further informations read the comment by Dan Silivestru http://ripple.tinyhippos.com/forums/6/topics/50
I'm working on a mobile application using phoneGap. I'm showing deviceInfo and and it's not working on Android emulator! but works on BlackBerry emulator. I`m using Dreamweaver cs 5.5. Any solution to this issue?
Here is my code:
// invoked when device is ready
function deviceInfo() {
document.getElementById('window.device.platform').innerHTML = 'window.device.platform = ' + window.device.platform;
document.getElementById('window.device.version').innerHTML = 'window.device.version = ' + window.device.version;
document.getElementById('window.device.uuid').innerHTML = 'window.device.uuid = ' + window.device.uuid;
document.getElementById('window.device.phonegap').innerHTML = 'window.device.phonegap = ' + window.device.phonegap;
navigator.network.isReachable("phonegap.com", function(reachability) {
var states = {};
states[NetworkStatus.NOT_REACHABLE] = 'No network connection';
states[NetworkStatus.REACHABLE_VIA_CARRIER_DATA_NETWORK] = 'Carrier data connection';
states[NetworkStatus.REACHABLE_VIA_WIFI_NETWORK] = 'WiFi connection';
document.getElementById('networkStatus').innerHTML = 'isReachable = ' + states[reachability];
},
{ isIpAddress: false });
}
// invoked when application is resumed (brought to foregroud)
function doResume() {
console.log('doResume()');
}
// invoked when application is paused (sent to background)
function doPause() {
console.log('doPause()');
}
// register PhoneGap event listeners when DOM content loaded
function init() {
console.log('init()');
document.addEventListener("deviceready", deviceInfo, true);
document.addEventListener("resume", doResume, false);
document.addEventListener("pause", doPause, false);
}
function unload() {
console.log('unload()');
}
function fail(error) {
navigator.notification.alert(error, null, "Error");
}
On my HTML:<body onload="init()" onunload="unload()">
Make sure the name of the cordova script is spelled correctly:
it may read
<script type="text/javascript" charset="utf-8" src="cordova-1.x.x.js"></script>
where it should read:
<script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script>
Make sure that "<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />" is present in AndroidManifest.xml.
I could get rid of this issue when I found out, that the cordova version numbers of my cordova.js and the cordova.jar file didn't match.
Getting both from the same cordova version fixed it for me.
That was a time consuming and stupid mistake on muy side.