Created
April 29, 2023 01:06
-
-
Save daddyYukio/518297a98af1a010b04a7893de29958c to your computer and use it in GitHub Desktop.
JPEG画像配信カメラのライブビューを表示する
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Multi Camera View for LiveCapture3</title> | |
| <style> | |
| body{ | |
| background-color: #808080; | |
| margin-left: 0px; | |
| margin-top: 0px; | |
| margin-right: 0px; | |
| margin-bottom: 0px; | |
| overflow-x: hidden; | |
| overflow-y: hidden; | |
| } | |
| </style> | |
| <script type="text/javascript"> | |
| //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ | |
| // 横に並べるカメラ映像の数 | |
| //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ | |
| const MAX_COL = 1 | |
| //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ | |
| // 縦に並べるカメラ映像の数 | |
| //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ | |
| const MAX_ROW = 1; | |
| //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ | |
| // 配信サーバのJPEGまでのURL | |
| //_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/ | |
| const ADDRESS_LIST = [ | |
| "http://192.168.1.24/capture.jpg" | |
| ]; | |
| function init() { | |
| expand(); | |
| draw(); | |
| } | |
| function draw() { | |
| var canvas = document.getElementById('c1'); | |
| var ctx = canvas.getContext('2d'); | |
| var canW = canvas.width; | |
| var canH = canvas.height; | |
| var pos = 0; | |
| for (var row = 0; row < MAX_ROW; row++){ | |
| for (var col = 0; col < MAX_COL; col++){ | |
| if (pos < ADDRESS_LIST.length){ | |
| const img = new Image(); | |
| const c = col; | |
| const r = row; | |
| img.onload = function() { | |
| drawImage(ctx, img, c, r, canW, canH); | |
| } | |
| img.src = `${ADDRESS_LIST[pos]}?t=${new Date().getTime()}`; | |
| } | |
| pos++; | |
| } | |
| } | |
| } | |
| function drawImage(ctx, img, col, row, canW, canH) { | |
| var imgW = img.width; | |
| var imgH = img.height; | |
| var dstCanW = canW / MAX_COL; | |
| var dstCanH = canH / MAX_ROW; | |
| var dstW = dstCanW; | |
| var dstH = imgH * dstW / img.width; | |
| if (dstH > dstCanH) { | |
| dstH = dstCanH; | |
| dstW = imgW * dstH / img.height; | |
| } | |
| var dstX = (dstCanW - dstW) / 2 + dstCanW * col; | |
| var dstY = (dstCanH - dstH) / 2 + dstCanH * row; | |
| ctx.drawImage(img, dstX, dstY, dstW, dstH); | |
| } | |
| function expand(){ | |
| var canvas = document.getElementById('c1'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <canvas id="c1" style="background-color:gray;"></canvas> | |
| <script type="text/javascript"> | |
| window.onload = function(){init();} | |
| window.onresize = function(){expand();} | |
| setInterval("draw()", 100); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment