1

I have copied and pasted the captureVideo code from the phonegap api documentation, but get an error that says "cannot read property of 'capture' of undefined" All i want to do is click on a button which fires the function to then initiate the camera to open and so i can start recording. This is what i have so far.

    var capture = navigator.device.capture;

// 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 });   
    }

    <!DOCTYPE html> 
<html> 
 <head>
        <title>
            Walking Tour Generator
        </title>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" href="jqm/jquery.mobile-1.4.5.min.css" type="text/css" />
        <link rel="stylesheet" href="jqm/jquery.mobile.icons.min.css" type="text/css" />
        <link rel="stylesheet" href="jqm/walkingtour.css" type="text/css" />
        <link rel="stylesheet" href="jqm/walkingtour.min.css" type="text/css" />
        <link rel="stylesheet" href="jqm/mycustomcss.css" type="text/css" />
        <script type="text/javascript">
</script>
        <script src="jqm/jquery.js" type="text/javascript">
</script>
        <script src="jqm/jquery.mobile-1.4.5.min.js" type="text/javascript">
</script>
        <script type="text/javascript" src="cordova.js">
</script>
        <script type="text/javascript" src="js/index.js">
</script>
        <script type="text/javascript" src="js/savingnewtour.js">
</script>
        <script type="text/javascript" src="js/addsampletours.js">
</script>
        <script type="text/javascript" src="js/loadsampletours.js">
</script>
        <script type="text/javascript" src="js/loadsavedtours.js">
</script>
        <script type="text/javascript" src="js/capturevideo.js">
</script>
        <script type="text/javascript" src="js/getcoordinates.js">
</script>


    <div data-role="content">               
                <input type="button" value="Record" id="capturevideo" onclick="captureVideo();" />
            </div>

Any help would be much appreciated

James
  • 11
  • 5

1 Answers1

0

Did you only paste the code into your project without installing the plugin? You have to run the command

cordova plugin add cordova-plugin-capture

in the console at the root of your project before you can access the navigator.device.capture.

See the documentation for reference: https://github.com/apache/cordova-plugin-media-capture

Sunny Onesotrue
  • 152
  • 3
  • 13
  • yes i have already installed the plugin, still have the same error – James Mar 15 '16 at 11:33
  • ok, well... another problem may be, that you define var capture = navigator.device.capture; at the start and then use navigator.device.capture.captureVideo(...) when firing the command to capture the video. Have you tried commenting out the first line? – Sunny Onesotrue Mar 15 '16 at 11:43
  • what exactly do you mean by that? – James Mar 15 '16 at 11:47
  • can you delete or comment the line, that says "var capture = navigator.device.capture;"? and then try it again... or do you get any output from the console? or any other error message? – Sunny Onesotrue Mar 15 '16 at 11:48
  • just that cordova.js file isnt found, but that is added after i have built the app, it is specifically this line of code where the error is occurring: navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2}); – James Mar 15 '16 at 11:50
  • can you edit your original question and add the code of the index.html - this is where cordova.js should be added, maybe we can find the source of the problem there?! – Sunny Onesotrue Mar 15 '16 at 11:56
  • Also, i have added the captureVideo function to the document.ready, so that it isn't being defined before the the device was ready – James Mar 15 '16 at 12:14
  • thanks :) but, well, everything seems fine here. you can try "cordova platform rm android", then add it again with "cordova platform add android" and build it with "cordova build android", see if "cordova run android" works afterwards – Sunny Onesotrue Mar 15 '16 at 12:17
  • ok i have done that, and it comes up with an error which says: 'failed to find android command in your PATH. Try to update your PATH to include path to valid SDK directory.' – James Mar 15 '16 at 12:23
  • if you could share a working example of the captureVideo function to open up the devices camera that would be great – James Mar 15 '16 at 12:33
  • the problem is not that your code is wrong...apparently something with your settings is wrong. it seems that the android sdk is not included in your PATH, so the android platform can't be built. have you installed android sdk on your pc? – Sunny Onesotrue Mar 15 '16 at 12:45
  • yes install android sdk (those are the developer tools for android programming) and follow the instructions to add the sdk folder to your path-variable: http://developer.android.com/sdk/installing/index.html?pkg=tools after that try "cordova build android" again, now it should work! – Sunny Onesotrue Mar 15 '16 at 13:05
  • i have downloaded android sdk, but i don't know how to add the sdk folder to my path-variable like you said, i tried just using the cordova build command, and i got an error that said 'please install android target: android 23', any help would be appreciated – James Mar 15 '16 at 16:13
  • follow the instructions here: http://stackoverflow.com/questions/19986214/setting-android-home-enviromental-variable-on-mac-os-x – Sunny Onesotrue Mar 15 '16 at 18:14
  • i have followed these instructions successfully, and added the sdk folder to the path variable, but still i get the "cannot read property 'capture' of undefined error when i click on the button to initiate the camera – James Mar 15 '16 at 20:05
  • does "cordova build android" work? I just tried to capture a video with a cordova app and it worked without any problems. maybe you'd want to try and setup a blank starter-app with "ionic start myApp blank" and try to "platform add android", "cordova build android" and "cordova run android" with the blank app, see if that works. – Sunny Onesotrue Mar 16 '16 at 07:20