I need to change the size of a photo from imageCapture.takePhoto() but it is not working.I need to change the size to 320 height X 240 width but the result is 640 height X 480 width.
Here you can found the documentation. https://developer.mozilla.org/en-US/docs/Web/API/ImageCapture/takePhoto
navigator.getUserMedia(
{
video:true,
audio:true
},
function(localMediaStream) {
const track = localMediaStream.getVideoTracks()[0];
let imageCapture = new ImageCapture(track);
imageCapture.takePhoto(
{imageHeight:320,imageWidth:240}).then(function(blob) {
//do somethingh with blob (photo)
}).catch(function(error) {
console.log(error);
});
},
function(err) {
console.log(err);
});
It seems you need to check the PhotoCapabilities of your ImageCapture before being able to use the photoSettings parameter of ImageCapture.takePhoto(photoSettings) .
To do so, you will call the getPhotoCapabilities()
method of your ImageCapture , and then check the ranges set as imageHeight
and imageWidth
.
const capture = new ImageCapture(track);
const { imageWidth, imageHeight } = await capture.getPhotoCapabilities();
const width = setInRange(required_width, imageWidth);
const height = setInRange(required_height, imageHeight);
const photoSettings = (width && height) ? {
imageWidth: width,
imageHeight: height
} : null;
const pic = await capture.takePhoto(photoSettings);
function setInRange(value, range) {
if(!range) return NaN;
let x = Math.min(range.max, Math.max(range.min, value));
x = Math.round(x / range.step) * range.step; // take `step` into account
return x;
}
https://jsfiddle.net/bLrvyet5/
But it may very well happen that your required width and height are not in these MediaSettingsRange , and thus you may have to resize this image yourself on a canvas.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.