HTML5のgetUserMediaを使った写真撮影例-H5 チュートリアル-php.cn

ホームページ

ウェブフロントエンド

H5 チュートリアル

HTML5のgetUserMediaを使った写真撮影例

黄舟

Mar 31, 2017 pm 01:40 PM

1. getUserMedia (この API に対するブラウザーのサポートに応じてコンピューターまたは携帯電話) を介してデバイスのカメラを呼び出し、リソースをビデオタグに入れます。
2. canvasの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、などのプレフィックスを追加する必要があります。 rメディア, この問題をブロックしたい場合は、次のようにすることができます:

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

ログイン後にコピー

Chrome では、クロスドメインはもちろんのこと、file:/// に多くの制限が設けられており、地理位置情報はローカルで使用できません。ユーザーメディアを取得します。

この sizeCanvas 機能は、撮影する写真のサイズがカメラでキャプチャされたサイズと同じであることを確認することです。そうでない場合、写真はカメラで記録された画像の一部にすぎません。

以上がHTML5のgetUserMediaを使った写真撮影例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。