<!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="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) +
' <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);
</script>
<br><div id=speed></div>
</body>
</html>