JavaScript를 사용하여 사진을 캡처하는 방법 | 웹캠 Js 튜토리얼

안녕하세요, 여러분 이 튜토리얼에서 우리는 언급된 쿼리를 해결하려고 노력할 것입니다. 또한 JavaScript를 사용하여 사진을 캡처하는 방법을 배웁니다.

공통 쿼리

JavaScript를 사용하여 사진을 캡처하는 방법은 무엇입니까?

JavaScript를 사용하여 웹캠 이미지를 캡처하는 방법은 무엇입니까?

HTML로 웹캠 스냅샷을 그리는 방법은 무엇입니까?

JavaScript를 사용하여 사진을 캡처하려면 먼저 Webcam JS 라이브러리가 필요합니다.

참조:- How to Integrate Webcam using JavaScript

웹캠 js는 무엇입니까?

Webcam.js는 웹캠에서 사진을 캡처할 수 있는 오픈 소스 JavaScript 라이브러리입니다. HTML5 getUserMedia API를 사용하여 사진을 캡처합니다.

웹캠 Js 빠른 시작 가이드

웹 서버에서 webcam.js 및 webcam.swf 파일을 호스팅하고 다음 HTML 스니펫을 삽입해야 합니다.

<script src="webcam.js"></script>
<div id="camera"></div>
<div id="snapShot"></div>
<script language="JavaScript">
    Webcam.attach( '#camera' );

    takeSnapShot = function() {
      Webcam.snap(function(data_uri) {
        document.getElementById('snapShot').innerHTML = 
        '<img src=" ' +data_uri+' " width="400" height="400">';
      })
    }
</script>
<input type="button" value="" id="cameraBtn" onclick="takeSnapShot()">

이렇게 하면 #camera DIV에 라이브 카메라 보기가 생성되고, 스냅샷 찍기 링크를 클릭하면 스틸 스냅샷을 찍어 JPEG로 변환하고 Data URI을 전달하여 #snapShot DIV에 삽입됩니다. 표준<img> 태그로.

웹캠 Js 구성

기본 설정을 변경하려면 Webcam.set()를 호출하고 다음 키 중 하나를 사용하여 해시를 전달하면 됩니다.

Height    : Auto
Width   : Auto
dest_width :    Auto
dest_height :   Auto
crop_width :    Disabled
crop_height :   Disabled
image_format :  jpeg
force_flash :   false
jpeg_quality :  90

일부 매개변수를 재정의하는 예를 보여 드리겠습니다. 뷰어를 연결하기 전에 이것을 호출하는 것을 잊지 마십시오.

Webcam.set({
    width:650,
    height:310,
    dest_width: 1300,
    dest_height: 620,
    image_format: 'jpeg',
    jpeg_quality: 90,
    force_flash: false   
});

JavaScript 비디오 출력을 사용하여 사진 캡처

소스 코드로 전체 기사 확인