Spaces:
Sleeping
Sleeping
| <body> | |
| <h1 id="demo"></h1> | |
| <div> | |
| <img id="img16" class="refr" style="width:100;display:none;" src="getresource?r=atualli.png" > | |
| <canvas title = "teste" | |
| id="cvc16" class="refrc" alt="" style="width:100%" onclick="imgRedirect('zoom?n=1&m=1&p00')"></canvas> | |
| </div> | |
| <script async"> | |
| var resx = 1000; | |
| var resy = 1000; | |
| var to = 1; // 2; //3; | |
| var first = 0; | |
| var idx = 0; | |
| var tamFila = 0; | |
| var myFila = 0; | |
| var onlyView = 0; | |
| var lastDate = new Date(); | |
| var dataXhttp = []; | |
| var slot = 0; | |
| gogo(); | |
| function _arrayBufferToBase64( bytes ) { | |
| var binary = ''; | |
| var len = bytes.byteLength; | |
| // for (var i = 0; i < len; i++) { | |
| // binary += String.fromCharCode( bytes[ i ] ); | |
| // } | |
| var block= 65535; | |
| var start = 0; | |
| do { | |
| var end = start+block; | |
| if (end>=len) end=len; | |
| var sub = bytes.slice(start, end) | |
| binary += String.fromCharCode.apply(null,sub); | |
| start+=block; | |
| if(start>=len) break; | |
| }while(1); | |
| return window.btoa( binary ); | |
| } | |
| function binaryToDataURL(inputArray){ | |
| let TYPED_ARRAY = new Uint8Array(inputArray); | |
| let base64String = _arrayBufferToBase64(TYPED_ARRAY); | |
| var uri = 'data:image/jpeg;base64,' + base64String; | |
| return uri; | |
| } | |
| var canvasx=480; | |
| var canvasy=240; | |
| var canvasvx=720; | |
| var canvasvy=480; | |
| var fps=120; | |
| var ext= ".jpeg"; | |
| var urlBase = '<?URL?>' | |
| async function playframe(img,blob) | |
| { | |
| const ArrayBuffer = await blob.arrayBuffer(); | |
| const src = binaryToDataURL(ArrayBuffer); | |
| img.src = src; | |
| img.onload = function () { | |
| var ids = this.id; | |
| var cam = "cvc" + ids.substring(3, 5); | |
| var c = document.getElementById(cam); | |
| var ctx = c.getContext("2d"); | |
| var resx = canvasvx; //this.width | |
| var resy = canvasvy; //this.height; | |
| c.setAttribute('width', resx); | |
| c.setAttribute('height', resy); | |
| ctx.drawImage(this, 0, 0, resx, resy); | |
| }; | |
| /* | |
| // const ArrayBuffer = await blob.arrayBuffer(); | |
| // let TYPED_ARRAY = new Uint8Array(ArrayBuffer); | |
| var fileReader = new FileReader(); | |
| fileReader.onload = function(event) { | |
| ArrayBuffer = event.target.result; | |
| let TYPED_ARRAY = new Uint8Array(ArrayBuffer); | |
| // let TYPED_ARRAY = new Uint16Array(ArrayBuffer); | |
| var ids = img.id; | |
| var cam = "cvc" + ids.substring(3, 5); | |
| var c = document.getElementById(cam); | |
| var ctx = c.getContext("2d"); | |
| var resx = canvasx; | |
| var resy = canvasy; | |
| c.setAttribute('width', resx); | |
| c.setAttribute('height', resy); | |
| const imageData = ctx.createImageData(resx, resy); | |
| // Iterate through every pixel | |
| let j=0; | |
| for (let i = 0; i < imageData.data.length; i += 4) { | |
| // Modify pixel data | |
| imageData.data[i + 0] = TYPED_ARRAY[j + 2]; // R value | |
| imageData.data[i + 1] = TYPED_ARRAY[j + 1]; // G value | |
| imageData.data[i + 2] = TYPED_ARRAY[j + 0]; // B value | |
| imageData.data[i + 3] = 255; // A value | |
| j+=3; | |
| } | |
| ctx.putImageData(imageData, 0, 0); | |
| } | |
| fileReader.readAsArrayBuffer(blob); | |
| */ | |
| } | |
| async function playstream(img) | |
| { | |
| img.setAttribute("data-completed", 0); | |
| var cam = img.id.substring(3, 5); | |
| var newurl = "http://atualli.ddns.net:8188/getcamera?" + "c=" + cam + "&resx=" + canvasx + "&resy=" + canvasy + "&fps=" + fps + "&ext=" + ext;; | |
| let wnewurl = newurl.replace("http","ws"); | |
| // wnewurl = wnewurl.replace("getcamera","stream"); | |
| wnewurl = wnewurl.replace("getcamera","getstream"); | |
| // wnewurl = wnewurl.replace("getcamera","getfullmosaico"); | |
| var ws = new WebSocket(wnewurl); | |
| ws.onopen = function () { | |
| console.log("Message to send"); | |
| img.setAttribute("data-completed", 0); | |
| }; | |
| ws.onmessage = function (evt) { | |
| /* var impl = function (img, blob) | |
| { | |
| playframe(img,blob); | |
| } | |
| impl(img,evt.data); */ | |
| playframe(img,evt.data); | |
| }; | |
| ws.onclose = function () { | |
| // websocket is closed. | |
| console.log("Connection is closed..."); | |
| img.setAttribute("data-completed", -1); | |
| }; | |
| } | |
| function gogo() { | |
| var pix = document.getElementsByClassName('refr'); | |
| for (var i = 0; i < pix.length; i++) { | |
| var img = pix[i]; | |
| if (!img.hasAttribute("data-completed") || img.getAttribute("data-completed")<0) | |
| { | |
| playstream(img); | |
| } | |
| } | |
| setTimeout(gogo, 5000); | |
| } | |
| </script> | |
| </body> | |