mjpeg-streamer-template-lite/webcam.js at master · stephanr/mjpeg-streamer-template-lite · GitHub

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
/*jslint browser: true, sloppy: true */
/*global $ */

var rotation = 0, flipped = 0, mirrored = 0;

function applyCssTransform() {
	var img, off, css;
	css = "";
	off = 0;

	if (rotation === 90 || rotation === 270) {
		off = Math.ceil(Math.abs(img.width() - img.height()) / 2);
	}
	if (rotation > 0) {
		css += " rotate(" + rotation + "deg)";
	}
	if (flipped && mirrored) {
		css += " scale(-1,-1)";
	} else if (flipped) {
		css += " scaleY(-1)";
	} else if (mirrored) {
		css += " scaleX(-1)";
	}

	img = $('#streamimage');

	// apply position styles
	img.css("margin-top", off + 'px');
	img.css("margin-bottom", off + 'px');
	img.css("left", '-' + off + 'px');
	// apply transformation styles
	img.css("-moz-transform", css);
	img.css("-webkit-transform", css);
	//img.css("transform", css);
}

function fmtDateNum(val) {
	return (val < 10) ? '0' + val : val;
}

$(document).ready(function () {
	// reload cookie state
	var fromcookie = 0;
	if( Cookies.get('mirrored') === '1' ){
		mirrored = 1;
		fromcookie = 1;
	}
	if( Cookies.get('flipped') === '1' ){
		flipped = 1;
		fromcookie = 1;
	}
	switch (Cookies.get('rotation')){
		case '90':
			rotation = 90;
			fromcookie = 1;
			break;
		case '180':
			rotation = 180;
			fromcookie = 1;
			break;
		case '270':
			rotation = 270;
			fromcookie = 1;
			break;
	}
	if ( fromcookie === 1 ) {
		applyCssTransform();
	}

	// assing button functions
	$('#rotate').click(function () {
		rotation = (rotation + 90) % 360;
		switch (rotation){
			case 90:
				Cookies.set('rotation', '90');
				break;
			case 180:
				Cookies.set('rotation', '180');
				break;
			case 270:
				Cookies.set('rotation', '270');
				break;
		}
		applyCssTransform();
	});
	$('#mirror').click(function () {
		mirrored = !mirrored;
		Cookies.set('mirrored', mirrored ? '1' : '0' );
		applyCssTransform();
	});
	$('#flip').click(function () {
		flipped = !flipped;
		Cookies.set('flipped', flipped ? '1' : '0' );
		applyCssTransform();
	});
	$('#refresh').click(function () {
		var url;
		url = "/?action=snapshot&timestamp=" + new Date().getTime();
		$("#streamimage").attr("src", url);
	});
	$('#streamimage.static').load(function () {
		var d = new Date(), txt;
		txt = d.getDate() + '.';
		txt += fmtDateNum(d.getMonth() + 1) + '.';
		txt += d.getFullYear() + ' ';
		txt += fmtDateNum(d.getHours()) + ':';
		txt += fmtDateNum(d.getMinutes()) + ':';
		txt += fmtDateNum(d.getSeconds());
		$("#streamwrap #loaded").html(txt);
	});
});