Media example

100%

The index.html file containing JavaScript that makes use of the Media API functionality, both picture and audio aspect, is listed below.

<!DOCTYPE html>
<html>
  <head>
    <title>Media plugin sample</title>
    <link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
      <style type="text/css">
        img {
          width: 100px;
          height: 150px;
        }
        #imageBoxBase64, #imageBox, #imageBoxBase64Label, #imageBoxLabel {
          display: none;
        }
 
        #audioControl {
          display: none;
        }
      </style>
    <script type="text/javascript">
 
    function printText(str) {
      var d = document.getElementById('text-box');
      d.appendChild(document.createTextNode(str));
      d.appendChild(document.createElement('br'));
      d.scrollTop = d.scrollHeight;
    }
 
    function errorHandler() {
      console.error("error occured");
    }
 
    function takePicture() {
      requestFileSystem(
        window.LocalFileSystem.SHARED_AMONG_USERS | window.TEMPORARY,
        2 * 1024 * 1024,
        function (fs) {
          fs.root.getFile("photo" + new Date().getTime() + ".jpg", {
            'create' : true
          },
        function (fileEntry) {
          console.log(fileEntry.toURL());
          var photoJSPath = fileEntry.toURL();
 
          window.launchbox.Media.getPicture({
            'saveToFile' : true,
            'saveToData' : true,
            'saveToAlbum' : false
          }, {
            'quality' : 50,
            'imageFormat' : window.launchbox.Media.ImageFormat.JPG,
            'adaptSizeToOrientation' : true,
            'maxWidth' : 1024,
            'maxHeight' : 768,
            'url' : photoJSPath
          }, {
            "onSuccess" : function (image) {
              console.log('Image capture success!');
              console.log(image.size);
              console.log(image.width);
              console.log(image.height);
              if (image.url) {
                console.log(image.url);
                  document.getElementById("imageBoxLabel").style.display = "block";
                  document.getElementById("imageBox").style.display = "inline";
                  document.getElementById("imageBox").src = image.url;
              }
              if (image.data) {
                console.log("imagebase64: " + image.data);
                  document.getElementById("imageBoxBase64Label").style.display = "block";
                  document.getElementById("imageBoxBase64").style.display = "inline";
                  document.getElementById("imageBoxBase64").src = image.data;
              }
        },
 
            "onCancel" : function () {
              console.log('Image capture cancelled!');
            },
 
            "onFailure" : function (error) {
              console.log('Image capture failed with error: ' + error.description + '!');
            }
          });
        }, errorHandler);
      }, errorHandler);
    };
 
 
  /* works on certain android devices only */
    function getAudio() {
      requestFileSystem(
        window.LocalFileSystem.SHARED_AMONG_USERS | window.TEMPORARY,
        2 * 1024 * 1024,
        function (fs) {
        fs.root.getFile("audio_native_" + new Date().getTime() + ".m4a", {
          'create' : true
        }, function (fileEntry) {
          console.log("Temporary audio file reserved for audio recording at: " + fileEntry.toURL());
          var audioNativeJSPath = fileEntry.toURL();        
          var options = {
            'sourceType': window.launchbox.Media.SourceType.CAPTURE,
            'url' : audioNativeJSPath
          };
          var output = {
            'saveToData' : true
          };
          var callbacks = {
            "onSuccess": function(payload) {
              alert("Successfully recorded audio:\n" + 
                "size: " + payload.size + "\n" +
                "duration: " + payload.duration);
              document.getElementById("audioControl").style.display = "block";
              document.getElementById("audioControl").src = payload.data;
            },
            "onCancel": function() {
              alert("Cancelled!");
            },
            "onFailure": function(message) {
              alert("Failure with message: " + message);            
            }
          };
          window.launchbox.Media.getAudio(output, options, callbacks);
        }, errorHandler);
      }, errorHandler);
    };
 
  /* ****** Media Audio ****** */
 
    var audioRecordingURL;
      window.onLaunchboxLoaded = function () {
      console.log('API Loaded');
 
      /* Media Audio Listeners */
      window.launchbox.Media.Audio.addListener({
        onPlayed: function () {
          console.log('onPlayed run');
        },
        onRecorded: function (audio) {
          console.log('onRecorded run');
          printText("Successfully Recoreded!");
          printText("Audio size: " + audio.size + " bytes");
          printText("Audio duration: " + audio.duration + " ms");
 
          console.log("Audio size: " + audio.size + " bytes");
          console.log("Audio duration: " + audio.duration + " ms");
 
          if (audio.url) {
            console.log("Audio url: " + audio.url);
            printText("Audio url: " + audio.url, 'audio-box');
            audioRecordingURL = audio.url;
          }
        },
        onStopped: function (session) {
          console.log('onStopped run. Stopped session ' + session);
          printText('onStopped run. Stopped session ' + session);
        },
        onPaused: function (session) {
          console.log('onPaused run. Paused session ' + session);
          printText('onPaused run. Paused session ' + session);
        },
        onFailure: function (error) {
          console.log('onFailure run. Error code=' + error.code + ' error description: ' + error.description);
          printText('onFailure run. Error code=' + error.code + ' error description: ' + error.description);
        }
      });
    };
 
    function record() {
      requestFileSystem(
        window.LocalFileSystem.SHARED_AMONG_USERS | window.TEMPORARY,
        2 * 1024 * 1024,
        function (fs) {
          fs.root.getFile("audio" + new Date().getTime() + ".m4a", {
            'create' : true
          }, function (fileEntry) {
            console.log(fileEntry.toURL());
            var audioJSPath = fileEntry.toURL();
 
            console.log("record() started");
            window.launchbox.Media.Audio.record({
              'saveToFile': true,
              'saveToData': false
            },{
              'encoding': window.launchbox.Media.Audio.Codec.AAC,
              'outputFormat':  window.launchbox.Media.Audio.OutputFormat.MPEG_4,
              'url': audioJSPath
            });
          }, errorHandler);
        }, errorHandler);
      };                        
 
      function stop() {
        console.log("stop() started");
        window.launchbox.Media.Audio.stop();
      };
 
      function play() {
        console.log("play() started");
        window.launchbox.Media.Audio.play({'url': audioRecordingURL});
      };
 
      function pause() {
        console.log("play() started");
        window.launchbox.Media.Audio.pause();
      };
 
    </script>
  </head>
  <body>
  <header>
    <h3><span>Media api sample usage</span>
    </h3>
  </header>
    <div>Camera API</div>
      <input type="button" onClick="takePicture();" value="Take Picture">
        <div id="imageBoxLabel">Photo from file system:</div>
      <img id="imageBox"/>
      <div id="imageBoxBase64Label">Photo as base64 data uri:</div>
      <img id="imageBoxBase64"/>      
 
      <div>Audio API</div>
      <div>Use native recorder. (working only on some android devices)</div>
      <input type="button" onclick="getAudio();" value="Record Audio"/>
      <video controls="controls" src="" id="audioControl" type="audio/mpeg"></video>
 
      <div>Use play/record/stop/pause API methods</div>
 
      <div style="text-align:center; ">
        <input type="button" style="width: 49%" onclick="record();" value="Start Recording">
        <input type="button" style="width: 49%" onclick="stop();" value="Stop (recording/playback)">
        <input type="button" style="width: 49%"  onclick="play();" value="Start Playing">
        <input type="button" style="width: 49%" onclick="pause();" value="Pause (playback)">
      </div>  
 
      <div id="text-box"></div>
 
  </body>
</html>

The contents of the cache manifest file called manifest.appcache for this application are listed below:

CACHE MANIFEST
 
CACHE:
index.html
../images/antenna.png
../images/info.png
../css/style.css
 
NETWORK:
*

The webapp-descriptor.xml file for this application is defined in the following way:

<?xml version="1.0" encoding="UTF-8"?>
<webapp-descriptor xmlns="http://www.pega.com/application-hosting/
web-app-descriptor/2.0">
  <id>com.pega.sample.Media</id>
  <version>1.0.0</version>
  <name>Sample api usage</name>
</webapp-descriptor>

Media

Media example

Related topics

API reference (29)

Index