-
Notifications
You must be signed in to change notification settings - Fork 84
/
index-canvas.html
112 lines (101 loc) · 3.44 KB
/
index-canvas.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
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
112
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
select {
display: block;
}
#container > div {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container"></div>
<button id="add">+</button>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io();
socket.on('start', function(cou) {
var container = document.getElementById('container');
document.getElementById('add').onclick = function() {
var divSocket
, div = document.createElement('div')
;
var html = '<select><option value="/">select cam</option>';
for (var i = 0; i < cou; i++) {
html += '<option value="/cam' + i + '">Cam ' + i + '</option>';
}
html += '</select>';
html += "<canvas width='500' height='500'>";
div.innerHTML = html;
var canvas = div.getElementsByTagName('canvas')[0], select = div.getElementsByTagName('select')[0];
select.onchange = function() {
if (divSocket) {
divSocket.disconnect();
}
if (this.value === '/') {
return;
}
console.log(this.value);
divSocket = io(location.origin + this.value);
divSocket.on('data', function(data) {
var bytes = new Uint8Array(data);
var blob = new Blob([bytes], {type: 'application/octet-binary'});
var url = URL.createObjectURL(blob);
var img = new Image;
var ctx = canvas.getContext("2d");
img.onload = function() {
URL.revokeObjectURL(url);
ctx.drawImage(img,100,100);
};
img.src = url;
//image.src = 'data:image/jpeg;base64,' + base64ArrayBuffer(bytes);
});
};
container.appendChild(div);
};
});
function base64ArrayBuffer(arrayBuffer) {
var base64 = '';
var encodings = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var bytes = new Uint8Array(arrayBuffer);
var byteLength = bytes.byteLength;
var byteRemainder = byteLength % 3;
var mainLength = byteLength - byteRemainder;
var a, b, c, d;
var chunk;
// Main loop deals with bytes in chunks of 3
for (var i = 0; i < mainLength; i = i + 3) {
// Combine the three bytes into a single integer
chunk = (bytes[i] << 16) | (bytes[i + 1] << 8) | bytes[i + 2];
// Use bitmasks to extract 6-bit segments from the triplet
a = (chunk & 16515072) >> 18; // 16515072 = (2^6 - 1) << 18
b = (chunk & 258048) >> 12; // 258048 = (2^6 - 1) << 12
c = (chunk & 4032) >> 6; // 4032 = (2^6 - 1) << 6
d = chunk & 63; // 63 = 2^6 - 1
// Convert the raw binary segments to the appropriate ASCII encoding
base64 += encodings[a] + encodings[b] + encodings[c] + encodings[d];
}
// Deal with the remaining bytes and padding
if (byteRemainder == 1) {
chunk = bytes[mainLength];
a = (chunk & 252) >> 2; // 252 = (2^6 - 1) << 2
// Set the 4 least significant bits to zero
b = (chunk & 3) << 4; // 3 = 2^2 - 1
base64 += encodings[a] + encodings[b] + '==';
} else if (byteRemainder == 2) {
chunk = (bytes[mainLength] << 8) | bytes[mainLength + 1];
a = (chunk & 64512) >> 10; // 64512 = (2^6 - 1) << 10
b = (chunk & 1008) >> 4; // 1008 = (2^6 - 1) << 4
// Set the 2 least significant bits to zero
c = (chunk & 15) << 2; // 15 = 2^4 - 1
base64 += encodings[a] + encodings[b] + encodings[c] + '=';
}
return base64;
}
</script>
</body>
</html>