摄像头图片作为背景每60秒更新一次？

Question

我有一个带有摄像头图像的天气网页，每2分钟上传一次。我想换个网页。

我希望摄像头图像是网页上的背景，但我希望该图像每分钟自我更新一次。

我想让它成为背景图片的原因是，我可以把天气预报贴纸放在它上面(在前景中)，在底部角落或页面底部居中。

现在摄像头拍下照片并上传到我的域名主机上。然后我把它下载到我的网页上。在这一点上，它是相当混乱的，但它是有效的。你可以在here上看到它

感谢您的任何帮助

格雷格

Answer 1

您可以这样做，并将canvas作为背景。但这段代码不能在这里工作。因为他们可能出于安全原因在insecure origins中弃用了该功能。

getUserMedia()不再适用于不安全的来源。要使用此功能，应考虑将应用程序切换到安全来源，如HTTPS。有关更多详细信息，请参阅this。

​

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>

​