微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

捕获高分辨率视频/图像html5

我使用geUserMedia()从网络摄像头 Intro捕获图像.

我得到的最佳分辨率是640 X 480,但我有高清网络摄像头
用1280 X 720录制视频,
拍照2592 X 1944.

如何拍摄高分辨率照片?

这是一个代码示例.它不关心画布大小:

<video autoplay id="vid" style="display:none;"></video>
<canvas id="canvas" width="1280" height="720" style="border:1px solid #d3d3d3;"></canvas><br>
<button onclick="snapshot()">Take Picture</button>

<script type="text/javascript">
    var video = document.querySelector("#vid");
    var canvas = document.querySelector('#canvas');
    var ctx = canvas.getContext('2d');
    var localMediaStream = null;

    var onCameraFail = function (e) {
        console.log('Camera did not work.',e);
    };

    function snapshot() {
        if (localMediaStream) {
            ctx.drawImage(video,0);
        }
    }

    navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    window.URL = window.URL || window.webkitURL;
    navigator.getUserMedia({video:true},function (stream) {
        video.src = window.URL.createObjectURL(stream);
        localMediaStream = stream;
    },onCameraFail);

</script>

解决方法

http://www.html5rocks.com/en/tutorials/getusermedia/intro/

=>设置媒体约束(分辨率,高度,宽度)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。