웹 응용 프로그램 내에서 클라이언트 데스크톱의 스크린 샷을 캡처 할 수 있습니까?

Question

JavaScript 기반 웹 응용 프로그램 내에서 클라이언트 데스크톱의 스크린 샷을 캡처 할 수 있는지 알고 싶습니다. 데스크톱 화면의 스크린 샷 (페이지 또는 페이지의 요소, 실제 OS 바탕 화면)을 캡처하는 데 사용할 수있는 응용 프로그램 내의 버튼을 사용자에게 제공하려고합니다.

메인 브라우저 (Chrome 및 Firefox)에서 이러한 종류의 작업을 허용합니까? 보안 문제가있을 수 있다는 것을 알고 있지만 사용자로부터 이러한 종류의 액세스 권한을 요청할 수 있습니까? 거기에 도움이되는 라이브러리, 도구 또는 문서가 있습니까? 또는 이것은 단지 실현 가능하지 않은가?

주제에 대한 조사를했지만 브라우저 내에서 콘텐츠의 스크린 샷을 찍는 방법을 발견했습니다.

Answer 1

이 하나가 당신을 도울 것 같은데 : How to capture screenshot of parts of the client "desktop" using HTML/JavaScript ?

의 WebRTC와

및 Screen Capturing, 당신은 (파이어 폭스와 크롬에서 모두 지원 것) 바탕 화면 스크린 샷을 걸릴 수 있습니다. Javascript 라이브러리 RTCMultiConnection은 WebRTC 작업에 매우 유용하지만 추가 라이브러리를 사용하지 않아도 가능합니다.

Answer 2

Canvas를 사용하여 이미지 또는 비디오 프레임을 캡쳐 화면으로 캡처 할 수 있습니다. 이 라이브러리 시도 웹 페이지의 특정 요소를 캡처 싶은 경우 :

참고 : 여기에 html2canvas

을 코드의 drawImage주의 깊게 크기를 조정() 함수

$(".drag").draggable(); 
 
$(".drag").droppable(); 
 
var takeScreenShot = function() { 
 
    html2canvas(document.getElementById("container"), { 
 
     onrendered: function (canvas) { 
 
      var tempcanvas=document.createElement('canvas'); 
 
      tempcanvas.width=350; 
 
      tempcanvas.height=350; 
 
      var context=tempcanvas.getContext('2d'); 
 
      context.drawImage(canvas,112,0,288,200,0,0,350,350); 
 
      var link=document.createElement("a"); 
 
      link.href=tempcanvas.toDataURL('image/jpg'); //function blocks CORS 
 
      link.download = 'screenshot.jpg'; 
 
      link.click(); 
 
     } 
 
    }); 
 
}

#container{ 
 
    width:400px; 
 
    height:200px; 
 
} 
 
#rightcontainer{ 
 
    width:300px; 
 
    height:200px; 
 
    background:gray; 
 
    color:#fff; 
 
    margin-left:110px; 
 
    padding:10px; 
 
} 
 
#leftmenu{ 
 
    color:#fff; 
 
    background-color:green; 
 
    width:100px; 
 
    height:200px; 
 
    position:fixed; 
 
    left:0; 
 
    padding:10px; 
 
} 
 

 
button{ 
 
    display:block; 
 
    height:20px; 
 
    margin-top:10px; 
 
    margin-bottom:10px; 
 
} 
 
.drag{ 
 
    width:40px; 
 
    height:20px; 
 
    background-color:blue; 
 
    z-index:100000; 
 
    margin-top:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> 
 
    
 
    
 
<button onclick="takeScreenShot()">Snapshot</button> 
 
<div id="container"> 
 
    <div id="leftmenu"> 
 
     Left Side 
 
     <div class="drag"> 
 
     </div> 
 
     <div class="drag"> 
 
     </div> 
 
     <div class="drag"> 
 
     </div> 
 
     Drag-----------> 
 
      & 
 
     Click Snapshot 
 
    </div> 
 
    <div id="rightcontainer"> 
 
     Right Side 
 
    </div> 
 
</div>

Answer 3

네, 그렇게 할 수 있습니다. 시작할 수있는 좋은 방법인지는 모르지만 작업을 수행하는 오픈 소스 앱을 살펴볼 수 있습니다.

여기에 크롬 리모콘 앱 소스가 있습니다. 화면을 캡처하는 코드 조각을 찾을 수 있습니다. 당신이 일을 끝내면 나는 당신에게서 소식을 듣고 싶습니다.

크롬 원격 제어 응용 프로그램 link

의