ウェブカムを使って画像をキャプチャしキャンバスで保存

Question

私は簡単なHTML形式を作成しました。その中に、ユーザーは自分のデバイスウェブカムを使って自分自身の写真を撮ることができます。

<div class="form-group"> 
    <div id="camera"> 
     <div class="center clear"> 
      <video id="video" class="picCapture" autoplay=""></video> 
      <button id="snap" type="button" class="btn btn-default" onclick="return false;">Take Picture</button> 
      <canvas id="canvas" class="picCapture"></canvas> 
     </div> 
    </div> 
</div> 

を、これが（キャッチpic.js）JS：私は私の形でHTMLのこの作品を使用するすべてのものが働いていた私のローカルマシンで

// Put event listeners into place 

     window.addEventListener("DOMContentLoaded", function() { 
     // Grab elements, create settings, etc. 
     var canvas = document.getElementById("canvas"), 
      context = canvas.getContext("2d"), 
      video = document.getElementById("video"), 
      videoObj = { "video": true }, 
      errBack = function(error) { 
      console.log("Video capture error: ", error.code); 
      }; 

     // Put video listeners into place 
     if(navigator.getUserMedia) { // Standard 
      navigator.getUserMedia(videoObj, function(stream) { 
      video.src = stream; 
      video.play(); 
      }, errBack); 
     } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
    ---28--- navigator.webkitGetUserMedia(videoObj, function(stream){ 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
      }, errBack); 
     } else if(navigator.mozGetUserMedia) { // WebKit-prefixed 
      navigator.mozGetUserMedia(videoObj, function(stream){ 
      video.src = window.URL.createObjectURL(stream); 
      video.play(); 
      }, errBack); 

    } 

。ウェブカメラの出力を自分のフォームで見ることができ、写真を保存することができました。しかし、今私は、サーバーにアプリをアップロードし、私はカントを表示するウェブカメラからストリームを取得します。 私はコンソールで確認し、私はこの二つがプリントアウトを取得：

getUserMedia() is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details. 
catch-pic.js:28 Video capture error: undefined 

私はcatch-pic.jsにライン28をマーク。私は本当にこのマシンが自分のマシンでのみ動作していて、他のマシンでは動作していないことを実際に理解できませんでした。 THX

Answer 1

私はこれを同じコードを見つける：

<script> 

     // Put event listeners into place 
     window.addEventListener("DOMContentLoaded", function() { 
      // Grab elements, create settings, etc. 
      var canvas = document.getElementById("canvas"), 
       context = canvas.getContext("2d"), 
       video = document.getElementById("video"), 
       videoObj = { "video": true }, 
       errBack = function(error) { 
        console.log("Video capture error: ", error.code); 
       }; 

      // Put video listeners into place 
      if(navigator.getUserMedia) { // Standard 
       navigator.getUserMedia(videoObj, function(stream) { 
        video.src = stream; 
        video.play(); 
       }, errBack); 
      } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed 
       navigator.webkitGetUserMedia(videoObj, function(stream){ 
        video.src = window.webkitURL.createObjectURL(stream); 
        video.play(); 
       }, errBack); 
      } else if(navigator.mozGetUserMedia) { // WebKit-prefixed 
       navigator.mozGetUserMedia(videoObj, function(stream){ 
        video.src = window.URL.createObjectURL(stream); 
        video.play(); 
       }, errBack); 
      } 

      // Trigger photo take 
      document.getElementById("snap").addEventListener("click", function() { 
       context.drawImage(video, 0, 0, 640, 480); 
      }); 
     }, false); 

    </script> 

このlink