QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Record Video using Intel XDK

Record Video using Intel XDK

intelxdk-camera-app

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.

Screen Shot 2014-12-19 at 8.18.05 pm

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

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>
Dec 20, 2014Narayan Prusty
Record Microphone Audio using Intel XDKStoring Image in Redis
Comments: 3
  1. Fairuz
    7 years ago

    Hi, can I use this code as part of my teaching class? Is it copyrighted? Thank you.

    ReplyCancel
  2. Sunoj Vijayan
    8 years ago

    How do we play back this local video?

    ReplyCancel
    • Narayan Prusty
      8 years ago

      http://qnimate.com/playing-videos-in-intel-xdk-app/

      ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 3 Comments Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Including Cordova Capture Plugin
  • Recording Video
  • Complete Source Code
Related Articles
  • Record Microphone Audio using Intel XDK
  • Playing Videos in Intel XDK APP
  • Share Button for Intel XDK APP
  • Intel XDK Geolocation Tutorial
  • Create a Camera App using Intel XDK
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license