<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Camera API - thanks to https://developer.mozilla.org/en-US/docs/Mozilla/B2G_OS/API/Camera_API/Introduction and https://github.com/robnyman/robnyman.github.com/tree/master/camera-api</title>

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes">
<meta charset="utf-8" />
<link href='//www.rjmprogramming.com.au/PHP/emboss_h1.css' rel='stylesheet' type='text/css'>
<style>

body { background-color: #c0cfcf; }
div { text-align: center; width: 100%; background-color: #cfc0cf; }
section { background-color: #cfcfc0; }
h1 { text-align: center; width: 100%; }

</style>

<script type='text/javascript'>
var hfirst="img";
var firstoftwo="image";
var secondoftwo="png";
var toemail="";
var weareready=false;

function huhfirst(duis) {
if (hfirst.indexOf("video/") != -1) {
if (duis.indexOf("data:video/") == 0) {
var asl1=hfirst.split("/")[1].split("'")[0].split('"')[0];
var asl2=duis.split("/")[1].split(";")[0];
hfirst=hfirst.replace(asl1, asl2);
}
}
}

function aemail(ame) { // thanks to http://www.telerik.com/forums/proper-way-to-do-mailto-and-tel-links(
window.top.location = ame.href;
}

function ifweareready() {
if (weareready) {
if (toemail == "@") toemail="";
while (toemail.indexOf("@") == -1) {
toemail=prompt("Please enter email address to send email to", "fill.in@email.address");
if (toemail == null) toemail="@";
}
if (toemail != "@") {
document.getElementById("mymobile").value=document.getElementById("aemail").title.replace(":?", ":" + toemail + "?");
document.getElementById("fclick").click();
}
weareready=false;
}
}
</script>
</head>

<body style="background: url('http://www.rjmprogramming.com.au/Android/Camera/Android_Camera_Photo_GooglePlus_Upload-52of.jpg');">

<div class="container" style="border: 5px solid yellow;">
<script type='text/javascript'>
if (document.URL.toLowerCase().indexOf('video') != -1) {
hfirst='video controls><source type="video/quicktime" ';
document.write('<h1>Camera <select onchange=" location.href=document.URL.split(String.fromCharCode(63))[0] + String.fromCharCode(63) + this.value + String.fromCharCode(61) + String.fromCharCode(121); "><option value=Video>Video</option><option value=Audio>Audio</option><option value=Image>Image</option></select> API <h4>RJM Programming - November, 2016 - thanks to https://github.com/robnyman/robnyman.github.com/tree/master/camera-api</h4></h1>');
} else if (document.URL.toLowerCase().indexOf('audio') != -1) {
hfirst='audio ';
document.write('<h1>Camera <select onchange=" location.href=document.URL.split(String.fromCharCode(63))[0] + String.fromCharCode(63) + this.value + String.fromCharCode(61) + String.fromCharCode(121); "><option value=Audio>Audio</option><option value=Video>Video</option><option value=Image>Image</option></select> API <h4>RJM Programming - November, 2016 - thanks to https://github.com/robnyman/robnyman.github.com/tree/master/camera-api</h4></h1>');
} else {
document.write('<h1>Camera <select onchange=" location.href=document.URL.split(String.fromCharCode(63))[0] + String.fromCharCode(63) + this.value + String.fromCharCode(61) + String.fromCharCode(121); "><option value=Image>Image</option><option value=Video>Video</option><option value=Audio>Audio</option></select> API <h4>RJM Programming - November, 2016 - thanks to https://github.com/robnyman/robnyman.github.com/tree/master/camera-api</h4></h1>');
}
</script>

<section class="main-content">
<div>Demo of Camera API, currently implemented in Firefox & Google Chrome on Android. Choose to take picture with your device's camera & preview will be shown through createObjectURL or FileReader object (local files & email supported too).</div>
<hr>
<div>
<script type='text/javascript'>
if (document.URL.toLowerCase().indexOf('video') != -1) {
document.write('<input onclick="document.getElementById(' + "'" + 'aemail' + "'" + ').style.display=' + "'" + 'inline' + "'" + ';" type="file" id="take_photograph" accept="video/*">');
} else if (document.URL.toLowerCase().indexOf('audio') != -1) {
document.write('<input onclick="document.getElementById(' + "'" + 'aemail' + "'" + ').style.display=' + "'" + 'inline' + "'" + ';" type="file" id="take_photograph" accept="audio/*">');
} else {
document.write('<input onclick="document.getElementById(' + "'" + 'aemail' + "'" + ').style.display=' + "'" + 'inline' + "'" + ';" type="file" id="take_photograph" accept="image/*">');
}
</script>
</div>
<hr>
<script type='text/javascript'>
if (document.URL.toLowerCase().indexOf('video') != -1) {
document.write('<h2 id="myh2">Preview: <a id="aemail" title="mailto:?subject=My%20Video%20..." onclick=" this.style.color=\'black\'; weareready=true; ifweareready(); " style="display: none; text-decoration:underline;cursor:pointer;color:orange;">Email (via server side mail)</a></h2><div><' + hfirst.replace(' ',' style="display:none;" ') + ' src="about:blank" alt="" id="show_photograph"></' + hfirst.split(' ')[0] + '>');
} else if (document.URL.toLowerCase().indexOf('audio') != -1) {
document.write('<h2 id="myh2">Preview: <a id="aemail" title="mailto:?subject=My%20Audio%20..." onclick=" this.style.color=\'black\'; weareready=true; ifweareready(); " style="display: none; text-decoration:underline;cursor:pointer;color:orange;">Email (via server side mail)</a></h2><div><' + hfirst.replace(' ',' style="display:none;" ') + ' src="about:blank" alt="" id="show_photograph"></' + hfirst.split(' ')[0] + '>');
} else {
document.write('<h2 id="myh2">Preview: <a id="aemail" onclick=" if (navigator.userAgent.match(/Android/i)) { aemail(this); } " style="display: none;" title="mailto:?subject=My%20Photograph%20..." href="mailto:?subject=My%20Photograph%20...">Email (optional Body section Clipboard Paste available via usual Select All/Copy of new window 10 second view of photograph)</a></h2><div><' + hfirst + ' src="about:blank" alt="" id="show_photograph"></' + hfirst.split(' ')[0] + '>');
}
</script>

</div>
<hr>
<div id="error"></div>
<hr>
</section>

<p class="footer">Code based on <a href="https://github.com/robnyman/robnyman.github.com/tree/master/camera-api">Camera API repository on GitHub</a>.</p>
</div>

<script type='text/javascript'>

var wo=null;
var wsecs=0;
var odu;
var imgURL=null;

function waitnow() {
wsecs++;
if (wsecs >= 10) {
if (wo) {
wo.close();
if (imgURL != null) {
window.URL.revokeObjectURL(imgURL);
imgURL=null;
}
}
document.getElementById('aemail').click();
wsecs=0;
wo=null;
} else if (wo == null) {
if (imgURL != null) {
window.URL.revokeObjectURL(imgURL);
imgURL=null;
}
} else if (!wo.closed) {
wsecs++;
setTimeout(waitnow, 1000);
} else {
if (imgURL != null) {
window.URL.revokeObjectURL(imgURL);
imgURL=null;
}
}
}

function getDataUri(url, callback) { // thanks to https://davidwalsh.name/convert-image-data-uri-javascript
var image = new Image();

image.onload = function () {
var canvas = document.createElement('canvas');
canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size

canvas.getContext('2d').drawImage(this, 0, 0);

// Get raw image data
//callback(canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''));

// ... or get as Data URI
callback(canvas.toDataURL(firstoftwo + '/' + secondoftwo));
};

image.src = url;
}

(function () {
var takePicture = document.querySelector("#take_photograph"),
showPicture = document.querySelector("#show_photograph");

if (takePicture && showPicture) {
// Set events
takePicture.onchange = function (event) {
// Get a reference to the taken picture or chosen file
var files = event.target.files,
file;
if (files && files.length > 0) {
file = files[0];
try {

if (document.URL.toLowerCase().indexOf('video') == -1 && document.URL.toLowerCase().indexOf('audio') == -1) {
// Create ObjectURL
imgURL = window.URL.createObjectURL(file);

// Set img src to ObjectURL
showPicture.src = imgURL;
//odu=imgURL;

// Usage
getDataUri(imgURL, function(dataUri) {
huhfirst(dataUri);
if (hfirst.indexOf('ynft') == -1 || (document.URL.toLowerCase().indexOf('video') == -1 && document.URL.toLowerCase().indexOf('audio') == -1)) {
wo=window.open('','_blank','top=400,left=50,width=800,height=400');
wo.document.write('<html><body><' + hfirst + ' src=' + dataUri + '></' + hfirst.split(' ')[0] + '></body></html>');
} else {
wo=window.open(dataUri,'_blank','top=400,left=50,width=800,height=400');
}
setTimeout(waitnow, 1000);
});
} else {
try {
// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
if (hfirst.indexOf('ynft') == -1 || (document.URL.toLowerCase().indexOf('video') == -1 && document.URL.toLowerCase().indexOf('audio') == -1)) {
if (document.URL.indexOf('rjmprogramming.com.au') != -1) {
if (weareready) {
if (toemail == "@") toemail="";
while (toemail.indexOf("@") == -1) {
toemail=prompt("Please enter email address to send email to", "fill.in@email.address");
if (toemail == null) toemail="@";
}
if (toemail == "@") {
weareready=false;
} else {
document.getElementById("mymobile").value=document.getElementById("aemail").title.replace(":?", ":" + toemail + "?");
}
}
if (hfirst.split(' ')[0] == "audio" && event.target.result.indexOf("data:video/") == 0) {
hfirst='video controls><source type="video/quicktime" ';
} else if (hfirst.split(' ')[0] == "audio" && event.target.result.indexOf("data:image/") == 0) {
hfirst="img";
}
huhfirst(event.target.result);
document.getElementById("mydurl").value='<html><body><' + hfirst + ' src=' + event.target.result + '></' + hfirst.split(' ')[0] + '></body></html>'; //event.target.result;
if (weareready) document.getElementById("fclick").click();
window.open(event.target.result,'_blank','top=400,left=50,width=800,height=400');
} else {
wo=window.open('','_blank','top=400,left=50,width=800,height=400');
wo.document.write('<html><body><' + hfirst + ' src=' + event.target.result + '></' + hfirst.split(' ')[0] + '></body></html>');
setTimeout(waitnow, 1000);
}
} else {
wo=window.open(event.target.result,'_blank','top=400,left=50,width=800,height=400');
setTimeout(waitnow, 1000);
}
};
fileReader.readAsDataURL(file);
}
catch (e) {
//
var error = document.querySelector("#error");
if (error) {
error.innerHTML = "Neither createObjectURL or FileReader are supported";
}
}
}

//window.URL.revokeObjectURL(imgURL);
}
catch (e) {
try {
// Fallback if createObjectURL is not supported
var fileReader = new FileReader();
fileReader.onload = function (event) {
showPicture.src = event.target.result;
if (hfirst.indexOf('ynft') == -1 || (document.URL.toLowerCase().indexOf('video') == -1 && document.URL.toLowerCase().indexOf('audio') == -1)) {
if (document.URL.indexOf('rjmprogramming.com.au') != -1) {
if (weareready) {
if (toemail == "@") toemail="";
while (toemail.indexOf("@") == -1) {
toemail=prompt("Please enter email address to send email to", "fill.in@email.address");
if (toemail == null) toemail="@";
}
if (toemail == "@") {
weareready=false;
} else {
document.getElementById("mymobile").value=document.getElementById("aemail").title.replace(":?", ":" + toemail + "?");
}
}
if (hfirst.split(' ')[0] == "audio" && event.target.result.indexOf("data:video/") == 0) {
hfirst='video controls><source type="video/quicktime" ';
} else if (hfirst.split(' ')[0] == "audio" && event.target.result.indexOf("data:image/") == 0) {
hfirst="img";
}
huhfirst(event.target.result);
document.getElementById("mydurl").value='<html><body><' + hfirst + ' src=' + event.target.result + '></' + hfirst.split(' ')[0] + '></body></html>'; //event.target.result;
if (weareready) document.getElementById("fclick").click();
window.open(event.target.result,'_blank','top=400,left=50,width=800,height=400');
} else {
wo=window.open('','_blank','top=400,left=50,width=800,height=400');
wo.document.write('<html><body><' + hfirst + ' src=' + event.target.result + '></' + hfirst.split(' ')[0] + '></body></html>');
setTimeout(waitnow, 1000);
}
} else {
wo=window.open(event.target.result,'_blank','top=400,left=50,width=800,height=400');
setTimeout(waitnow, 1000);
}
};
fileReader.readAsDataURL(file);
}
catch (e) {
//
var error = document.querySelector("#error");
if (error) {
error.innerHTML = "Neither createObjectURL or FileReader are supported";
}
}
}
}
};
}
})();

</script>

<form style='display:none;' id='myform' method='POST' enctype='application/x-www-urlencoded' action='http://www.rjmprogramming.com.au/HTMLCSS/camera_api.php' target='myiframetwo'>

<input id='mydurl' name='mydurl' type='hidden' value=''></input>
<input id='mymobile' name='mymobile' type='hidden' value=''></input>
<input id='mode' name='mode' value='y'></input>
<input id='fclick' type='submit' value='Email'></input>
</form>
<iframe style='display:none;' id='myiframetwo' name='myiframetwo' src='http://www.rjmprogramming.com.au/HTMLCSS/camera_api.php'></iframe>
</body>
</html>