<!DOCTYPE html>
<html>
<head>
<title>Video Masking via Canvas - RJM Programming - Thanks to https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas</title>
<style>
body {
background: black;
color:#CCCCCC;
}
#c2 {
background-color: #3B3B3B;
background-repeat: no-repeat;
}
div {
float: left;
border :1px solid #444444;
padding:10px;
margin: 10px;
background:#3B3B3B;
}
</style>

<script type='text/javascript'>
var extras=(location.search.split('extras=')[1] ? decodeURIComponent(location.search.split('extras=')[1].split('&')[0]) : '');
var nocamera=false;
var novideo=false;
var done=false;


var ourmimetype='';
var types = ["video/mp4","image/svg","audio/wav","audio/x-wav","audio/x-pn-realaudio","audio/x-mpegurl","audio/x-aiff","audio/mpeg","audio/mid",
"audio/basic","audio/ogg","video/x-sgi-movie","video/x-msvideo","video/quicktime","audio/mp3","video/mp4","video/mpeg",
"video/x-la-asf","video/ogg","video/webm","audio/mp4", "image/jpeg", "image/jpeg", "image/png", "image/gif", "image/bmp", "image/tif",
"text/html", "text/html", "text/html", "text/javascript", "text/css", "text/plain", "text/xml", "text/csv",
"application/vnd.ms-word", "application/vnd.openxmlformats-officedocument.wordprocessingml.document", "application/x-php", "application/pdf",
"application/vnd.openxmlformats-officedocument.presentationml.presentation", "application/vnd.ms-powerpoint",
"application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"];
var exts = [".mp4",".svg",".wav",".wav",".ram",".m3u",".aiff",".mp3",".rmi",
".snd",".ogg",".movie",".avi",".mov",".mp3",".m4v",".mpeg",
".lsx",".ogv",".webm",".m4a", ".jpg", ".jpeg", ".png", ".gif", ".bmp", ".tif",
".htm", ".html", ".htmls", ".js", ".css", ".txt", ".xml", ".csv",
".doc", ".docx", ".php", ".pdf",
".pptx", ".ppt",
".xls", ".xlsx"];


var c2suffix="", c2suffixv="";
var xalp="0123456789abcdef";
var ln=0, fnames=[""], kk=0;
var bn=0;
var wsuff="";
var wcol="#927566";
var uprefix="video.mp4";
var usuff="";
var usuffix=location.search.split('video=')[1] ? decodeURIComponent(location.search.split('video=')[1]).split('&')[0] : "";
if (usuffix != "") {
uprefix="";
usuff="&video=" + encodeURIComponent(usuffix);
}
var omr=location.search.split('mr=')[1] ? decodeURIComponent(location.search.split('mr=')[1]).split('&')[0] : "";
if (omr != '') { setTimeout(andlater,900); wsuff=wsuff.replace('&mr=','&mXr=') + '&mr=' + omr; ln=eval(eval('' + omr) % 16); bn=eval(eval(eval('' + omr) - ln) / 16); wcol=wcol.replace('92', ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2)); }
var omg=location.search.split('mg=')[1] ? decodeURIComponent(location.search.split('mg=')[1]).split('&')[0] : "";
if (omg != '') { setTimeout(andlater,700); wsuff=wsuff.replace('&mg=','&mXg=') + '&mg=' + omg; ln=eval(eval('' + omg) % 16); bn=eval(eval(eval('' + omg) - ln) / 16); wcol=wcol.replace('7566', ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2) + '66'); }
var omb=location.search.split('mb=')[1] ? decodeURIComponent(location.search.split('mb=')[1]).split('&')[0] : "";
if (omb != '') { setTimeout(andlater,500); wsuff=wsuff.replace('&mb=','&mXb=') + '&mb=' + omb; ln=eval(eval('' + omb) % 16); bn=eval(eval(eval('' + omb) - ln) / 16); wcol=wcol.substring(0,5) + ('0' + xalp.substring(bn,eval(bn + 1)) + xalp.substring(ln,eval(ln + 1))).slice(-2); }
//alert(wcol);

function andlater() {
if (omr != '') { document.getElementById('mr').value=omr; }
if (omg != '') { document.getElementById('mg').value=omg; }
if (omb != '') { document.getElementById('mb').value=omb; }
}

function torgba(inc) {
var opa="1.0";
var i, j=0, csess="rgba(:::1.0)", alp="0123456789abcdef", factor=16;
for (i=0; i<=inc.replace('#','').length; i++) {
if (i == 1) {
csess=csess.replace('rgba(:','rgba(' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 3) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else if (i == 5) {
csess=csess.replace('::',':' + (j + alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1)))) + ':');
j=0;
} else {
j=j + (factor * alp.toLowerCase().indexOf(inc.toLowerCase().replace('#','').substring(i,(i + 1))));
}
csess = csess.replace(":1.0)",":" + opa + ")");
}
document.getElementById('mr').value=csess.split('(')[1].split(':')[0];
wsuff=wsuff.replace('&mr=','&mXr=') + '&mr=' + document.getElementById('mr').value;
document.getElementById('mg').value=csess.split('(')[1].split(':')[1];
wsuff=wsuff.replace('&mg=','&mXg=') + '&mg=' + document.getElementById('mg').value;
document.getElementById('mb').value=csess.split('(')[1].split(':')[2];
wsuff=wsuff.replace('&mb=','&mXb=') + '&mb=' + document.getElementById('mb').value;
if (document.URL.indexOf('?') == -1) {
location.href=document.URL + '?' + wsuff.substring(1);
} else if (document.URL.indexOf('mr=') != -1) {
location.href=document.URL.split('mr=')[0] + wsuff.substring(1);
} else {
location.href=document.URL + wsuff;
}
return csess.replace(/\:/g,',');
}

function fixdiv(ocb) {
if (document.getElementById('dimage').innerHTML.indexOf(' capture') != -1) {
nocamera=true;
document.getElementById('dimage').innerHTML='↗ <input style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple>';
} else {
nocamera=false;
document.getElementById('dimage').innerHTML='↗ <input style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple capture>';
}
}

function fixvdiv(ocb) {
if (document.getElementById('dvideo').innerHTML.indexOf(' capture') != -1) {
nocamera=true;
document.getElementById('dvideo').innerHTML='⬅ <input style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple>';
} else {
nocamera=false;
document.getElementById('dvideo').innerHTML='⬅ <input style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple capture>';
}
}

function doc2suffix() {
c2suffix="";
if (document.getElementById('xoff').value != '' || document.getElementById('yoff').value != '') {
c2suffix=" background-origin:";
if (document.getElementById('xoff').value != '') { if (document.getElementById('xoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('xoff').value + ' '; } else { c2suffix+=document.getElementById('xoff').value + 'px '; } }
if (document.getElementById('yoff').value != '') { if (document.getElementById('yoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('yoff').value; } else { c2suffix+=document.getElementById('yoff').value + 'px'; } }
}
if (('' + document.getElementById("c2").style.background) != '') {
if (c2suffix != '') {
document.getElementById("c2").style.backgroundPosition=c2suffix.split(':')[1];
} else {
document.getElementById("c2").style.backgroundPosition='';
}
}
}

function doc2suffixv() {
c2suffixv="";
if (document.getElementById('xoffv').value != '' || document.getElementById('yoffv').value != '') {
c2suffixv=" background-origin:";
if (document.getElementById('xoffv').value != '') { if (document.getElementById('xoffv').value.replace('%','px').indexOf('px') != -1) { c2suffixv+=document.getElementById('xoffv').value + ' '; } else { c2suffixv+=document.getElementById('xoffv').value + 'px '; } document.getElementById("video").style.marginLeft=c2suffixv.split(':')[1]; }
if (document.getElementById('yoffv').value != '') { if (document.getElementById('yoffv').value.replace('%','px').indexOf('px') != -1) { c2suffixv+=document.getElementById('yoffv').value; document.getElementById("video").style.marginTop=document.getElementById('yoffv').value; } else { c2suffixv+=document.getElementById('yoffv').value + 'px'; document.getElementById("video").style.marginTop=document.getElementById('yoffv').value + 'px'; } }
}
if (('' + document.getElementById("divv1").style.marginTop + document.getElementById("divv1").style.marginLeft) != '') {
if (c2suffixv != '') {
c2suffixv=c2suffixv;
} else {
document.getElementById("divv1").style.marginTop='0px';
document.getElementById("divv1").style.marginLeft='0px';
}
}
}

function drawBackOfCanvas(file) {
var reader = new FileReader();

reader.onload = function (e) {
var c2suffix="";
if (document.getElementById('xoff').value != '' || document.getElementById('yoff').value != '') {
c2suffix=" background-origin:";
if (document.getElementById('xoff').value != '') { if (document.getElementById('xoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('xoff').value + ' '; } else { c2suffix+=document.getElementById('xoff').value + 'px '; } }
if (document.getElementById('yoff').value != '') { if (document.getElementById('yoff').value.replace('%','px').indexOf('px') != -1) { c2suffix+=document.getElementById('yoff').value; } else { c2suffix+=document.getElementById('yoff').value + 'px'; } }
}
document.getElementById("c2").style.background="URL('" + e.target.result + "')";
if (c2suffix != '') {
document.getElementById("c2").style.backgroundPosition=c2suffix.split(':')[1];
} else {
document.getElementById("c2").style.backgroundPosition='';
}
};

reader.readAsDataURL(file);
}

function newVideo(file) {
var reader = new FileReader();

reader.onload = function (e) {
document.getElementById("video").src=e.target.result;
};

reader.readAsDataURL(file);
}


function onl(){

var input = document.getElementById('cimage'); // .querySelector('input[type=file]'); // .getElementById('cimage'); // see Example 4

input.onchange = function () {
var file = input.files; //[0];
//cfile = file;

done=false;
for (var ii=0; ii<file.length; ii++) {

if (kk == 0) {
fnames=[""];
fnames[0]=file[ii].name;
} else if (ii >= fnames.length) {
fnames.push(file[ii].name);
} else {
fnames[ii]=file[ii].name;
}

ourmimetype="";
for (var ji=0; ji<exts.length; ji++) {
if (("." + file[ii].name.split('.')[eval(-1 + file[ii].name.split('.').length)]).toLowerCase() == exts[ji].toLowerCase()) {
ourmimetype=types[ji];
}
}

if (ourmimetype.indexOf('image') != -1) { drawBackOfCanvas(file[ii]); }
kk++;
}
};

var vinput = document.getElementById('cvideo'); // .querySelector('input[type=file]'); // .getElementById('cimage'); // see Example 4

vinput.onchange = function () {
var vfile = vinput.files; //[0];
//cfile = vfile;

done=false;
for (var ii=0; ii<vfile.length; ii++) {

if (kk == 0) {
fnames=[""];
fnames[0]=vfile[ii].name;
} else if (ii >= fnames.length) {
fnames.push(vfile[ii].name);
} else {
fnames[ii]=vfile[ii].name;
}

ourmimetype="";
for (var ji=0; ji<exts.length; ji++) {
if (("." + vfile[ii].name.split('.')[eval(-1 + vfile[ii].name.split('.').length)]).toLowerCase() == exts[ji].toLowerCase()) {
ourmimetype=types[ji];
}
}

if (ourmimetype.indexOf('video') != -1) { newVideo(vfile[ii]); }
kk++;
}
};


}

function wup(incw) {
var wis=eval(('' + document.getElementById('video').style.width).replace('px',''));
wis+=incw;
document.getElementById('divv1').style.width='' + eval(20 + wis) + 'px';
document.getElementById('video').style.width='' + wis + 'px';
}

function hup(inch) {
var hisbr=document.getElementById('video').getBoundingClientRect();
var his=eval(('' + hisbr.height).replace('px','')); //eval(('' + document.getElementById('video').style.height).replace('px',''));
his+=inch;
//document.getElementById('divv1').style.height='' + his + 'px';
document.getElementById('video').style.height='' + his + 'px';
}

</script>


</head>

<body onload=setTimeout(onl,2000);>
<div>
<script type='text/javascript'>
document.write("<div id=divv1 style='display:inline-block;width:320px;overflow:scroll;-webkit-overflow-scrolling:touch;'><video style='width:300px;' id='video' src='" + (location.search.split('video=')[1] ? decodeURIComponent(location.search.split('video=')[1]) : (uprefix + usuffix)) + "' controls='true'/></div><div style=display:inline-block;><a onclick=wup(5); style=text-decoration:none;cursor:pointer;float:right;>++</a><br><a onclick=wup(1); style=text-decoration:none;cursor:pointer;float:right;>+</a><br><a onclick=wup(-1); style=text-decoration:none;cursor:pointer;float:right;>-</a><br><br><br><br><a onclick=hup(5); style=text-decoration:none;cursor:pointer;float:right;>++</a><br><a onclick=hup(1); style=text-decoration:none;cursor:pointer;float:right;>+</a><br><a onclick=hup(-1); style=text-decoration:none;cursor:pointer;float:right;>-</a><br></div>");
</script>
</div>
<div>
<div id=divc1 style='display:inline-block;width:120px;overflow:scroll;-webkit-overflow-scrolling:touch;'><canvas id="c1" width="120" height="192"></canvas></div>
<script type='text/javascript'>
document.write("<div id=divc2 style='display:inline-block;width:120px;overflow:scroll;-webkit-overflow-scrolling:touch;'><canvas style='background" + (location.search.split('bcol=')[1] ? ('-image:' + decodeURIComponent(location.search.split('bcol=')[1].split('&')[0])).replace('-image:#','-color:#') : '-color:#3B3B3B') + ";' id='c2' width='120' height='192'></canvas></div>");
document.write(" <input data-onblur=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent(this.value) + usuff; \" onchange=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent(this.value) + usuff;\" type=color value='" + (location.search.split('bcol=')[1] ? (decodeURIComponent(location.search.split('bcol=')[1].split('&')[0]) + '#').split('#')[1].replace('RelativeImageURL)','#3B3B3B') : '#3B3B3B') + "' id='mycolour' title='Canvas Background Colour'></input><br><input style=width:90%; id=myrurl placeholder='../images/flowers.png#RelativeImageURL' value='' onclick=\"this.value=this.placeholder;\" onblur=\"location.href=document.URL.split('?')[0] + '?bcol=' + encodeURIComponent('URL(' + this.value + ')') + usuff; \"></input><br><input type=text id=myvurl placeholder=\"video.mp4#RelativeVideoURL\" style=\"width:90%;\" value=\"\" onclick=\"this.value=this.placeholder;\" onblur=\"if (this.value != '') { usuff='&video=' + encodeURIComponent(this.value); document.getElementById('video').src=this.value; usuffix=this.value; }\"></input><br><input type=color id='mymcol' onchange=\"torgba(this.value);\" value='" + wcol + "' title='Video Mask Colour'></input>");
document.write("<input type=hidden value=" + (location.search.split('mr=')[1] ? decodeURIComponent(location.search.split('mr=')[1]) : '146') + " id=mr></input><input type=hidden value=" + (location.search.split('mg=')[1] ? decodeURIComponent(location.search.split('mg=')[1]) : '117') + " id=mg></input><input type=hidden value=" + (location.search.split('mb=')[1] ? decodeURIComponent(location.search.split('mb=')[1]) : '101') + " id=mb></input>  <select id=mode title='Video Manipulation Mode'><option value=0>⬅ See Through ↗</option><option value=1>Grayscale</option><option value=2>Invert</option></select><br>");
if (nocamera) {
document.write('<div id=dimage style=display:inline-block;>↗ <input style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple></div><input onchange=fixdiv(this); type=checkbox id=nocamera style=display:inline-block;>Camera</input><br><input onblur=doc2suffix(); type=text placeholder="X offset [0]" value="" id=xoff></input><input onblur=doc2suffix(); type=text placeholder="Y offset [0]" value="" id=yoff></input>');
} else {
document.write('<div id=dimage style=display:inline-block;>↗ <input style=display:inline-block; type=file name=image id=cimage accept=image/*' + extras + ' multiple capture></div><input checked=true onchange=fixdiv(this); type=checkbox id=nocamera style=display:inline-block;>Camera</input><br><input onblur=doc2suffix(); type=text placeholder="X offset [0]" value="" id=xoff></input><input onblur=doc2suffix(); type=text placeholder="Y offset [0]" value="" id=yoff></input><br><br>');
}
if (novideo) {
document.write('<div id=dvideo style=display:inline-block;>⬅ <input style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple></div><input onchange=fixvdiv(this); type=checkbox id=novideo style=display:inline-block;>Recorder</input><br><input onblur=doc2suffixv(); type=text placeholder="X offset [0]" value="" id=xoffv></input><input onblur=doc2suffixv(); type=text placeholder="Y offset [0]" value="" id=yoffv></input>');
} else {
document.write('<div id=dvideo style=display:inline-block;>⬅ <input style=display:inline-block; type=file name=video id=cvideo accept=video/*' + extras + ' multiple capture></div><input checked=true onchange=fixvdiv(this); type=checkbox id=novideo style=display:inline-block;>Recorder</input><br><input onblur=doc2suffixv(); type=text placeholder="X offset [0]" value="" id=xoffv></input><input onblur=doc2suffixv(); type=text placeholder="Y offset [0]" value="" id=yoffv></input>');
}
</script>
</div>

<input type=text style="position:absolute;top:-2000px;left:-2000px;" value=""></input>

<script type="text/javascript" src="processor.js"></script>
</body>
</html>