Hi i have webcam where i can get snap in jpg, i wrote an javascript code that get that image, show it and when the picture was loaded it load them again (another snap from the same URL) and it was so fast that i was like a video, like MJPEG. It worked good, but right now i had to add credentials to those streams and when i want to load an image i have to enter URL with credentials to be able to load it correctly, when i do that manually in browser everything is ok, but when i enter the url into an tag through javascript it won't show any picture.
Is there any option to fetch it with javascript somehow with those credentials ?
Code:
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Kamera Online</title>
<script src="JS/jquery-1.11.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$.urlParam = function(name){
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results==null){
return null;
}
else{
return results[1] || 0;
}
}
$("span#cislo_kamery").text($.urlParam('id'));
$("span#IP_kamery").text($.urlParam('ip'));
$("img#Camera_MJPEG_stream").attr("src","http://user:password@"+$.urlParam('ip')+"/snap.jpg");
});
</script>
<style>
body {
background-color: rgb(26,54,85);
}
h1 {
width: 640px;
text-align:center;
color:white;
font-size:15px;
}
</style>
</head>
<body>
<h1>camera number: <span id="cislo_kamery"></span> IP Adresa Kamery: <span id="IP_kamery"></span></h1>
<img id="Camera_MJPEG_stream" src="N/A" />
<script src="JS/motion_jpeg_streamer_test.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
motionjpeg_stream("#Camera_MJPEG_stream","user:password");
});
</script>
</body>
</html>
JAVASCRIPT (JS/motion_jpeg_streamer_test.js):
var credentials = "user:password";
function motionjpeg_stream(id, credentials) {
var image = $(id), src;
if (!image.length) return;
src = image.attr("src");
if (src.indexOf("?") < 0) {
// Add the credentials to the URL
image.attr("src", "http://" + credentials + "@" + src + "?");
}
setInterval(function() {
// This function will cause the image to reload continuously
if (src) {
var newSrc = "http://" + credentials + "@" + src + "?" + (new Date()).getTime();
image.attr("src", newSrc);
}
}, 1000); // Reload every 1 second (adjust the interval as needed)
}
It looks like it works but the image doesn't show and when i inspect it i see that there is changing the timestamp at the end but no picture is shown and when i enter manually http://user:[email protected]/snap.jpg?1456879 to web browser it will load it correctly, but the script won't work with tag.
This is how it looks like in inspect in web browser, the text in the box is shown when i have mouse over it.
Can you help please?