4a5,6
> <meta content="stuff, to, help, search, engines, not" name="keywords">
> <meta content="What this page is about." name="description">
20,27d21
< #controls {
<      border: 1px solid pink;
<      background-color: #f0f0f0;
< }
< #viz {
<      border: 1px solid yellow;
<      background-color: #e0e0e0;
< }
31c25
< }
---
> 	}
36,302c30,257
< <script type='text/javascript'>
< var vtrue=location.search.split('novideo=')[1] ? ('false' + location.search.split('novideo=')[1].split('&')[0]).substring(0,5) : 'true'; 
< var atrue=location.search.split('noaudio=')[1] ? ('false' + location.search.split('noaudio=')[1].split('&')[0]).substring(0,5) : 'true'; 
< var vtag="video", vtype='mp4', vext='m4v', bselected='', vcapture="", aselected='', vfn='handleVideo', vtwoh='200', vcw='600', vch='420', prengum='',prebits='';
< if (vtrue != 'true') {
<   //vtag='audio';
<   vcapture=''; //' capture';
<   //vtype='ma4';
<   //vext='m4a';
<   vfn='handleAudio';
<   vtwoh='1';
<   vcw='1';
<   vch='1';
<   aselected=' selected';
<   prengum='window.AudioContext = window.AudioContext || window.webkitAudioContext; ' + String.fromCharCode(10) + 
<   '  var context = new AudioContext(); ' + String.fromCharCode(10);
<   prebits="<scr" + "ipt src='js/audiodisplay.js'></sc" + "ript><sc" + "ript src='js/recorderjs/recorder.js'></scr" + "ipt><scr" + "ipt src='js/main.js'></scr" + "ipt>" + String.fromCharCode(10) + 
< '	<div id="controls"> ' + String.fromCharCode(10) + 
< '		<br><img id="record" title="Record" src="http://www.rjmprogramming.com.au/MarkItUp/mp.png" onclick="toggleRecording(this); this.border=' + "'' + itog + 'px solid red'; this.title=this.title.replace('Stop r','~').replace('R','Stop r').replace('~','R'); itog=eval(1 - itog);" + '"> ' + String.fromCharCode(10) + 
< '		&nbsp;&nbsp;<a id="save" title="Save" href="#"><img id="isave" src="http://www.rjmprogramming.com.au/MarkItUp/happy.png"></a> ' + String.fromCharCode(10) + 
< '	</div> ' + String.fromCharCode(10) + 
< '  <div id="viz"> ' + String.fromCharCode(10) + 
< '		<canvas id="analyser" width="100%" height="150"></canvas><br><canvas id="wavedisplay" width="100%" height="150"></canvas><br> ' + String.fromCharCode(10) + 
< '	</div> ' + String.fromCharCode(10);
< } else if (atrue != 'true') {
<   bselected=' selected';
< }
< function divcih(proposed) {
<   if (vtrue != 'true') return '';
<   return proposed;
< }
< var cont="" + String.fromCharCode(10) + 
< "<h1>Display <select id='vamode' onchange=\" if (this.value.trim().length > 0) { location.href=document.URL.split('#')[0].split('?')[0] + '?' + this.value + '=' + this.value; } \"><option value='all'>Webcam and Microphone Audio/Video</option><option value='noaudio'" + bselected + ">Webcam Video</option><option value='novideo'" + aselected + ">Microphone Audio</option></select> Stream <span id='sosad'></span><h1>" + String.fromCharCode(10) + 
< prebits + "<h3>Thanks to <a target=_blank title='https:/" + "/www.kirupa.com/html5/accessing_your_webcam_in_html5.htm' href='https:/" + "/www.kirupa.com/html5/accessing_your_webcam_in_html5.htm'>www.kirupa.com</a> and <a target=_blank title='https:/" + "/software.intel.com/en-us/html5/hub/blogs/using-the-getusermedia-api-with-the-html5-video-and-canvas-elements' href='https:/" + "/software.intel.com/en-us/html5/hub/blogs/using-the-getusermedia-api-with-the-html5-video-and-canvas-elements'>software.intel.com</a> and <a target=_blank href='https:/" + "/developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas' title='https:/" + "/developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas'>developer.mozilla.org</a> and <a target=_blank href='http:/" + "/stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5' title='http:/" + "/stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5'>stackoverflow.com</a> and <a target=_blank href='https:/" + "/www.html5rocks.com/en/tutorials/getusermedia/intro/' title='https:/" + "/www.html5rocks.com/en/tutorials/getusermedia/intro/'>html5rocks.com</a> and <a target=_blank title='Matt Diamond and RecorderJS' href='https://github.com/mattdiamond/Recorderjs'>Matt Diamond's RecorderJS</a> <br>RJM Programming - July, 2017  <span id='errmsg'></span></h3>" + 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'>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)) + 
< "<br><br><br><br><br><br><scr" + "ipt type='text/javascript'>" + String.fromCharCode(10) + 
< " var itog=1, xx=-1, yy=-1, ww=1, hh=1;" + String.fromCharCode(10) + 
< " var rotis=0, always_horizontally_flip=false, always_horizontally_flop=false;" + String.fromCharCode(10) + 
< " var isStreaming = false,v = document.getElementById('videoElement'),c = document.getElementById('canvasElement'),grey = document.getElementById('grey'), invert = document.getElementById('invert');" + String.fromCharCode(10) + 
< " var con = c.getContext('2d');" + String.fromCharCode(10) + 
< " var w = " + vcw + ",h = " + vch + ",invertit = false,greyscale = 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) + 
< "" + 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) + 
< "" + String.fromCharCode(10) + 
< " if (center) {" + String.fromCharCode(10) + 
< " x -= width/2;" + String.fromCharCode(10) + 
< " y -= height/2;" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "/" + "/ Set the origin to the center of the image" + String.fromCharCode(10) + 
< " con.translate(x + width/2, y + height/2);" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "/" + "/ Rotate the canvas around the origin" + String.fromCharCode(10) + 
< " var rad = 2 * Math.PI - deg * Math.PI / 180; " + String.fromCharCode(10) + 
< "   con.rotate(rad);" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "/" + "/ Flip/flop the canvas" + String.fromCharCode(10) + 
< " if (flip) {" + String.fromCharCode(10) + 
< " flipScale = -1;" + String.fromCharCode(10) + 
< " } else {" + String.fromCharCode(10) + 
< "  flipScale = 1;" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "if (flop) {" + String.fromCharCode(10) + 
< "  flopScale = -1; " + String.fromCharCode(10) + 
< "  /" + "/document.title='flopping out';" + String.fromCharCode(10) + 
< "} else {" + String.fromCharCode(10) + 
< "  flopScale = 1;" + String.fromCharCode(10) + 
< "  /" + "/document.title='flopping in';" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "con.scale(flipScale, flopScale);" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "/" + "/ Draw the image    " + String.fromCharCode(10) + 
< "con.drawImage(img, -width/2, -height/2, width, height);" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "con.restore();" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "v.addEventListener('play', function() {" + String.fromCharCode(10) + 
< "	   /" + "/ Every 33 milliseconds copy the video image to the canvas" + String.fromCharCode(10) + 
< "       /" + "/video.style.visibility = 'hidden';" + String.fromCharCode(10) + 
< "	   setInterval(function() {" + String.fromCharCode(10) + 
< "	      if (v.paused || v.ended) return;" + String.fromCharCode(10) + 
< "	      con.fillRect(0, 0, w, h);" + String.fromCharCode(10) + 
< "	      if (always_horizontally_flip || rotis != 0 ||  always_horizontally_flop) {" + String.fromCharCode(10) + 
< "	      dImage(v, 0, 0, w, h, rotis, always_horizontally_flip, always_horizontally_flop); " + String.fromCharCode(10) + 
< "	      } else {" + String.fromCharCode(10) + 
< "	      con.drawImage(v, 0, 0, w, h);" + String.fromCharCode(10) + 
< "	      }" + String.fromCharCode(10) + 
< "	      pixelValue();" + String.fromCharCode(10) + 
< "	      if (greyscale) goingGrey();" + String.fromCharCode(10) + 
< "	      if (invertit) invert();" + String.fromCharCode(10) + 
< "	   }, 33);" + String.fromCharCode(10) + 
< "	}, false);" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "grey.addEventListener('click', function() { greyscale = !greyscale; }, false);" + String.fromCharCode(10) + 
< "invert.addEventListener('click', function() { invertit = !invertit; }, false);" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "	var goingGrey = function() {" + String.fromCharCode(10) + 
< "	   var imageData = con.getImageData(0, 0, w, h);" + String.fromCharCode(10) + 
< "	   var data = imageData.data;" + String.fromCharCode(10) + 
< "	   for (var i = 0; i < data.length; i += 4) {" + String.fromCharCode(10) + 
< "	      var bright = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];" + String.fromCharCode(10) + 
< "	      data[i] = bright;" + String.fromCharCode(10) + 
< "	      data[i + 1] = bright;" + String.fromCharCode(10) + 
< "	      data[i + 2] = bright;" + String.fromCharCode(10) + 
< "	   }" + String.fromCharCode(10) + 
< "	   con.putImageData(imageData, 0, 0);" + String.fromCharCode(10) + 
< "	}	 " + String.fromCharCode(10) + 
< "	 " + String.fromCharCode(10) + 
< "  var invert = function() {" + String.fromCharCode(10) + 
< "	   var imageData = con.getImageData(0, 0, w, h);" + String.fromCharCode(10) + 
< "	   var data = imageData.data;" + String.fromCharCode(10) + 
< "       for (var i = 0; i < data.length; i += 4) {" + String.fromCharCode(10) + 
< "         data[i]     = 255 - data[i];     /" + "/ red" + String.fromCharCode(10) + 
< "         data[i + 1] = 255 - data[i + 1]; /" + "/ green" + String.fromCharCode(10) + 
< "         data[i + 2] = 255 - data[i + 2]; /" + "/ blue" + String.fromCharCode(10) + 
< "       }" + String.fromCharCode(10) + 
< "       con.putImageData(imageData, 0, 0);" + String.fromCharCode(10) + 
< "  };" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "	var pixelValue = function() {" + String.fromCharCode(10) + 
< "	   if (xx >= 0 && yy >= 0) {" + String.fromCharCode(10) + 
< "         var xpixel = con.getImageData(xx, yy, ww, hh);" + String.fromCharCode(10) + 
< "         var xdata = xpixel.data;" + String.fromCharCode(10) + 
< "         var xrgba = 'rgba(' + xdata[0] + ', ' + xdata[1] +" + String.fromCharCode(10) + 
< "             ', ' + xdata[2] + ', ' + (xdata[3] / 255) + ')';" + String.fromCharCode(10) + 
< "         colour.style.background =  xrgba;" + String.fromCharCode(10) + 
< "         colour.innerHTML = 'Canvas Colour ' + xrgba;" + String.fromCharCode(10) + 
< "       }" + String.fromCharCode(10) + 
< "	}	  " + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "var colour = document.getElementById('colour');" + String.fromCharCode(10) + 
< "function pick(event) {" + String.fromCharCode(10) + 
< "  var x = event.layerX;" + String.fromCharCode(10) + 
< "  var y = event.layerY;" + String.fromCharCode(10) + 
< "  xx=x;" + String.fromCharCode(10) + 
< "  yy=y;" + String.fromCharCode(10) + 
< "  var pixel = con.getImageData(x, y, 1, 1);" + String.fromCharCode(10) + 
< "  var data = pixel.data;" + String.fromCharCode(10) + 
< "  var rgba = 'rgba(' + data[0] + ', ' + data[1] +" + String.fromCharCode(10) + 
< "             ', ' + data[2] + ', ' + (data[3] / 255) + ')';" + String.fromCharCode(10) + 
< "  colour.style.background =  rgba;" + String.fromCharCode(10) + 
< "  colour.textContent = 'Canvas Colour ' + rgba;" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "  var zoomctx = document.getElementById('zoom').getContext('2d');" + String.fromCharCode(10) + 
< " " + String.fromCharCode(10) + 
< "  var smoothbtn = document.getElementById('smoothbtn');" + String.fromCharCode(10) + 
< "  smoothbtn.addEventListener('onchange', function() { toggleSmoothing(); }, false);" + String.fromCharCode(10) + 
< "  " + String.fromCharCode(10) + 
< "  var toggleSmoothing = function(event) {" + String.fromCharCode(10) + 
< "    zoomctx.imageSmoothingEnabled = this.checked;" + String.fromCharCode(10) + 
< "    zoomctx.mozImageSmoothingEnabled = this.checked;" + String.fromCharCode(10) + 
< "    zoomctx.webkitImageSmoothingEnabled = this.checked;" + String.fromCharCode(10) + 
< "    zoomctx.msImageSmoothingEnabled = this.checked;" + String.fromCharCode(10) + 
< "  };" + String.fromCharCode(10) + 
< "  smoothbtn.addEventListener('change', toggleSmoothing);" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "  var zoom = function(event) {" + String.fromCharCode(10) + 
< "    var x = event.layerX;" + String.fromCharCode(10) + 
< "    var y = event.layerY;" + String.fromCharCode(10) + 
< "    xx=x;" + String.fromCharCode(10) + 
< "    yy=y;" + String.fromCharCode(10) + 
< "    zoomctx.drawImage(c," + String.fromCharCode(10) + 
< "                      Math.abs(x - 5)," + String.fromCharCode(10) + 
< "                      Math.abs(y - 5)," + String.fromCharCode(10) + 
< "                      10, 10," + String.fromCharCode(10) + 
< "                      0, 0," + String.fromCharCode(10) + 
< "                      200, 200);" + String.fromCharCode(10) + 
< "  };" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "  c.addEventListener('mousemove', zoom);" + String.fromCharCode(10) + 
< "	  " + String.fromCharCode(10) + 
< "var video = document.querySelector('#videoElement'), varp='navigator.mediaDevices.getUserMedia';" + String.fromCharCode(10) + 
< " " + prengum + String.fromCharCode(10) + 
< "setTimeout(invertclick,1000); " + String.fromCharCode(10) + 
< " " + String.fromCharCode(10) + 
< "navigator.mediaDevices.getUserMedia =  navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia || navigator.mediaDevices.msGetUserMedia || navigator.mediaDevices.oGetUserMedia;" + String.fromCharCode(10) + 
< "if (navigator.mediaDevices.getUserMedia) {       " + String.fromCharCode(10) + 
< "navigator.mediaDevices.getUserMedia({video: " + vtrue + ", audio: " + atrue + "}).then(function(mediaStream) { " + vfn + "(mediaStream); }).catch(function(err) { videoError(err); }); /" + "/ always check for errors at the end." + String.fromCharCode(10) + 
< "} else {" + String.fromCharCode(10) + 
< "navigator.getUserMedia =  navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;" + String.fromCharCode(10) + 
< " " + String.fromCharCode(10) + 
< "if (navigator.getUserMedia) {       " + String.fromCharCode(10) + 
< "    navigator.getUserMedia({video: " + vtrue + ", audio: " + atrue + "}, " + vfn + ", videoError);" + String.fromCharCode(10) + 
< "} else {" + String.fromCharCode(10) + 
< "    video.type = '" + vtag + "/" + vtype + "';" + String.fromCharCode(10) + 
< "    video.loop = true;" + String.fromCharCode(10) + 
< "    video.autoplay = true;" + String.fromCharCode(10) + 
< "    video.controls = true;" + String.fromCharCode(10) + 
< "    video.src = 'webcamtest." + vext + "';" + String.fromCharCode(10) + 
< "    video.style.visibility = 'visible';" + String.fromCharCode(10) + 
< "    document.getElementById('errmsg').innerHTML = 'So sad, cannot work the ({video: " + vtrue + ", audio: " + atrue + "}).then(function(mediaStream) { " + vfn + "(mediaStream); }).catch(function(err) { videoError(err); }) Javascript call we require.  But you can see the blog posting video on a loop (well, it worked in <a onclick=putOnSpeed(); style=text-decoration:underline;cursor:pointer;>Speed</a>) that for best viewing should be <a style=text-decoration:underline;cursor:pointer; onclick=document.getElementById(' + String.fromCharCode(39) + 'autoflip' + String.fromCharCode(39) + ').click();>flipped</a>.';" + String.fromCharCode(10) + 
< "    document.getElementById('sosad').innerHTML = ' (would have been nice ... but ...)';" + String.fromCharCode(10) + 
< "    setTimeout(andno,4000);" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "function andno() {" + String.fromCharCode(10) + 
< "    video.style.visibility = 'hidden';" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< " " + String.fromCharCode(10) + 
< "function invertclick() {" + String.fromCharCode(10) + 
< "  if (!invertit) {" + String.fromCharCode(10) + 
< "    document.getElementById('invert').click();" + String.fromCharCode(10) + 
< "    setTimeout(invertclick, 1500);" + String.fromCharCode(10) + 
< "  } else {" + String.fromCharCode(10) + 
< "    document.getElementById('invert').click();" + String.fromCharCode(10) + 
< "  }" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "  " + String.fromCharCode(10) + 
< "function handleVideo(stream) {" + String.fromCharCode(10) + 
< "    video.src = window.URL.createObjectURL(stream);" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "function posthandleAudio() { /" + "/ thanks to https:/" + "/developer.mozilla.org/en-US/docs/Web/API/MediaRecorder and https:/" + "/github.com/mdn/web-dictaphone/" + String.fromCharCode(10) + 
< "  document.getElementById('container').innerHTML=''; document.getElementById('container').style.display='none'; setTimeout(posthandleAudio,2000); " + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "function handleAudio(stream) { /" + "/ thanks to https:/" + "/developer.mozilla.org/en-US/docs/Web/API/MediaRecorder and https:/" + "/github.com/mdn/web-dictaphone/" + String.fromCharCode(10) + 
< " document.getElementById('container').innerHTML=''; document.getElementById('container').style.display='none'; setTimeout(posthandleAudio,2000); " + String.fromCharCode(10) + 
< " if (1 == 6) { var microphone = context.createMediaStreamSource(stream);" + String.fromCharCode(10) + 
< "   var filter = context.createBiquadFilter();" + String.fromCharCode(10) + 
< "  /" + "/ microphone -> filter -> destination." + String.fromCharCode(10) + 
< "   microphone.connect(filter);" + String.fromCharCode(10) + 
< "   filter.connect(context.destination); } " + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "function videoError(e) {" + String.fromCharCode(10) + 
< "    if (document.getElementById('record')) { document.getElementById('record').style.display='none'; document.getElementById('isave').style.display='none'; } " + String.fromCharCode(10) +  
< "    document.getElementById('errmsg').innerHTML = 'So sad, cannot work the ({video: " + vtrue + ", audio: " + atrue + "}).then(function(mediaStream) { " + vfn + "(mediaStream); }).catch(function(err) { videoError(err); }) Javascript call we require.  But you can see the blog posting video on a loop (well, it worked in <a onclick=putOnSpeed(); style=text-decoration:underline;cursor:pointer;>Speed</a>) that for best viewing should be <a style=text-decoration:underline;cursor:pointer; onclick=document.getElementById(' + String.fromCharCode(39) + 'autoflip' + String.fromCharCode(39) + ').click();>flipped</a>.';" + String.fromCharCode(10) + 
< "    document.getElementById('sosad').innerHTML = ' (would have been nice ... but ...)';" + String.fromCharCode(10) + 
< "    alert(e.message + ' ... Sorry, cannot work the ({video: " + vtrue + ", audio: " + atrue + "}).then(function(mediaStream) { " + vfn + "(mediaStream); }).catch(function(err) { videoError(err); }) Javascript call we require.');" + String.fromCharCode(10) + 
< "} " + String.fromCharCode(10) + 
< "" + String.fromCharCode(10) + 
< "function putOnSpeed() {" + String.fromCharCode(10) + 
< "  document.getElementById('speed').innerHTML = '<iframe src=https://www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=dB77R4Ro59o&youtube_duration=5681.041&email=&email=&emoji=on&c0=on&i0=4271&j0=4655&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29= style=height:800px;width:100%; id=ispeed></iframe>';" + String.fromCharCode(10) + 
< "  location.href='#speed';" + String.fromCharCode(10) + 
< "}" + String.fromCharCode(10) + 
< "</s" + "cript>" + String.fromCharCode(10) + 
< "";
<  document.write(cont);
---
> <h1>Display Webcam Stream <span id='sosad'></span><h1>
> <h3>Thanks to <a target=_blank title='https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm' href='https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm'>www.kirupa.com</a> and <a target=_blank title='https://software.intel.com/en-us/html5/hub/blogs/using-the-getusermedia-api-with-the-html5-video-and-canvas-elements' href='https://software.intel.com/en-us/html5/hub/blogs/using-the-getusermedia-api-with-the-html5-video-and-canvas-elements'>software.intel.com</a> and <a target=_blank href='https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas' title='https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas'>developer.mozilla.org</a> and <a target=_blank href='http://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5' title='http://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5'>stackoverflow.com</a> and <a target=_blank href='https://www.html5rocks.com/en/tutorials/getusermedia/intro/' title='https://www.html5rocks.com/en/tutorials/getusermedia/intro/'>html5rocks.com</a> - RJM Programming - April, 2017  <span id='errmsg'></span></h3>
> <div id="container">
>     <video autoplay='true' id='videoElement'></video>
> 	<table><tr><td><canvas id='canvasElement'></canvas></td><td><canvas id='zoom' width=200 height=200></canvas></td></tr></table>
> 	<button id='grey'>Toggle Greyness</button> <button id='invert'>Toggle Colour Inversion</button> Enable image smoothing: <input type='checkbox' id='smoothbtn'></input><br>
>  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>
> 	<!--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-->
> 	</div>
> 	
> <br><br><br><br><br><br><script>
> 
> var xx=-1, yy=-1, ww=1, hh=1; 
> var rotis=0, always_horizontally_flip=false, always_horizontally_flop=false;
> 
> var isStreaming = false,
> 	    v = document.getElementById('videoElement'),
> 	    c = document.getElementById('canvasElement'),
> 	    grey = document.getElementById('grey');
> 	    invert = document.getElementById('invert');
> 	    con = c.getContext('2d');
> 	    w = 600,
> 	    h = 420,
> 	    invertit = false,
> 	    greyscale = false;
> 	    
> v.addEventListener('canplay', function(e) {
> 	   if (!isStreaming) {
> 	      // videoWidth isn't always set correctly in all browsers
> 	      if (v.videoWidth > 0) h = v.videoHeight / (v.videoWidth / w);
> 	      c.setAttribute('width', w);
> 	      c.setAttribute('height', h);
> 	      // Reverse the canvas image
> 	      con.translate(w, 0);
> 	      con.scale(-1, 1);
> 	      isStreaming = true;
> 	   }
> 	}, false);	    
> 
> 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
> 
> con.save();
> 
> if (typeof width === "undefined") width = img.width;
> if (typeof height === "undefined") height = img.height;
> if (typeof center === "undefined") center = false;
> 
> // Set rotation point to center of image, instead of top/left
> if (center) {
>     x -= width/2;
>     y -= height/2;
> }
> 
> // Set the origin to the center of the image
> con.translate(x + width/2, y + height/2);
> 
> // Rotate the canvas around the origin
> var rad = 2 * Math.PI - deg * Math.PI / 180;    
> con.rotate(rad);
> 
> // Flip/flop the canvas
> if (flip) {
>   flipScale = -1; 
>   //document.title='flipping out';
> } else {
>   flipScale = 1;
> }
> if (flop) {
>   flopScale = -1; 
>   //document.title='flopping out';
> } else {
>   flopScale = 1;
>   //document.title='flopping in';
> }
> con.scale(flipScale, flopScale);
> 
> // Draw the image    
> con.drawImage(img, -width/2, -height/2, width, height);
> 
> con.restore();
> }
> 
> v.addEventListener('play', function() {
> 	   // Every 33 milliseconds copy the video image to the canvas
>        //video.style.visibility = 'hidden';
> 	   setInterval(function() {
> 	      if (v.paused || v.ended) return;
> 	      con.fillRect(0, 0, w, h);
> 	      if (always_horizontally_flip || rotis != 0 ||  always_horizontally_flop) {
> 	      dImage(v, 0, 0, w, h, rotis, always_horizontally_flip, always_horizontally_flop); 
> 	      } else {
> 	      con.drawImage(v, 0, 0, w, h);
> 	      }
> 	      pixelValue();
> 	      if (greyscale) goingGrey();
> 	      if (invertit) invert();
> 	   }, 33);
> 	}, false);
> 
> grey.addEventListener('click', function() { greyscale = !greyscale; }, false);
> invert.addEventListener('click', function() { invertit = !invertit; }, false);
> 
> 	var goingGrey = function() {
> 	   var imageData = con.getImageData(0, 0, w, h);
> 	   var data = imageData.data;
> 	   for (var i = 0; i < data.length; i += 4) {
> 	      var bright = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
> 	      data[i] = bright;
> 	      data[i + 1] = bright;
> 	      data[i + 2] = bright;
> 	   }
> 	   con.putImageData(imageData, 0, 0);
> 	}	 
> 	 
>   var invert = function() {
> 	   var imageData = con.getImageData(0, 0, w, h);
> 	   var data = imageData.data;
>        for (var i = 0; i < data.length; i += 4) {
>          data[i]     = 255 - data[i];     // red
>          data[i + 1] = 255 - data[i + 1]; // green
>          data[i + 2] = 255 - data[i + 2]; // blue
>        }
>        con.putImageData(imageData, 0, 0);
>   };
> 
> 	var pixelValue = function() {
> 	   if (xx >= 0 && yy >= 0) {
>   //document.title=xx + ' AND ' + yy;
>          var xpixel = con.getImageData(xx, yy, ww, hh);
>          var xdata = xpixel.data;
>          var xrgba = 'rgba(' + xdata[0] + ', ' + xdata[1] +
>              ', ' + xdata[2] + ', ' + (xdata[3] / 255) + ')';
>   //document.title=xrgba + ' ' + xx + ' AND ' + yy;
>          colour.style.background =  xrgba;
>          colour.innerHTML = 'Canvas Colour ' + xrgba;
>        }
> 	}	  
> 
> 
> var colour = document.getElementById('colour');
> function pick(event) {
>   var x = event.layerX;
>   var y = event.layerY;
>   xx=x;
>   yy=y;
>   //document.title=x + ' and ' + y;
>   var pixel = con.getImageData(x, y, 1, 1);
>   var data = pixel.data;
>   var rgba = 'rgba(' + data[0] + ', ' + data[1] +
>              ', ' + data[2] + ', ' + (data[3] / 255) + ')';
>   colour.style.background =  rgba;
>   colour.textContent = 'Canvas Colour ' + rgba;
> }
> //c.addEventListener('mousemove', pick);
>   var zoomctx = document.getElementById('zoom').getContext('2d');
>  
>   var smoothbtn = document.getElementById('smoothbtn');
>   smoothbtn.addEventListener('onchange', function() { toggleSmoothing(); }, false);
>   
>   var toggleSmoothing = function(event) {
>     zoomctx.imageSmoothingEnabled = this.checked;
>     zoomctx.mozImageSmoothingEnabled = this.checked;
>     zoomctx.webkitImageSmoothingEnabled = this.checked;
>     zoomctx.msImageSmoothingEnabled = this.checked;
>   };
>   smoothbtn.addEventListener('change', toggleSmoothing);
> 
>   var zoom = function(event) {
>     var x = event.layerX;
>     var y = event.layerY;
>     xx=x;
>     yy=y;
>     zoomctx.drawImage(c,
>                       Math.abs(x - 5),
>                       Math.abs(y - 5),
>                       10, 10,
>                       0, 0,
>                       200, 200);
>   };
> 
>   c.addEventListener('mousemove', zoom);
> 	  
> var video = document.querySelector("#videoElement");
>  
> navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
>  
> setTimeout(invertclick,1000); 
>  
> if (navigator.getUserMedia) {       
>     navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError);
> } else {
>     video.type = "video/mp4";
>     video.loop = true;
>     video.autoplay = true;
>     video.controls = true;
>     video.src = 'webcamtest.m4v';
>     video.style.visibility = 'visible';
>     document.getElementById('errmsg').innerHTML = "So sad, cannot work the 'navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError)' Javascript call we require.  But you can see the blog posting's video on a loop (well, it worked in <a onclick=putOnSpeed(); style=text-decoration:underline;cursor:pointer;>Speed</a>) that for best viewing should be <a style=text-decoration:underline;cursor:pointer; onclick=document.getElementById('autoflip').click();>flipped</a>.";
>     document.getElementById('sosad').innerHTML = " (would have been nice ... but ...)";
>     setTimeout(andno,4000);
> }
> 
> function andno() {
>     video.style.visibility = 'hidden';
> }
>  
> function invertclick() {
>   if (!invertit) {
>     document.getElementById('invert').click();
>     setTimeout(invertclick, 1500);
>   } else {
>     document.getElementById('invert').click();
>   }
> }
>   
> function handleVideo(stream) {
>     video.src = window.URL.createObjectURL(stream);
> }
> 
> function videoError(e) {
>     // do something
>     alert("Sorry, cannot work the 'navigator.getUserMedia({video: true, audio: true}, handleVideo, videoError)' Javascript call we require.");
> } 
> 
> function putOnSpeed() {
>   document.getElementById('speed').innerHTML = '<iframe src="https://www.rjmprogramming.com.au/HTMLCSS/karaoke_youtube_api.htm?youtubeid=dB77R4Ro59o&youtube_duration=5681.041&email=&email=&emoji=on&c0=on&i0=4271&j0=4655&i1=&j1=&i2=&j2=&i3=&j3=&i4=&j4=&i5=&j5=&i6=&j6=&i7=&j7=&i8=&j8=&i9=&j9=&i10=&j10=&i11=&j11=&i12=&j12=&i13=&j13=&i14=&j14=&i15=&j15=&i16=&j16=&i17=&j17=&i18=&j18=&i19=&j19=&i20=&j20=&i21=&j21=&i22=&j22=&i23=&j23=&i24=&j24=&i25=&j25=&i26=&j26=&i27=&j27=&i28=&j28=&i29=&j29=" style=height:800px;width:100%; id=ispeed></iframe>';
>   location.href='#speed';
> }