捕获高分辨率视频/图像html5 [英] Capture high resolution video/image html5
本文介绍了捕获高分辨率视频/图像html5的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用geUserMedia()从网络摄像头简介中捕获图像.
I use geUserMedia() to capture image from webcam Intro.
我获得的最佳分辨率是 640 X 480 ,但是我有高清摄像头以 1280 X 720 录制视频,拍照 2592 X 1944 .
Best resolution that I get is 640 X 480, but I have HD webcam that records video with 1280 X 720, takes a picture 2592 X 1944.
如何捕获高分辨率照片?
How can I capture High Resolution photos?
这里是一个代码示例.它不在乎画布的大小:
Here is one sample of code. It doesn't care about canvas size:
<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, 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/
=>设置媒体限制(分辨率,高度,宽度)
=> Setting media constraints (resolution, height, width)
这篇关于捕获高分辨率视频/图像html5的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文