3

i am using phoengap capture video plugin i have used 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>

it is working fine.. but i want

how to show my video image or play the video on touch select?

i did use this

 path = mediaFile.fullPath
   $("div").html("<img src="+path+">"); 

not showing video image. Can you help Me?

2 Answers 2

5

@DavidC was real close, you just need to know what property of the MediaResult ob to use, fullPath. Here is a full example.

document.addEventListener("deviceready", init, false);
function init() {


    document.querySelector("#takeVideo").addEventListener("touchend", function() {
        console.log("Take video");
        navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1});
    }, false);

}

function captureError(e) {
    console.log("capture error: "+JSON.stringify(e));
}

function captureSuccess(s) {
    console.log("Success");
    console.dir(s[0]);
    var v = "<video controls='controls'>";
    v += "<source src='" + s[0].fullPath + "' type='video/mp4'>";
    v += "</video>";
    console.log(v);
    document.querySelector("#videoArea").innerHTML = v;
}
3
  • sure - i suppose :) i blogged it too - raymondcamden.com/2015/06/05/… Jun 6, 2015 at 12:23
  • @RaymondCamden i m getting error like "Error in Success callbackId: Capture839271896 : TypeError: console.dir is not a function"
    – Ravi Mehta
    May 25, 2016 at 6:52
  • console.dir is not a function? Weird - what platform are you using it in? You can just replace that with console.log. May 25, 2016 at 13:02
2

Because it is a video, I guess you should use the tag video instead of img. I can't validate this right now

$("div").html(' <video controls="controls">
       <source src="'+path+'" type="video/mp4" />
    </video>'); 
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.