如何從客戶端網絡攝像頭獲取圖像

我期待創建一個ASP.Net網站，用戶可以從網絡攝像頭捕獲圖像並將其保存到我的服務器上的數據庫。我曾嘗試使用TWAIN，但似乎無法找到任何支持此功能的新相機。嘗試使用Silverlight和WIA時也是如此。這樣做有沒有人取得過成功？如何從客戶端網絡攝像頭獲取圖像

客戶端計算機將擁有我推薦的任何網絡攝像頭，因此如果您知道可以使用的模型，請分享。我已經嘗試了微軟LifeCam和羅技沒有運氣。

如果你已經完成了這個或現在我將非常感謝一些幫助。謝謝你的時間。

來源

2012-12-27 user229133

我能夠通過讓用戶在那臺計算機上安裝Google Chrome Frame然後使用畫布標籤來獲取圖像，從而完成了我想要的操作。很好地工作在這裏的一些示例代碼：

<div> 

     <p id="status" style="color:red"> 
      <noscript>JavaScript is disabled.</noscript> 
     </p> 


     <table> 
      <tr> 
       <td> 
        <input id="btnTakePicture" type="button" value="Take Picture"; /> 
       </td> 
       <td> 
        <input id="btnSave" type="button" value="Save Picture"; /> 
       </td> 
      </tr> 
     </table> 


     <asp:Button ID="btnSavePicture" runat="server" Text="HiddenSave" OnClick="btnSavePicture_Click" CssClass="hiddencol" /> 

     <asp:Panel ID="pnlHide" runat="server" style="display:none" >  
      <textarea id="eventdata" rows="18" cols="1" style="width: 100%" runat="server"></textarea> 
     </asp:Panel> 

     <script type="text/javascript"> 

       navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || 
       navigator.mozGetUserMedia || navigator.msGetUserMedia; 

       var webcam = (function() { 


        var video = document.createElement('video'), 
        photo = document.createElement('canvas'); 

        function play() { 

         if (navigator.getUserMedia) { 

          navigator.getUserMedia({ video: true, audio: true, toString: function() { return "video,audio"; } }, onSuccess, onError); 

         } else { 

          changeStatus('getUserMedia is not supported in this browser.', true); 
         } 

        } 

        function onSuccess(stream) { 

         var source; 

         if (window.webkitURL) { 

          source = window.webkitURL.createObjectURL(stream); 

         } else { 

          source = stream; // Opera and Firefox 
         } 


         video.autoplay = true; 

         video.src = source; 

         changeStatus('Connected.', false); 

        } 

        function onError() { 

         changeStatus('Please accept the getUserMedia permissions! Refresh to try again.', true); 

        } 

        function changeStatus(msg, error) { 
         var status = document.getElementById('status'); 
         status.innerHTML = msg; 
         status.style.color = (error) ? 'red' : 'green'; 
        } 


        // allow the user to take a screenshot 
        function setupPhotoBooth() { 
         //var takeButton = document.createElement('button'); 
         var takeButton = document.getElementById('btnTakePicture'); 
         //takeButton.innerText = 'Take Picture'; 
         takeButton.addEventListener('click', takePhoto, true); 
         //document.body.appendChild(takeButton); 

         //var saveButton = document.createElement('button'); 
         var saveButton = document.getElementById('btnSave'); 
         //saveButton.id = 'btnSave'; 
         //saveButton.innerText = 'Save Picture'; 
         saveButton.disabled = true; 
         saveButton.addEventListener('click', savePhoto, true); 
         //document.body.appendChild(saveButton); 

        } 

        function takePhoto() { 

         // set our canvas to the same size as our video 
         photo.width = video.width; 
         photo.height = video.height; 

         var context = photo.getContext('2d'); 
         context.drawImage(video, 0, 0, photo.width, photo.height); 

         // allow us to save 
         var saveButton = document.getElementById('btnSave'); 
         saveButton.disabled = false; 

         var data = photo.toDataURL("image/png"); 

         data = data.replace("image/png", ""); 

         document.getElementById("<%= eventdata.ClientID %>").value = data; 

        } 

        function savePhoto() { 
         //      var data = photo.toDataURL("image/png"); 

         //      data = data.replace("image/png", "image/octet-stream"); 

         //      document.getElementById("<%= eventdata.ClientID %>").value = data; 
         //      document.location.href = data; 

         SendBack(); 
        } 

        return { 
         init: function() { 

          changeStatus('Please accept the permissions dialog.', true); 

          video.width = 320; 
          video.height = 240; 

          document.body.appendChild(video); 
          document.body.appendChild(photo); 

          navigator.getUserMedia || (navigator.getUserMedia = navigator.mozGetUserMedia || navigator.webkitGetUserMedia || navigator.msGetUserMedia); 

          play(); 
          setupPhotoBooth(); 

         }() 

        } 


       })(); 

      function SendBack() { 
       var btn = document.getElementById("<%= btnSavePicture.ClientID %>"); 
       btn.click(); 
      } 

    </script> 

    </div>

來源

2013-01-23 14:43:37 user229133