Html 捕获高分辨率视频/图像 html5
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/15849724/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Capture high resolution video/image html5
提问by Konstantin
I use geUserMedia() to capture image from webcam Intro.
我使用 geUserMedia() 从网络摄像头Intro捕获图像。
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.
我得到的最佳分辨率是640 X 480,但我有高清网络摄像头,可以录制1280 X 720 的视频,拍摄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>
回答by Roman
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
http://www.html5rocks.com/en/tutorials/getusermedia/intro/
=> Setting media constraints (resolution, height, width)
=> 设置媒体约束(分辨率、高度、宽度)
回答by Yoni Baciu
As far as I know WebRTC is currently limited to 640x480 no matter what camera you have. Hopefully this will change soon.
据我所知,无论您使用什么相机,WebRTC 目前都仅限于 640x480。希望这会很快改变。
回答by jamesinealing
For anyone else like me who finds themselves here, there's a useful update at http://webrtchacks.com/video-constraints-2/.
对于像我这样发现自己在这里的其他人,http://webrtchacks.com/video-constraints-2/ 上有一个有用的更新。
Looking at the original question, note that as far as I understand taking a still photo using WebRTC is actually extracting a still frame from the video feed, so you will always be constrained by the video resolution of the device, even if it is capable of capturing higher resolution stills itself.
查看原始问题,请注意,据我所知,使用 WebRTC 拍摄静止照片实际上是从视频源中提取静止帧,因此您将始终受到设备视频分辨率的限制,即使它能够捕捉更高分辨率的静止图像本身。