Webcam pic as background updating every 60 seconds?

Question

I have a weather webpage with a webcam image that uploads every 2 minutes. I want to change the webpage.

I want the webcam image to be the background on the webpage, but I want that image to update itself once a minute.

The reason I want it to be the background image is so I can put weather report stickers on top of it (in the foreground) in the bottom corners or at the bottom of the page centered.

Right now the webcam takes the picture and uploads it to my domain host. Then I download it to my webpage. It's fairly kluged together at this point but it works. You can see it here

Any help appreciated

Greg

Welcome to Stack Overflow! All that has been posted is a program description. However, we need you to [ask a question](http://stackoverflow.com/help/how-to-ask). We can't be sure what you want from us. Please [edit] your post to include a valid question that we can answer. Reminder: make sure you know [what is on-topic here](http://stackoverflow.com/help/on-topic), asking us to write the program for you and suggestions are off-topic. — Lynn Crumbling, Apr 05 '16 at 00:22
I want the webcam image to be the background on the webpage, but I want that image to update itself once a minute. How do I do that? — Greg_M, Apr 05 '16 at 00:30
use a set interval function and change the src of the img tag - http://www.w3schools.com/jsref/met_win_setinterval.asp -- http://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery -- should be ok using the same image name as it will be a different size so it wont load it from the cache — Tasos, Apr 05 '16 at 00:48
yeah so every 2 minutes in the interval function change the scr of img to (http://datilcam.com/cam/HCpic.jpg) -- should work — Tasos, Apr 05 '16 at 00:51
i see you using -- document.images['cam1'].src ='http://datilcam.com/cam/HCpic.jpg?' + Math.random(); -- bad idea -- every image will be in the casche and you dont need that. To avoid that use an (iframe) and reload that -- check on SO on how to do that -- or even better check here for a solution to not store the image in the casche http://stackoverflow.com/questions/1077041/refresh-image-with-a-new-one-at-the-same-url/22429796#22429796 -- check for the pure JS solution — Tasos, Apr 05 '16 at 01:18
My programming knowledge is pretty poor so I have to piece things together and when it starts to work I step back carefully. I'm sure there are a ton of mistakes — Greg_M, Apr 05 '16 at 01:30
Ok I've got this much but it is not updating. What did I do wrong? Test — Greg_M, Apr 05 '16 at 15:53

score 0 · Answer 1 · answered Apr 05 '16 at 00:49

You can do something like this and make the canvas a background. But this snippet will not work in here. As they deprecated the feature in insecure origins for security reasons perhaps.

getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See this for more details.

var video = document.getElementById("live");
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');

function start() {
  navigator.webkitGetUserMedia({
    video: true
  }, gotStream, function() {});
}

function gotStream(stream) {
  video.src = webkitURL.createObjectURL(stream);
}

function refresh() {
  ctx.drawImage(video, 0, 0, 500, 375);
  ctx.stroke();
  setTimeout(function(){
    refresh;
  }, 60000)
}
refresh();

start();

<video style="display:none;" id="live" width="500" height="375" autoplay style="border:5px solid #000000"></video>
<canvas id="myCanvas" width="500" height="375" style="border:5px solid #000000"></canvas>

Webcam pic as background updating every 60 seconds?

1 Answers1