HTML5의 getUserMedia를 사용하여 사진을 찍는 예-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

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

黄舟

Mar 31, 2017 pm 01:40 PM

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.