|
<!doctype html> |
|
<html> |
|
<head> |
|
<style> |
|
body, iframe { |
|
margin: 0; |
|
padding: 0; |
|
border: 0; |
|
height: 100%; |
|
overflow: hidden; |
|
} |
|
iframe { |
|
width: 100%; |
|
height: 100%; |
|
min-height: 1200px; |
|
position: absolute; |
|
} |
|
#output { |
|
position: absolute; |
|
overflow: scroll; |
|
bottom: 0; |
|
left: 0; |
|
right: 17px; |
|
z-index: 1; |
|
background-color: rgba(128,128,128,0.3); |
|
display: none; |
|
height: 490px; |
|
} |
|
|
|
#output img { |
|
margin: 5px; |
|
} |
|
</style> |
|
<script> |
|
(function() { |
|
var WIDTH = 640; // We will scale the photo WIDTH to this |
|
var HEIGHT = 480; // This will be computed based on the input stream |
|
|
|
var streaming = false; |
|
|
|
var video = null; |
|
var canvas = null; |
|
var photo = null; |
|
var output = null; |
|
var isvisible = false; |
|
|
|
function startup() { |
|
video = document.getElementById('video'); |
|
canvas = document.getElementById('canvas'); |
|
output = document.getElementById('output'); |
|
startbutton = document.getElementById('startbutton'); |
|
|
|
navigator.getMedia = ( navigator.getUserMedia || |
|
navigator.webkitGetUserMedia || |
|
navigator.mozGetUserMedia || |
|
navigator.msGetUserMedia); |
|
function startPlaying() { |
|
navigator.getMedia( |
|
{ |
|
video: true, |
|
audio: false |
|
}, |
|
function(stream) { |
|
if (navigator.mozGetUserMedia) { |
|
video.mozSrcObject = stream; |
|
} else { |
|
var vendorURL = window.URL || window.webkitURL; |
|
video.srcObject = stream; //vendorURL.createObjectURL(stream); |
|
} |
|
video.play(); |
|
}, |
|
function(err) { |
|
console.log("An error occured! " + err); |
|
} |
|
); |
|
} |
|
|
|
video.addEventListener('canplay', function(ev){ |
|
if (!streaming) { |
|
video.setAttribute('width', WIDTH); |
|
video.setAttribute('height', HEIGHT); |
|
canvas.setAttribute('width', WIDTH); |
|
canvas.setAttribute('height', HEIGHT); |
|
streaming = true; |
|
window.setTimeout(takepicture,1); |
|
} |
|
}, false); |
|
|
|
window.addEventListener('blur', function(ev){ |
|
startPlaying(); |
|
}, false); |
|
|
|
window.addEventListener('keypress', function(ev) { |
|
if (ev.key === '=') { |
|
if (isvisible = !isvisible) { |
|
// show the culprit! |
|
output.style.display = 'block'; |
|
} else{ |
|
output.style.display = 'none'; |
|
} |
|
} else if (ev.key === '/') { |
|
while (output.firstChild) { |
|
output.removeChild(output.firstChild); |
|
} |
|
} else if (ev.key === '*') { |
|
startPlaying(); |
|
} |
|
}); |
|
} |
|
|
|
function stopPlaying() { |
|
video.srcObject.getTracks()[0].stop(); |
|
streaming = false; |
|
} |
|
|
|
function takepicture() { |
|
console.log('takepicture'); |
|
canvas.width = WIDTH; |
|
canvas.height = HEIGHT; |
|
|
|
var context = canvas.getContext('2d'); |
|
context.drawImage(video, 0, 0, WIDTH, HEIGHT); |
|
// Turn off camera as soon as we have the picture, to keep the webcam warning light off |
|
stopPlaying(); |
|
|
|
// Draw timestamp |
|
context.fillStyle = "#80ff80"; |
|
context.shadowColor = "rgb(0, 0, 0)"; |
|
context.shadowOffsetX = 0; |
|
context.shadowOffsetY = 0; |
|
context.shadowBlur = 2; |
|
context.font = "20px Arial"; |
|
context.fillText(new Date(), 10, HEIGHT - 30); |
|
|
|
var data = canvas.toDataURL('image/png'); |
|
var screenshot = document.createElement('img'); |
|
screenshot.setAttribute('src', data); |
|
output.appendChild(screenshot); |
|
|
|
} |
|
|
|
// Set up our event listener to run the startup process |
|
// once loading is complete. |
|
window.addEventListener('load', startup, false); |
|
})(); |
|
</script> |
|
</head> |
|
|
|
<body> |
|
<!-- decoy document --> |
|
<iframe id='decoy' src='https://docs.python.org/3/library/configparser.html'></iframe> |
|
<!-- picture taking --> |
|
<div class="camera" style="display:none" > |
|
<video id="video">Video stream not available.</video> |
|
</div> |
|
<canvas style="display:none" id="canvas"> |
|
</canvas> |
|
<div id="output"> |
|
</div> |
|
</body> |
|
</html> |
