HTML 미디어 캡쳐 클릭

Question

미디어 캡처를 사용하면 iOS/Android의 브라우저를 통해 이미지를 캡처 할 수 있습니다. 파일 또는 새 이미지를 선택하는 팝업이 나타납니다. 그리고 사용자가 새 이미지를 캡처 한 다음 캡처 한 후에는 "이미지 사용"을 클릭해야합니다.

하지만 사용자가 버튼을 클릭 한 직후 이미지를 캡처하는 방법은 무엇입니까? 사용자가 서비스에 로그인 할 때 항상 사용자의 이미지를 캡처하는 시나리오입니다.

Android 또는 iOS 휴대 기기에서 실행 가능해야합니다.

Answer 1

당신은 미디어 캡처를 사용하려는 경우, 당신이 할 수있는 모든 버튼으로 라벨을 라벨에 입력 필드를 포장 (또는 = ID를 함께 참조) 및 스타일 :

<label style="border: 1px solid black;"> 
    This is my custom capture button. 
    <input style="display: none;" type="file" accept="image/*;capture=camera"> 
</label> 

다른 옵션은 WebRTC에 활용된다

<script> 
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
navigator.getUserMedia({video: true}, function (stream) { 
    var video = document.querySelector('video'); 
    video.src = window.URL.createObjectURL(stream); 
    video.onplay = function() { 
     var canvas = document.querySelector('canvas'); 
     canvas.width = video.videoWidth; 
     canvas.height = video.videoHeight; 
     var ctx = canvas.getContext('2d'); 
     ctx.drawImage(video, 0, 0); 
     stream.stop(); 
     var image = canvas.toDataURL('image/jpeg'); 
    }; 

    }, function (err) { 
     alert('Error: ' + err); 
    } 
); 
</script> 

<video autoplay style="display:none;"></video> 
<canvas></canvas> 

이 코드는 카메라에 액세스 할 수에서 getUserMedia를 사용하여 비디오 요소를 보여줍니다. 동영상 재생이 시작되면 (물론 다른 이벤트를 사용할 수도 있음) 캔버스에 프레임을 그리고 JPEG 이미지 (데이터 URL)로 캔버스를 변환합니다. 이 이미지는 예를 들어 서버로 전송 될 수 있습니다. 이 방법의 단점은 iOS 및 최신 Android 기기에서만 작동한다는 것입니다. Chrome에서만 테스트 해 보았습니다.