This post is a part 37 of Intel XDK Complete Tutorial post series.
In this tutorial I will show you how to record video using built in camera in Intel XDK.
Including Cordova Capture Plugin
Intel XDK doesn’t provide any API to record video using Intel XDK. Therefore we have to use cordova Capture plugin to record video.
Check Capture under Plugins and Permissions section in your APP project.
Recording Video
Here is sample code to record video. With just few lines of JavaScript code we launched device’s default camera application and recorded an video.
function captureSuccess(mediaFiles)
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
//filesystem absolute path of the video file
var filyeSystem_path = mediaFiles[i].fullPath;
//name of the file
var fileName = mediaFiles[i].name;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureVideo()
{
// Launch device video recording application,
//Limit property is optional. It indicates how many video clips you want to capture in one launch of device's video app. Default is 1
//Duration property is optional. It indication maximum duration in seconds for each clip. Default is infinite.
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 10});
}
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
//filesystem absolute path of the video file
var filyeSystem_path = mediaFiles[i].fullPath;
//name of the file
var fileName = mediaFiles[i].name;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureVideo()
{
// Launch device video recording application,
//Limit property is optional. It indicates how many video clips you want to capture in one launch of device's video app. Default is 1
//Duration property is optional. It indication maximum duration in seconds for each clip. Default is infinite.
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 10});
}
Once you have finished recording video the plugin returns list of video files path and name in which the captured video is stored.
On iOS the video file format is MOV and on Android its MPEG.
You can now move the file to www directory using Filesystem API and then play it. You can also upload the files using File Upload API.
Complete Source Code
Here is the complete source of a sample app which records a video and then displays its path and name.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="captureVideo();">Capture Video</button>
<p id="url"></p>
<p id="name"></p>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function captureSuccess(mediaFiles)
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
var filyeSystem_path = mediaFiles[i].fullPath;
document.getElementById("url").innerHTML = filyeSystem_path;
var fileName = mediaFiles[i].name;
document.getElementById("name").innerHTML = fileName;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureVideo()
{
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 10});
}
</script>
</body>
</html>
<html>
<head>
<title></title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<style>
@-ms-viewport { width: 100vw ; zoom: 100% ; }
@viewport { width: 100vw ; zoom: 100% ; }
@-ms-viewport { user-zoom: fixed ; }
@viewport { user-zoom: fixed ; }
</style>
<script src="lib/ft/fastclick.js"></script>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<button onclick="captureVideo();">Capture Video</button>
<p id="url"></p>
<p id="name"></p>
<script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/app.js"></script>
<script src="js/init-app.js"></script>
<script src="js/init-dev.js"></script>
<script>
function captureSuccess(mediaFiles)
{
var i, len;
for (i = 0, len = mediaFiles.length; i < len; i += 1)
{
var filyeSystem_path = mediaFiles[i].fullPath;
document.getElementById("url").innerHTML = filyeSystem_path;
var fileName = mediaFiles[i].name;
document.getElementById("name").innerHTML = fileName;
}
}
function captureError(error)
{
var msg = 'An error occurred during capture: ' + error.code;
navigator.notification.alert(msg, null, 'Uh oh!');
}
function captureVideo()
{
navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 1, duration: 10});
}
</script>
</body>
</html>
@narayanprusty
