-
Notifications
You must be signed in to change notification settings - Fork 0
/
mdcam.html
69 lines (61 loc) · 1.62 KB
/
mdcam.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html>
<head>
<style>
body, div {
margin: 0;
padding: 0;
background-color:black;
}
div {
height: 100vh;
}
</style>
<script>
// taken insperation from https://github.com/rctoris/mjpegcanvasjs
MJPEGCANVAS = function(options) {
var that = this;
options = options || {};
var divID = options.divID;
this.width = options.width;
this.height = options.height;
this.refreshRate = options.refreshRate || 60;
this.interval = options.interval || 60;
this.url = options.url || '/webcam/?action=stream';
this.image = new Image();
this.image.src = this.url;
this.canvas = document.createElement('canvas');
this.canvas.width = this.width;
this.canvas.height = this.height;
this.canvas.style.background = '#aaaaaa';
this.canvas.style.width = '100%';
this.canvas.style.height = '100%';
document.getElementById(divID).appendChild(this.canvas);
var context = this.canvas.getContext('2d');
var drawInterval = Math.max(1 / this.refreshRate * 1000, this.interval);
function draw() {
that.canvas.width = that.canvas.width;
if (that.image.width * that.image.height > 0) {
context.drawImage(that.image, 0, 0, that.width, that.height);
}
// silly firefox...
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
var aux = that.image.src.split('?killcache=');
that.image.src = aux[0] + '?killcache=' + Math.random(42);
}
}
setInterval(draw, drawInterval);
};
function init() {
var canvas = new MJPEGCANVAS({
divID : 'mjpeg',
width : 1920,
height : 1080
});
}
</script>
</head>
<body onload="init()">
<div id="mjpeg"></div>
</body>
</html>