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>