Локальное изображение IPCam в HTML - PullRequest
Новая
       10

Локальное изображение IPCam в HTML

0 голосов
/ 11 мая 2018

Я планирую встроить изображение ipcam в html (iframe).Проблема в том, что программное обеспечение ipcam не поддерживает встраивание и, кроме того, оно находится в локальной сети.

Возможно ли сделать изображение видимым из любой точки сети кем-либо таким образом, чтобы в него входило только изображение, но не остальная часть сайта?

1 Ответ

0 голосов
/ 11 мая 2018

Это может быть очень сложно, потому что тип настройки, которую вы объясняете, скорее всего, будет в другом домене, чем ваша кодовая база, таким образом, задействуя Межсайтовый скриптинг . Если бы это было не так, вы могли бы выбрать элемент изображения из iframe с помощью чего-то такого простого, как 

$('iframe').contents().find('img');

или 

window.frames[iframename].document.getElementById("imgid");

Ваша лучшая ставка, поскольку это, вероятно, невозможно, может состоять в том, чтобы загрузить URL-адрес в iframe и обернуть его div, равным размеру изображения на получаемой странице, а затем использовать overflow:hidden;

HTML 

<div id="iframe-wrap">
    <iframe scrolling="no" src="your/url"></iframe>
</div>

CSS 

#iframe-wrap{
    width:400px; /*  width of the img */
    height:300px; /*  height of the img */
    position:relative;
    overflow:hidden;
}
#iframe-wrap iframe{
   width:1200px; /* width of the iframe sources container (for brevity) */
   height:500px; /*  adjust accordingly  */
   position:absolute; 
   top:-100px; /* adjust so image is visible */
   left:-100px; /* same as above */
}

Рабочая скрипка: https://jsfiddle.net/z5zjpb9e/

Стоит также отметить, что даже это может быть проблематично, если для X-Frame-Options установлено значение SAMEORIGIN, поскольку вы не сможете управлять этим на удаленном сервере, который вы не можете редактировать. Более подробное объяснение см. В этом .

...