Javascript-форум - Масштабирование изображения с ip камеры

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Масштабирование изображения с ip камеры (https://javascript.ru/forum/dom-window/58947-masshtabirovanie-izobrazheniya-s-ip-kamery.html)

Масштабирование изображения с ip камеры

Суть проблемы необходимо организовать масштабирование видео с ip камеры,
проблема в том, что код начинает работать только после открытия прямой ссылки на камеру в строке браузера
(http://логин:пароль@айпишниккамер ы:80).
Камера Dlink DCS-933L. О великие эксперты помогите.

<html>
<head>
<title>
</title>
<script>
function sizePic() {
size = document.getElementById("size").value;
img = document.getElementById("pic");
img.width = 60 + 20*size;}
</script>
<style>
img.zoom {
-moz-user-select: none; user-select: none;}
img.zoom:hover {
display: block;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: auto;
height: 100%;
max-width: 99%;
max-height: 99%;
border: solid rgba(210,210,210,.4);
border-width: 100vh 100vw;
cursor: zoom-out;}
:not(:active) > img.zoom:not(:hover), img.zoom:active {
pointer-events: none;}
</style>
</head>
<body>
<p>Размер изображения <input type="range" min="1" max="100" id="size"
oninput="sizePic()" value="3"></p>
<img src="http://логин:пароль@айпишниккамер ы:80/video/mjpg.cgi" alt="" id="pic" class="zoom">
</html>

Ребят хоть какую нибудь мысль подкиньте пожалуйста =-(

img.width = 60 + 20*size + 'px'

Разобрался но...

Проблема решилась предварительной загрузкой в скрытом
iframe, но загрузка изображения теперь занимает много времени.
При клике по изображению оно масштабируется, а в фрейм загружается пустая страница.
Возможно ли загружать "http://admin:admin@айпишник/video.cgi"
в плохом качестве, или есть другое решение?

<html>
<head>
<title>
</title>
<script>
function sizePic() {
size = document.getElementById("size").value;
img = document.getElementById("pic");
img.width = 60 + 20*size;
}
</script>

<style>
img.zoom {
-moz-user-select: none; user-select: none;
}
img.zoom:hover {
display: block;
position: fixed;
z-index: 10;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
width: auto;
height: 100%;
max-width: 99%;
max-height: 99%;
border: solid rgba(210,210,210,.4);
border-width: 100vh 100vw;
cursor: zoom-out;
}
:not(:active) > img.zoom:not(:hover), img.zoom:active {
pointer-events: none;
}
</style>

<style>
.link {
width: 300px;
height: 200px;
background: white;
}
.link a {
display: block;
text-align: center;
height: 100%;
color: white;
}
</style>

</head>
<body>
<iframe src="http://admin:admin@айпишник/video.cgi" width="1" height="1" align="left" name="iframe_a" style="display:none"></iframe>

<p>Размер изображения <input type="range" min="1" max="100" id="size"
oninput="sizePic()" value="3"></p>

<div class="link">
<a href="" target="iframe_a""><img src="http://admin:admin@айпишник/video.cgi" alt="" id="pic" class="zoom"></a>
</div>

</html>