클라이언트 웹 캠에서 이미지를 얻는 방법

Question

사용자가 웹 카메라에서 이미지를 캡처하여 내 서버의 데이터베이스에 저장할 수있는 ASP.Net 웹 사이트를 만들려고합니다. TWAIN을 사용해 보았지만이 기능을 지원하는 새로운 카메라를 찾지 못했습니다. Silverlight 및 WIA를 사용하려고 할 때도 마찬가지입니다. 누구든지이 일을 성공적으로 마쳤습니까?

클라이언트 컴퓨터에는 내가 권장하는 웹 카메라가 있으니 잘 작동하는 모델을 알고 있다면 공유하십시오. 저는 Microsoft LifeCam과 Logitech을 모두 사용해 보았습니다.

이 작업을 수행했거나 지금 어떻게 도와줬으면 좋겠습니까? 시간 내 주셔서 감사합니다.

Answer 1

Google 크롬 프레임을 컴퓨터에 설치 한 다음 캔버스 태그를 사용하여 이미지를 가져 오면 원하는 결과를 얻을 수있었습니다. 잘 작동하는 몇 가지 샘플 코드는 다음과 같습니다.

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

Answer 2

asp.net은 서버 측 기술이며 클라이언트 측 웹캠에 연결할 수 없습니다. 브라우저는 모래 상자가 크며 사용자의 웹캠에 대한 액세스를 허용하지 않습니다.

웹캠에 액세스하려면 Flash 또는 Silverlight 구성 요소를 만드는 것을 고려하십시오.

예외적으로 많은 모바일 플랫폼에서 브라우저는 <input type="file" /> 태그를 통해 카메라 및 그림 저장소에 액세스 할 수 있습니다. 이것은 Android에서 잠시 동안의 사례였으며 현재 Safari v6의 옵션입니다. 첨부 된 웹캠에 직접 액세스 할 수있는 데스크톱 브라우저에 대해서는 잘 모릅니다.

사용자가 사진을 찍은 다음 파일 업로드를 통해 수상 내역을 얻을 수있는 대안이 있습니다.

Answer 3

최신 브라우저 (WebRTC getUserMedia 메서드를 지원하는 브라우저)를 대상으로하는 경우 Photobooth.js가 옵션 일 수 있습니다.

WebMonkey에서 인용 : '우리 카메라의 눈을 사로 잡을 최신 WebRTC 개발자는 장치의 카메라로 작업하기위한 JavaScript 라이브러리 인 Wolfram Hempel의 Photobooth.js입니다.'

http://www.webmonkey.com/2012/12/add-an-html5-webcam-to-your-site-with-photobooth-js/

그리고 lib 디렉토리 자체 :

http://wolframhempel.com/2012/12/02/photobooth-js/

이 당신을 위해 작동 희망!