Question

我有一些网络摄像头，我试图在1个html页面上很好地显示。此页面将在2或3个屏幕上使用（使用Rpi或Windows客户端）。所有屏幕都有不同的分辨率，但我试图让我的视图响应显示。

我试图像这样显示它：

目前我有这段代码：

    <html>
<body bgcolor=000000>
<script language="javascript" type="text/javascript" >
<!--
function ChangeMedia(){
    var d = new Date();
    var t = d.getTime();
    document.getElementById('cam1').src = "http://10.101.4.2/image.jpg?feed=%7B66CA3FEA-7841-4486-B7D2-253EBF08E852%7D&webview&quality=100&noupsample=1/"+t;
    document.getElementById('cam2').src = "http://10.101.4.2/image.jpg?feed=%7BEB2548AA-3183-4FB9-BD5A-199887346827%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam3').src = "http://10.101.4.2/image.jpg?feed=%7B6A3C56CE-F186-4205-9A62-7740207F8BEF%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam4').src = "http://10.101.4.2/image.jpg?feed=%7BAB013929-4D26-4CD4-82BA-F13532D4E7CE%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam5').src = "http://10.101.4.2/image.jpg?feed=%7BE9FB6FCC-0748-48A5-A679-DBD875C5A651%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam6').src = "http://10.101.4.2/image.jpg?feed=%7B0E5C454A-98DC-4C16-95B9-CE3B6097B2E7%7D&webview&quality=100&noupsample=2/"+t;


}
var reloadcam = setInterval("ChangeMedia()",500);



</script>
<script type="text/javascript">



function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds;
timeElement.innerHTML="<font style='font-size:12px;font-weight:bold;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}
window.onload=DisplayTime
</script>     

<center>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam1" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam2" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam3" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam4" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam5" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />

<br>
<span style="color:white" id=curTime></span>
</center>

</body>
</html>

结果如下：

现在我想知道如何让它工作，这样我可以获得1张更大的画面，并且可以缩小3张，下方则小4张。应使用整个宽度。我应该使用表格，但是当使用较小的或4：3的屏幕时，我是否仍能使其响应？

额外的问题是并非所有图像的大小都相同。我想通过使用对象来剪裁它们。

感谢您的帮助。

Answer 1

你可以使用Bootstrap网格，比如......

<div class="wrapper">
    <div class="row">
        <div class="col-xs-8">Big screen</div>
        <div class="col-xs-4">
            <div class="row">
                <div class="col-xs-12">Small screen</div>
                <div class="col-xs-12">Small screen</div>
                <div class="col-xs-12">Small screen</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-3">Small screen</div>
        <div class="col-xs-3">Small screen</div>
        <div class="col-xs-3">Small screen</div>
        <div class="col-xs-3">Small screen</div>
    </div>
</div>

虽然这也可以通过table或flex模型完成，直到您的选择

Answer 2

它不是一个理想的解决方案，但如果您选择使用表格，这应该有效：

＆＃13;

function ChangeMedia(){
    var d = new Date();
    var t = d.getTime();
    document.getElementById('cam1').src = "http://10.101.4.2/image.jpg?feed=%7B66CA3FEA-7841-4486-B7D2-253EBF08E852%7D&webview&quality=100&noupsample=1/"+t;
    document.getElementById('cam2').src = "http://10.101.4.2/image.jpg?feed=%7BEB2548AA-3183-4FB9-BD5A-199887346827%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam3').src = "http://10.101.4.2/image.jpg?feed=%7B6A3C56CE-F186-4205-9A62-7740207F8BEF%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam4').src = "http://10.101.4.2/image.jpg?feed=%7BAB013929-4D26-4CD4-82BA-F13532D4E7CE%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam5').src = "http://10.101.4.2/image.jpg?feed=%7BE9FB6FCC-0748-48A5-A679-DBD875C5A651%7D&webview&quality=100&noupsample=2/"+t;
    document.getElementById('cam6').src = "http://10.101.4.2/image.jpg?feed=%7B0E5C454A-98DC-4C16-95B9-CE3B6097B2E7%7D&webview&quality=100&noupsample=2/"+t;


}

var reloadcam = setInterval("ChangeMedia()",500);




function DisplayTime(){
if (!document.all && !document.getElementById)
return
timeElement=document.getElementById? document.getElementById("curTime"): document.all.tick2
var CurrentDate=new Date()
var hours=CurrentDate.getHours()
var minutes=CurrentDate.getMinutes()
var seconds=CurrentDate.getSeconds()
if (minutes<=9) minutes="0"+minutes;
if (seconds<=9) seconds="0"+seconds;
var currentTime=hours+":"+minutes+":"+seconds;
timeElement.innerHTML="<font style='font-size:12px;font-weight:bold;'>"+currentTime+"</b>"
setTimeout("DisplayTime()",1000)
}

window.onload=DisplayTime;

＆＃13;

<table border="1">
  <tr>
    <td rowspan="3" colspan="2">  
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam1" />
      </td>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam2" />
      </td>
    </tr>
  <tr>
    <td>
      
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam3" />
      </td>
    </tr>
  <tr>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam4" />
      </td>
    </tr>
  <tr>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam5" />
      </td>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
      </td>
    <td>
<img src="" alt="Loading..." name="cam" border="0" width=25% id="cam6" />
      </td>
    </tr>
  </table>

<br>
<span style="color:white" id=curTime></span>

＆＃13;

使用整页

2 个答案: