Capture Bild mit Web-Cam und speichern mit Leinwand

Question

Ich erstellte ein einfaches HTML-Formular und innerhalb davon sollte Benutzer in der Lage sein, ein Bild von sich selbst mit seinem Gerät Web-Cam. Ich habe dieses Stück HTML in meiner Form:

<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> 

und diese JS (catch pic.js):

// 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); 

    } 

In meinem lokalen Rechner alles funktionierte. Ich konnte die Ausgabe der Webcam in meinem Formular sehen und konnte Bilder speichern. Aber jetzt habe ich die App auf den Server hochgeladen und ich kann den Stream von der Webcam nicht sehen. Ich habe in der Konsole und ich bekomme diese zwei ausgedruckt:

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 

i Linie 28 in catch-pic.js markiert. Ich konnte nicht wirklich verstehen, warum dieser hier nur in meiner Maschine arbeitet und nicht in anderen ... irgendeine Idee? thx

Answer 1

i finden gleiche diesen Code:

<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> 

und dieses link