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

Webcam pic as background updating every 60 seconds?

本文关键字：更新 一次 60秒 摄像头 背景 网络      更新时间：2024-01-17

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

我希望网络摄像头图像成为网页的背景，但我希望该图像每分钟更新一次。

我希望它成为背景图像的原因是，这样我就可以在它的顶部（前景）的下角或页面中心的底部贴上天气报告贴纸。

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

感谢的任何帮助

Greg

您可以这样做，并将canvas作为背景。但是这个片段在这里不起作用。因为他们可能出于安全原因而否决了insecure origins中的功能。

getUserMedia（）不再适用于不安全的源。要使用此功能，您应该考虑将应用程序切换到安全的来源，例如HTTPS。请参阅此了解更多详细信息。

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>

相关文章：