如何从客户端网络摄像头获取图像

我期待创建一个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