<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="Display Webcam Stream" name="title">
<title>Display Webcam Stream - Thanks to https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htm and https://software.intel.com/en-us/html5/hub/blogs/using-the-getusermedia-api-with-the-html5-video-and-canvas-elements and https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas</title>
<style>
#container {
margin: 0px auto;
width: 500px;
height: 375px;
border: 10px #333 solid;
}
#videoElement {
width: 500px;
height: 375px;
background-color: #666;
}
#controls {
border: 1px solid pink;
background-color: #f0f0f0;
}
#viz {
border: 1px solid yellow;
background-color: #e0e0e0;
}
video {
position:absolute;
visibility:hidden;
}
</style>
</head>
<body style='background-color:#f0f0f0;'>
<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="//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) +
' <a id="save" title="Save" href="#"><img id="isave" src="//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='/" + "/stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5' title='/" + "/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(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) +
"<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, ssed=false, zzed=false, always_horizontally_flip=false, cb, ci, ca, 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 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) +
" 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 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) +
"" + 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 = eval('-' + deg); rad*=Math.PI; rad/=180; rad+=Math.PI; rad+=Math.PI; " + 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) { if (eval('' + conideltadatanum) > 61 && ssed) { conideltadatanum = 0; } goingGrey(); }" + String.fromCharCode(10) +
" if (invertit) { if (eval('' + conideltadatanum) > 61) { conideltadatanum = 0; } 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) +
" 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) +
" 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) +
" if (ssed && conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i]) - eval('' + predata[i]))); } " + String.fromCharCode(10) +
" data[i + 1] = bright;" + String.fromCharCode(10) +
" if (ssed && conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 1]) - eval('' + predata[i + 1]))); } " + String.fromCharCode(10) +
" data[i + 2] = bright;" + String.fromCharCode(10) +
" 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) +
" }" + String.fromCharCode(10) +
" 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) +
" } " + String.fromCharCode(10) +
" " + String.fromCharCode(10) +
" var invert = function() {" + String.fromCharCode(10) +
" var imageData = con.getImageData(0, 0, w, h);" + String.fromCharCode(10) +
" 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) +
" var data = imageData.data;" + String.fromCharCode(10) +
" var predata = spredata.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) +
" if (conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i]) - eval('' + predata[i]))); } " + String.fromCharCode(10) +
" data[i + 1] = 255 - data[i + 1]; /" + "/ green" + String.fromCharCode(10) +
" if (conideltadatanum == 0) { conideltadata.push(eval(eval('' + data[i + 1]) - eval('' + predata[i + 1]))); } " + String.fromCharCode(10) +
" data[i + 2] = 255 - data[i + 2]; /" + "/ blue" + String.fromCharCode(10) +
" 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) +
" }" + String.fromCharCode(10) +
" 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) +
" };" + 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) +
" if (1 == 7) { bsnapshot(); } " + 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 = 0;;" + String.fromCharCode(10) +
" var y = 0;" + String.fromCharCode(10) +
" if (event.touches) {" + String.fromCharCode(10) +
" if (event.touches.length >= 1) {" + String.fromCharCode(10) +
" var touches = event.changedTouches;" + String.fromCharCode(10) +
" var first = touches[0];" + String.fromCharCode(10) +
" x = first.clientX;" + String.fromCharCode(10) +
" y = first.clientY;" + String.fromCharCode(10) +
" } else if (event.layerX) {" + String.fromCharCode(10) +
" x = event.layerX;" + String.fromCharCode(10) +
" y = event.layerY;" + String.fromCharCode(10) +
" } else if (event.clientX) {" + String.fromCharCode(10) +
" x = event.clientX;" + String.fromCharCode(10) +
" y = event.clientY;" + String.fromCharCode(10) +
" } else if (event.pageX) {" + String.fromCharCode(10) +
" x = event.pageX;" + String.fromCharCode(10) +
" y = event.pageY;" + String.fromCharCode(10) +
" }" + String.fromCharCode(10) +
" } else if (event.layerX) {" + String.fromCharCode(10) +
" x = event.layerX;" + String.fromCharCode(10) +
" y = event.layerY;" + String.fromCharCode(10) +
" } else if (event.clientX) {" + String.fromCharCode(10) +
" x = event.clientX;" + String.fromCharCode(10) +
" y = event.clientY;" + String.fromCharCode(10) +
" } else if (event.pageX) {" + String.fromCharCode(10) +
" x = event.pageX;" + String.fromCharCode(10) +
" y = event.pageY;" + String.fromCharCode(10) +
" }" + 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) +
" c.addEventListener('touchmove', zoom);" + String.fromCharCode(10) +
" " + String.fromCharCode(10) +
"var video = document.querySelector('#videoElement'), varp='navigator.mediaDevices.getUserMedia';" + String.fromCharCode(10) +
" video.setAttribute('autoplay', ''); " + String.fromCharCode(10) +
" video.setAttribute('muted', ''); " + String.fromCharCode(10) +
" video.setAttribute('playsinline', ''); " + 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) +
"/" + "/" + " navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.mediaDevices.webkitGetUserMedia || navigator.mediaDevices.mozGetUserMedia;" + String.fromCharCode(10) +
"/" + "/" + " navigator.mediaDevices.getUserMedia = navigator.mediaDevices.getUserMedia;" + String.fromCharCode(10) +
"if (navigator.mediaDevices.getUserMedia) { " + String.fromCharCode(10) +
" console.log('1'); 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) +
" console.log('11'); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;" + String.fromCharCode(10) +
" " + String.fromCharCode(10) +
"if (navigator.getUserMedia) { " + String.fromCharCode(10) +
" console.log('111'); navigator.getUserMedia({video: " + vtrue + ", audio: " + atrue + "}, " + vfn + ", videoError);" + String.fromCharCode(10) +
"} else {" + String.fromCharCode(10) +
" console.log('1111'); 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) +
" /" + "/" + " var binaryData = [];" + String.fromCharCode(10) +
" /" + "/" + " binaryData.push(stream);" + String.fromCharCode(10) +
" try { video.srcObject = stream; video.play(); " + String.fromCharCode(10) +
" } catch (error) { video.src = window.URL.createObjectURL(stream); }" + String.fromCharCode(10) +
" /" + "/" + " video.src = window.URL.createObjectURL(new Blob(binaryData, {type: 'video/mp4'}));" + 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.'); if (document.URL.indexOf('.html') == -1) { location.href=document.URL.replace('.htm','.html'); }" + 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) +
" 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) +
"</s" + "cript>" + String.fromCharCode(10) +
"";
//console.log(cont);
document.write(cont);
</script>
<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 -> <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;'> <- To<th></tr><tr><td><canvas id='canvasElementb'></canvas></td><td><canvas id='canvasElementi'></canvas></td><td><canvas id='canvasElementa'></canvas></td></tr></table>
</body>
</html>