バックグラウンドとして60秒ごとにWebcam picを更新しますか？

Question

2分ごとにアップロードされるウェブカメラ画像を持つ天気のウェブページがあります。 ウェブページを変更したいと思います。

ウェブカメラの画像をウェブページの背景にしたいが、その画像を1分に1回更新したい。

バックグラウンドイメージにしたい理由は、天気予報のステッカーを（前景の）底部のコーナーやページの下部に置くことができます。

今すぐウェブカメラが写真を撮って、自分のドメインホストにアップロードします。それから私は私のウェブページにダウンロードします。これはかなりの時点で一緒にklugedですが、それは動作します。あなたはhere

すべてのヘルプは、あなたがこのような何かをしてcanvas背景を作ることができます

グレッグ

Answer 1

を高く評価し、それを見ることができます。しかし、このスニペットはここでは機能しません。おそらくセキュリティ上の理由から彼らは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>