1
私は私の7台のカメラからのライブフィードを持ちたい私のホームページのページを設定しています。私が得ることができるのは、現在のビューまたはrtspフィードのスナップショットであるため、6人はリフレッシュJPEGを使用する必要があります。私は常に最新のWebページを取得できるので、最後の1つは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>
をリフレッシュするために使用するスクリプトです私は2番目のキャンバスを追加するときにそれは私がcanvasX」にIDを変更ところ、以前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
最後のキャンバスのみがレンダリングされ、他はすべてレンダリングされません。
すべてのフィードは1つのフィールドにする必要があります。そのため、スクロールすると（これはスマートフォンに焦点を当てています）、すべてのストリームを見ることができます。これは、ほとんどの家庭用機器の1080x1920のためにスペースがない、またはそうでない理由です。私はRaspberryPi 3上のApacheサーバー上でホスティングしています。
コードでtimedRefreshのようなメソッドを2回定義しましたか？