HTML5 camera Sample for Firefox

最新推荐文章于 2021-06-17 00:40:30 发布

iteye_14791

最新推荐文章于 2021-06-17 00:40:30 发布

阅读量185

点赞数

本文链接：https://blog.csdn.net/iteye_14791/article/details/82672510

版权

<!doctype html>
<html>
<head>
    <title>html5 capture test</title>
</head>
<body>
    <video autoplay id="myVideo"></video>
    <img src="" id="myImg">
    <canvas style="display: none;" id="myCanvas"></canvas>
    <button id="capture" οnclick="snapshot()">snapshot</button>


    <script>
    var video = document.getElementById("myVideo");
    var canvas = document.getElementById("myCanvas");
    var img = document.getElementById("myImg");
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var snapshot = function () {
        if (localMediaStream) {
        	canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            img.width = video.videoWidth;
            img.height = video.videoHeight;
            
        	ctx.drawImage(video, 0, 0);
            document.getElementById("myImg").src = canvas.toDataURL('image/png');
        }
    };

    navigator.mozGetUserMedia(
        {video: true},
        function (stream) {
           video.src = window.URL.createObjectURL(stream);
           localMediaStream = stream;
           video.play();
        },
        function () {
            alert('your browser does not support getUserMedia');
        }
    );
    
    </script>
</body>
</html>