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>

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

1 个答案: