HTML 페이지, IPcamera 스냅 샷에서 여러 개의 상쾌한 "캔버스에 그립니다"

내 7 개의 카메라에서 라이브 피드를 가져오고 싶은 집 웹 페이지를 설정하고 있습니다. 그 중 6 개는 현재보기 나 rtsp 피드의 스냅 샷을 얻을 수 있기 때문에 새로 고치는 jpeg를 사용해야합니다. 마지막으로 나는 상시적인 상쾌한 웹 페이지를 얻을 수 있기 때문에 iframe을 사용합니다.HTML 페이지, IPcamera 스냅 샷에서 여러 개의 상쾌한 "캔버스에 그립니다"

그래서,이 전 스냅 샷을 새로 고침하는 데 사용하는 스크립트입니다

<script> 
var imageObj = new Image(); 
imageObj.onload = function() { 
    drawOnCanvas(); 
    setTimeout(timedRefresh, 100); 
    } 
    // set src AFTER assigning load 
imageObj.src = "http://192.168.2.136/snap.jpeg?" + Math.random(); 

function timedRefresh() { 
    imageObj.src = "http://192.168.2.136/snap.jpeg?" + Math.random(); 
    //drawOnCanvas(); //flicker remover 
} 

function drawOnCanvas() { 
    var canvas = document.getElementById("canvas1"); 
    var ctx = canvas.getContext("2d"); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); 
} 
</script>

이 원활하게 작동하지만 난 내가 ID canvasX "로 변경할 경우 이전 afther 새 스크립트를 작성, 두 번째 캔버스를 추가 할 때 "다른 카메라에 대상 IP는

<script> 
var imageObj = new Image(); 
imageObj.onload = function() { 
    drawOnCanvas(); 
    setTimeout(timedRefresh, 100); 
    } 
    // set src AFTER assigning load 
imageObj.src = "http://192.168.2.122/snap.jpeg?" + Math.random(); 

function timedRefresh() { 
    imageObj.src = "http://192.168.2.122/snap.jpeg?" + Math.random(); 
    //drawOnCanvas(); //flicker remover 
} 

function drawOnCanvas() { 
    var canvas = document.getElementById("canvas2"); 
    var ctx = canvas.getContext("2d"); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    ctx.drawImage(imageObj, 0, 0, canvas.width, canvas.height); 
} 
</script>

그리고 난 본문 섹션에이 코드를 사용하여 두 캔버스를 렌더링하려고

<canvas id="canvas1" width="1080" height="608"> </canvas> 
<canvas id="canvas2" width="1080" height="608"> </canvas> 
<canvas id="canvas3... etc

마지막 캔버스 만 렌더링되고 나머지는 렌더링되지 않습니다.

모든 피드는 다른 하나 위에 있어야하므로 스크롤 할 때 (이것은 스마트 폰 중심 임) 모든 스트림을 볼 수 있습니다. 이것이 대부분의 가정용 기기의 1080x1920 때문에 간격이 없거나 다른 이유입니다. 나는 라스베리 파이 3에있는 아파치 서버에서 호스팅하고있다.

출처

2017-11-27 Rubino Francesco

코드에서 timedRefresh와 같은 메서드를 두 번 정의 했습니까?

HTML 페이지, IPcamera 스냅 샷에서 여러 개의 상쾌한 "캔버스에 그립니다"

관련 문제