70,76c70,76
< divcih("<div id='container'>" + String.fromCharCode(32) + 
< "<" + vtag + " autoplay='true' id='videoElement'" + vcapture + "></" + vtag + ">" + String.fromCharCode(32) + 
< "<table><tr><td><canvas id='canvasElement' ontouchdown='bsnapshot();' onmousedown='bsnapshot();'></canvas></td><td><canvas id='zoom' width=" + vtwoh + " height=" + vtwoh + "></canvas></td></tr></table>" + String.fromCharCode(32) + 
< "	<button id='grey' style='margin-top:40px;'>Toggle Greyness</button> <button id='invert'>Toggle Colour Inversion</button> <br><button onclick=andand(); id=bbgradual>Transform</button> Enable image smoothing: <input type='checkbox' id='smoothbtn'></input><br>" + String.fromCharCode(32) + 
< " Auto Flip New Items: <input onchange='always_horizontally_flip=this.checked;' type='checkbox' id='autoflip'></input> Flop: <input onchange='always_horizontally_flop=this.checked;' type='checkbox' id='autoflop'></input> Rotation (degrees): <input style='width:80px;' type=number onblur='rotis=this.value;' onchange='rotis=this.value;' min='-360' max='360' value='0' step='1'></input> <div id='colour'>Canvas Colour</div><br>" + String.fromCharCode(32) + 
< "<" + "!" + "-" + "-span><button id='email' title='Have ready a Copy of your Webcam via relevant Right Click or Two Finger Gesture'>Email</button> <input title='Have ready a Copy of your Webcam via relevant Right Click or Two Finger Gesture' type='text' id='emailee' value=''></input></span-" + "-" + ">" + String.fromCharCode(32) + 
< "</div>") + String.fromCharCode(10) + 
---
> divcih("<div id='container'>" + String.fromCharCode(10) + 
> "<" + vtag + " autoplay='true' id='videoElement'" + vcapture + "></" + vtag + ">" + String.fromCharCode(10) + 
> "<table><tr><td><canvas id='canvasElement'></canvas></td><td><canvas id='zoom' width=" + vtwoh + " height=" + vtwoh + "></canvas></td></tr></table>" + String.fromCharCode(10) + 
> "	<button id='grey' style='margin-top:40px;'>Toggle Greyness</button> <button id='invert'>Toggle Colour Inversion</button> Enable image smoothing: <input type='checkbox' id='smoothbtn'></input><br>" + String.fromCharCode(10) + 
> " Auto Flip New Items: <input onchange='always_horizontally_flip=this.checked;' type='checkbox' id='autoflip'></input> Flop: <input onchange='always_horizontally_flop=this.checked;' type='checkbox' id='autoflop'></input> Rotation (degrees): <input style='width:80px;' type=number onblur='rotis=this.value;' onchange='rotis=this.value;' min='-360' max='360' value='0' step='1'></input> <div id='colour'>Canvas Colour</div><br>" + String.fromCharCode(10) + 
> "<" + "!" + "-" + "-span><button id='email' title='Have ready a Copy of your Webcam via relevant Right Click or Two Finger Gesture'>Email</button> <input title='Have ready a Copy of your Webcam via relevant Right Click or Two Finger Gesture' type='text' id='emailee' value=''></input></span-" + "-" + ">" + String.fromCharCode(10) + 
> "</div>" + String.fromCharCode(10)) + 
79c79
< " var rotis=0, ssed=false, zzed=false, always_horizontally_flip=false, cb, ci, ca, always_horizontally_flop=false;" + String.fromCharCode(10) + 
---
> " var rotis=0, always_horizontally_flip=false, always_horizontally_flop=false;" + String.fromCharCode(10) + 
82,89d81
< " var conbdata;" + String.fromCharCode(10) + 
< " var conidata;" + String.fromCharCode(10) + 
< " var conideltadata=[];" + String.fromCharCode(10) + 
< " var conideltadatanum=62;" + String.fromCharCode(10) + 
< " var conadata;" + String.fromCharCode(10) + 
< " var conb=null;" + String.fromCharCode(10) + 
< " var coni=null;" + String.fromCharCode(10) + 
< " var cona=null;" + String.fromCharCode(10) + 
91,116c83,97
< " v.addEventListener('canplay', function(e) {" + String.fromCharCode(10) +
< " if (!isStreaming) { " + String.fromCharCode(10) +
< " /" + "/ videoWidth is not always set correctly in all browsers " + String.fromCharCode(10) +
< " if (v.videoWidth > 0) h = v.videoHeight / (v.videoWidth / w); " + String.fromCharCode(10) +
< " c.setAttribute('width', w); " + String.fromCharCode(10) +
< " c.setAttribute('height', h); " + String.fromCharCode(10) +
< " cb.setAttribute('width', w); " + String.fromCharCode(10) +
< " cb.setAttribute('height', h); " + String.fromCharCode(10) +
< " ci.setAttribute('width', w); " + String.fromCharCode(10) +
< " ci.setAttribute('height', h); " + String.fromCharCode(10) +
< " ca.setAttribute('width', w); " + String.fromCharCode(10) +
< " ca.setAttribute('height', h); " + String.fromCharCode(10) +
< " /" + "/ Reverse the canvas image " + String.fromCharCode(10) +
< " con.translate(w, 0); " + String.fromCharCode(10) +
< " con.scale(-1, 1); " + String.fromCharCode(10) +
< " isStreaming = true; " + String.fromCharCode(10) +
< "          } " + String.fromCharCode(10) +
< " }, false); " + String.fromCharCode(10) +
< "" + String.fromCharCode(10) + 
< " function dImage(img, x, y, width, height, deg, flip, flop, center) { " + String.fromCharCode(10) + 
< " /" + "/ thanks to http:/" + "/stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5 " + String.fromCharCode(10) + 
< " con.save(); " + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< " if (typeof width === 'undefined') width = img.width; " + String.fromCharCode(10) + 
< " if (typeof height === 'undefined') height = img.height; " + String.fromCharCode(10) + 
< " if (typeof center === 'undefined') center = false; " + String.fromCharCode(10) + 
---
> " v.addEventListener('canplay', function(e) {" + String.fromCharCode(10) + 
> " if (!isStreaming) {" + String.fromCharCode(10) + 
> " /" + "/ videoWidth isn't always set correctly in all browsers" + String.fromCharCode(10) + 
> " if (v.videoWidth > 0) h = v.videoHeight / (v.videoWidth / w);" + String.fromCharCode(10) + 
> " c.setAttribute('width', w);" + String.fromCharCode(10) + 
> " c.setAttribute('height', h);" + String.fromCharCode(10) + 
> " /" + "/ Reverse the canvas image" + String.fromCharCode(10) + 
> " con.translate(w, 0);" + String.fromCharCode(10) + 
> " con.scale(-1, 1);" + String.fromCharCode(10) + 
> " isStreaming = true;" + String.fromCharCode(10) + 
> "	   }" + String.fromCharCode(10) + 
> " }, false);" + String.fromCharCode(10) + 
> "" + String.fromCharCode(10) + 
> " function dImage(img, x, y, width, height, deg, flip, flop, center) { /" + "/ thanks to http://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5" + String.fromCharCode(10) + 
> " con.save();" + String.fromCharCode(10) + 
118c99,103
< " /" + "/ Set rotation point to center of image, instead of top left " + String.fromCharCode(10) + 
---
> " if (typeof width === 'undefined') width = img.width;" + String.fromCharCode(10) + 
> " if (typeof height === 'undefined') height = img.height;" + String.fromCharCode(10) + 
> " if (typeof center === 'undefined') center = false;" + String.fromCharCode(10) + 
> "" + String.fromCharCode(10) + 
> "/" + "/ Set rotation point to center of image, instead of top/left" + String.fromCharCode(10) + 
125c110
< " /" + "/ Set the origin to the center of the image" + String.fromCharCode(10) + 
---
> "/" + "/ Set the origin to the center of the image" + String.fromCharCode(10) + 
128,129c113,114
< " /" + "/ Rotate the canvas around the origin" + String.fromCharCode(10) + 
< " var rad = eval('-' + deg); rad*=Math.PI;  rad/=180; rad+=Math.PI;  rad+=Math.PI; " + String.fromCharCode(10) + 
---
> "/" + "/ Rotate the canvas around the origin" + String.fromCharCode(10) + 
> " var rad = 2 * Math.PI - deg * Math.PI / 180; " + String.fromCharCode(10) + 
132c117
< " /" + "/ Flip/flop the canvas" + String.fromCharCode(10) + 
---
> "/" + "/ Flip/flop the canvas" + String.fromCharCode(10) + 
147c132
< " /" + "/ Draw the image    " + String.fromCharCode(10) + 
---
> "/" + "/ Draw the image    " + String.fromCharCode(10) + 
165,166c150,151
< "	      if (greyscale) { if (eval('' + conideltadatanum) > 61 && ssed) { conideltadatanum = 0;  } goingGrey(); }" + String.fromCharCode(10) + 
< "	      if (invertit) { if (eval('' + conideltadatanum) > 61) { conideltadatanum = 0;  } invert(); }" + String.fromCharCode(10) + 
---
> "	      if (greyscale) goingGrey();" + String.fromCharCode(10) + 
> "	      if (invertit) invert();" + String.fromCharCode(10) + 
176,178d160
< "	   var spredata = conb.getImageData(0, 0, w, h); " + String.fromCharCode(10) + 
< "	   var predata = spredata.data;" + String.fromCharCode(10) + 
< "      if (ssed && conideltadatanum == 0) { conideltadata=[]; } " + String.fromCharCode(10) +  
182d163
< "         if (ssed && conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i]) - eval('' + predata[i]))); } " + String.fromCharCode(10) + 
184d164
< "         if (ssed && conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 1]) - eval('' + predata[i + 1]))); } " + String.fromCharCode(10) + 
186,187d165
< "         if (ssed && conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 2]) - eval('' + predata[i + 2]))); } " + String.fromCharCode(10) + 
< "         if (ssed && conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 3]) - eval('' + predata[i + 3]))); } " + String.fromCharCode(10) + 
189,195c167
< "      conbdata=imageData; " + String.fromCharCode(10) + 
< "	   con.putImageData(imageData, 0, 0); " + String.fromCharCode(10) + 
< "      document.getElementById('gradual').style.visibility='visible'; " + String.fromCharCode(10) +  
< "	   if (ssed) {  cona.putImageData(imageData, 0, 0);    } else { conb.putImageData(imageData, 0, 0); } " + String.fromCharCode(10) + 
< "       if (ssed && conideltadatanum == 0) { " + String.fromCharCode(10) + 
< "       coni.putImageData(spredata, 0, 0); " + String.fromCharCode(10) + 
< "       conideltadatanum=1;  conideltadatado(); } " + String.fromCharCode(10) + 
---
> "	   con.putImageData(imageData, 0, 0);" + String.fromCharCode(10) + 
200,201d171
< "	   var spredata = ''; if (conb) { spredata = conb.getImageData(0, 0, w, h); } else if (conideltadatanum == 0) { conideltadatanum=62;  } " + String.fromCharCode(10) + 
< "      if (conideltadatanum == 0) { conideltadata=[]; } " + String.fromCharCode(10) +  
203d172
< "	   var predata = spredata.data;" + String.fromCharCode(10) + 
206d174
< "         if (conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i]) - eval('' + predata[i]))); } " + String.fromCharCode(10) + 
208d175
< "         if (conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 1]) - eval('' + predata[i + 1]))); } " + String.fromCharCode(10) + 
210,211d176
< "         if (conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 2]) - eval('' + predata[i + 2]))); } " + String.fromCharCode(10) + 
< "         if (conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 3]) - eval('' + predata[i + 3]))); } " + String.fromCharCode(10) + 
213,221c178
< "  if (!zzed && conideltadatanum == 0) { zzed=true; if (1 == 6) {  alert(conideltadata[eval(Math.floor(data.length / 2))]);  } } " + String.fromCharCode(10) + 
< "       conadata=imageData; " + String.fromCharCode(10) + 
< "       con.putImageData(imageData, 0, 0); " + String.fromCharCode(10) + 
< "       document.getElementById('gradual').style.visibility='visible'; " + String.fromCharCode(10) +  
< "       cona.putImageData(imageData, 0, 0); " + String.fromCharCode(10) + 
< "       if (conideltadatanum == 0) { " + String.fromCharCode(10) + 
< "       coni.putImageData(spredata, 0, 0); " + String.fromCharCode(10) + 
< "       document.getElementById('dgradual').innerHTML='<progress min=0 max=60 value=0 id=pgradual></progress>'; " + String.fromCharCode(10) + 
< "       conideltadatanum=1;  conideltadatado(); } " + String.fromCharCode(10) + 
---
> "       con.putImageData(imageData, 0, 0);" + String.fromCharCode(10) + 
232d188
< "         if (1 == 7) { bsnapshot(); } " + String.fromCharCode(10) +  
237c193
< "var colour = document.getElementById('colour'); " + String.fromCharCode(10) + 
---
> "var colour = document.getElementById('colour');" + String.fromCharCode(10) + 
353c309
< "    } catch (error) { video.src = window.URL.createObjectURL(stream); }" + String.fromCharCode(10) + 
---
> "    } catch (error) { video.src = window.URL.createObjectURL(stream); video.play(); }" + String.fromCharCode(10) + 
381,428d336
< " function andc() { " + String.fromCharCode(10) + 
< " cb = document.getElementById('canvasElementb');  " + String.fromCharCode(10) + 
< " ci = document.getElementById('canvasElementi');  " + String.fromCharCode(10) + 
< " ca = document.getElementById('canvasElementa'); " + String.fromCharCode(10) + 
< " cb.setAttribute('width', w);" + String.fromCharCode(10) + 
< " cb.setAttribute('height', h);" + String.fromCharCode(10) + 
< " ci.setAttribute('width', w);" + String.fromCharCode(10) + 
< " ci.setAttribute('height', h);" + String.fromCharCode(10) + 
< " ca.setAttribute('width', w);" + String.fromCharCode(10) + 
< " ca.setAttribute('height', h);" + String.fromCharCode(10) + 
< " conb = cb.getContext('2d');" + String.fromCharCode(10) + 
< " console.log(3); coni = ci.getContext('2d'); if (coni) { console.log(33); } " + String.fromCharCode(10) + 
< " cona = ca.getContext('2d');" + String.fromCharCode(10) + 
< " }  " + String.fromCharCode(10) + 
< "function conideltadatado() { " + String.fromCharCode(10) + 
< "       document.getElementById('pgradual').value='' + conideltadatanum; " + String.fromCharCode(10) + 
< "       conideltadatanum++; " + String.fromCharCode(10) + 
< "	    var imageData = coni.getImageData(0, 0, w, h);" + String.fromCharCode(10) + 
< "	    var bimageData = conb.getImageData(0, 0, w, h);" + String.fromCharCode(10) + 
< "    var bdata = bimageData.data;" + String.fromCharCode(10) + 
< "	if (1 == 1) {    var data = imageData.data;" + String.fromCharCode(10) + 
< "       for (var i = 0; i < data.length; i += 4) {" + String.fromCharCode(10) + 
< "         data[i]     = eval(bdata[i] + Math.round(eval(eval('' + conideltadata[i]) / 60) * eval(-1 + conideltadatanum)));     /" + "/ red" + String.fromCharCode(10) + 
< "         data[i + 1]     = eval(bdata[i + 1] + Math.round(eval(eval('' + conideltadata[i + 1]) / 60) * eval(-1 + conideltadatanum)));     /" + "/ green" + String.fromCharCode(10) + 
< "         data[i + 2]     = eval(bdata[i + 2] + Math.round(eval(eval('' + conideltadata[i + 2]) / 60) * eval(-1 + conideltadatanum)));     /" + "/ blue" + String.fromCharCode(10) + 
< "       } " + String.fromCharCode(10) + 
< "       coni.putImageData(imageData, 0, 0); }  " + String.fromCharCode(10) + 
< "       coni.save();   " + String.fromCharCode(10) + 
< "       if (conideltadatanum <= 61) { setTimeout(conideltadatado,1000); } else { alert('Done'); } " + String.fromCharCode(10) + 
< "}  " + String.fromCharCode(10) + 
< "function andand() { " + String.fromCharCode(10) + 
< "  setTimeout(andgrey, 1000); " + String.fromCharCode(10) + 
< "  setTimeout(andinvert, 3000); " + String.fromCharCode(10) + 
< "} " + String.fromCharCode(10) + 
< "function andgrey() { " + String.fromCharCode(10) + 
< " document.getElementById('grey').click(); " + String.fromCharCode(10) + 
< "} " + String.fromCharCode(10) + 
< "function andinvert() { " + String.fromCharCode(10) + 
< " document.getElementById('invert').click(); " + String.fromCharCode(10) + 
< "} " + String.fromCharCode(10) + 
< "function bsnapshot() { " + String.fromCharCode(10) + 
< "      ssed=true; " + String.fromCharCode(10) +  
< "	   var imageData = con.getImageData(0, 0, w, h); " + String.fromCharCode(10) + 
< "      conbdata=imageData; " + String.fromCharCode(10) + 
< "      document.getElementById('gradual').style.visibility='visible'; " + String.fromCharCode(10) +  
< "	   conb.putImageData(imageData, 0, 0);" + String.fromCharCode(10) + 
< "} " + String.fromCharCode(10) + 
< " setTimeout(andc,200); " + String.fromCharCode(10) + 
431d338
<  //console.log(cont);
434,435c341
< <br><div id=speed></div><br><br><br><br><br><br><br><br>
< <table id=gradual style='visibility:hidden;width:100%;' border=5><tr><th style='text-align:right;'>From -&gt; <th><div id=dgradual><input onclick="document.getElementById('grey').click(); document.getElementById('invert').click();"  type=button id=bgradual value='Colour Transform'></input></div></th><th style='text-align:left;'> &lt;- To<th></tr><tr><td><canvas id='canvasElementb'></canvas></td><td><canvas id='canvasElementi'></canvas></td><td><canvas id='canvasElementa'></canvas></td></tr></table>
---
> <br><div id=speed></div>
437c343
< </html>
---
> </html>
\ No newline at end of file