Hallo,
kann Jemand mir für folgende Seite einen iframe Code schreiben, damit ich meine Kamera in meine Homepage einbetten kann.
http://jagi37.ddns-instar.de/videostream.cgi?user=visitor&pwd=5678&resolution=32&rate=0
Meine Webseite lautet:
Gruß
Heinz
Sollte so gehen:
<iframe src="http://jagi37.ddns-instar.de/videostream.cgi?user=visitor&pwd=5678&resolution=32&rate=0" height="99%" frameborder="1">
</iframe>
Mit den height-Parameter kannst Du ein wenig rumspielen.
Oder Du probierst es so:
<iframe>
<img ng-src="http://jagi37.ddns-instar.de/videostream.cgi?user=visitor&pwd=5678&resolution=32&rate=0"
style="width:100%; height:100%x; padding:1px 1px 1px 1px;">
</img>
</iframe>
Gruß, Kai
Hallo Kai,
der erste iframe funktioniert insoweit, dass ich in meiner Webseiten Vorschau den Stream sehe.
Greife ich extern auf die Webseite zu kommt die Meldung " jagi37.ddns-instar hat die Verbindung abgelehnt ".
Was kann das sein? Wie kann man es beheben?
Gruß
Heinz
Seiten können mittels dem X-Frame-Options http-response header das Anzeigen in iFrames blockieren.
Die Browser werten das aus und verweigern dann eine Anzeige in einem iFrame.
Bedeutet in dem Beispiel: Die Cam-Seite kann nur als Frame eingebettet werden, wenn beide von der gleichen Quellseite (same origin) stammen.
Eine Lösung habe ich im Moment nicht parart.
Hallo,
danke erstmal.
Gruß
Heinz
Aus diesem Grund würde ich die iFrame Lösung nicht nutzen. Es über den Video Tag zu machen ist ja auch wesentlich einfacher…
Hier auf Github findet man ein Beispiel wo es etwas eleganter gelöst wurde:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Player</title>
</head>
<body>
<canvas id="player" width="1280" height="720" style="background: #000;">
I am sorry, Dave. I can't do this.
</canvas>
</body>
<script src="mjpeg.js"></script>
<script>
var player = new MJPEG.Player("player", "http://192.168.2.125/livestream/13?action=play&media=mjpeg&user=admin&pwd=instar");
player.start();
</script>
</html>
Das dazugehörige Javascript erlaubt dann auch das Starten und stoppen des Streams indem man auf das Live Video klickt:
// namespace MJPEG { ...
var MJPEG = (function(module) {
"use strict";
// class Stream { ...
module.Stream = function(args) {
var self = this;
var autoStart = args.autoStart || false;
self.url = args.url;
self.refreshRate = args.refreshRate || 500;
self.onStart = args.onStart || null;
self.onFrame = args.onFrame || null;
self.onStop = args.onStop || null;
self.callbacks = {};
self.running = false;
self.frameTimer = 0;
self.img = new Image();
if (autoStart) {
self.img.onload = self.start;
}
self.img.src = self.url;
function setRunning(running) {
self.running = running;
if (self.running) {
self.img.src = self.url;
self.frameTimer = setInterval(function() {
if (self.onFrame) {
self.onFrame(self.img);
}
}, self.refreshRate);
if (self.onStart) {
self.onStart();
}
} else {
self.img.src = "#";
clearInterval(self.frameTimer);
if (self.onStop) {
self.onStop();
}
}
}
self.start = function() { setRunning(true); }
self.stop = function() { setRunning(false); }
};
// class Player { ...
module.Player = function(canvas, url, options) {
var self = this;
if (typeof canvas === "string" || canvas instanceof String) {
canvas = document.getElementById(canvas);
}
var context = canvas.getContext("2d");
if (! options) {
options = {};
}
options.url = url;
options.onFrame = updateFrame;
options.onStart = function() { console.log("started"); }
options.onStop = function() { console.log("stopped"); }
self.stream = new module.Stream(options);
canvas.addEventListener("click", function() {
if (self.stream.running) { self.stop(); }
else { self.start(); }
}, false);
function scaleRect(srcSize, dstSize) {
var ratio = Math.min(dstSize.width / srcSize.width,
dstSize.height / srcSize.height);
var newRect = {
x: 0, y: 0,
width: srcSize.width * ratio,
height: srcSize.height * ratio
};
newRect.x = (dstSize.width/2) - (newRect.width/2);
newRect.y = (dstSize.height/2) - (newRect.height/2);
return newRect;
}
function updateFrame(img) {
var srcRect = {
x: 0, y: 0,
width: img.naturalWidth,
height: img.naturalHeight
};
var dstRect = scaleRect(srcRect, {
width: canvas.width,
height: canvas.height
});
try {
context.drawImage(img,
srcRect.x,
srcRect.y,
srcRect.width,
srcRect.height,
dstRect.x,
dstRect.y,
dstRect.width,
dstRect.height
);
console.log(".");
} catch (e) {
// if we can't draw, don't bother updating anymore
self.stop();
console.log("!");
throw e;
}
}
self.start = function() { self.stream.start(); }
self.stop = function() { self.stream.stop(); }
};
return module;
})(MJPEG || {});
Angepasst werden muss hier dann nur die Höhe und Breite des Canvas Elements und die Kamera Live-Stream URL die man dem MJPEG Player übergibt:
Hallo,
irgendwie bekomme ich es nicht hin. Bei mir erscheint nur ein schwarzes Feld.
Kannst du mir den Scipt ausfüllen. Meine Daten:
jagi37.ddns-instar.de der Port ist 80 Name: visitor, Passwort 5678
IP: 192.168.2.130
Danke im Voraus
Gruß
Heinz
