집 >웹 프론트엔드 >H5 튜토리얼 >HTML5의 getUserMedia를 사용하여 사진을 찍는 예

HTML5의 getUserMedia를 사용하여 사진을 찍는 예

黄舟원래의: 2017-03-31 13:40:512183검색

1. getUserMedia(브라우저의 API 지원에 따라 컴퓨터 또는 휴대폰)를 통해 장치의 카메라를 호출하고 리소스를 비디오 태그에 넣습니다.
2. 캔버스의 drawImage API를 통해 비디오의 video 리소스를 캔버스에 넣습니다.
3. 캔버스 콘텐츠를 base64로 인코딩된 webp 형식 이미지로 변환하고(브라우저가 이 형식을 지원하지 않으면 png 형식으로 대체됨) img에 넣으면 촬영한 사진을 볼 수 있습니다.

더 이상 말도 안되는 코드는 다음과 같습니다.

HTML

<!doctype html>
<html>
<head>
    <title>html5 capture test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <video autoplay></video>
    <img src="">
    <canvas style="display: none;"></canvas>
    <button id="capture">snapshot</button>


    <script src="index.js"></script>
</body>
</html>

var video = document.querySelector(&#39;video&#39;);
var canvas = document.querySelector(&#39;canvas&#39;);
var ctx = canvas.getContext(&#39;2d&#39;);
var localMediaStream = null;

var snapshot = function () {
    if (localMediaStream) {
        ctx.drawImage(video, 0, 0);
        document.querySelector(&#39;img&#39;).src = canvas.toDataURL(&#39;image/webp&#39;);
    }
};

var sizeCanvas = function () {
    setTimeout(function () {
        canvas.width = video.videoWidth;
        canvas.height = video.videoHeight;
        img.width = video.videoWidth;
        img.height = video.videoHeight;
    }, 100);
};

var btnCapture = document.getElementById(&#39;capture&#39;);
btnCapture.addEventListener(&#39;click&#39;, snapshot, false);

navigator.webkitGetUserMedia(
    {video: true},
    function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
        sizeCanvas();
    },
    function () {
        alert(&#39;your browser does not support getUserMedia&#39;);
    }
);

몇 가지 참고:

브라우저마다 getUserMedia에 대한 지원이 다르므로 webkitGetUserMedia, mozGetUserMedia, msGetUserMedia와 같은 접두사를 추가해야 합니다. 이 문제를 차단하려면 다음을 수행할 수 있습니다.

// cross platforms
var myGetUserMedia = navigator.getUserMedia || 
                 navigator.webkitGetUserMedia ||
                 navigator.mozGetUserMedia || 
                 navigator.msGetUserMedia;

Chrome 지원 파일:/ // 도메인 간은 말할 것도 없고 지리적 위치를 로컬로 사용할 수 없는 등 많은 제한이 있었으며 getUserMedia도 마찬가지입니다.

이 sizeCanvas 기능이 하는 일은 촬영한 사진의 크기가 카메라로 촬영한 크기와 동일하도록 하는 것입니다. 그렇지 않으면 촬영된 사진은 사진의 일부만 됩니다. 카메라에 포착된 화면의 상황.

위 내용은 HTML5의 getUserMedia를 사용하여 사진을 찍는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：html5 API를 사용한 페이징용 샘플 코드 공유다음 기사：html5 API를 사용한 페이징용 샘플 코드 공유