如何在所有设备上强制使用 getUserMedia 的 16:9 比率?
How to force a 16:9 ratio with getUserMedia on all devices?
我需要使用 getUserMedia
,而视频设置为以 16:9 分辨率录制。
我的代码适用于大多数台式机和 Android 7 及更高版本:
navigator.getUserMedia( {
audio: true,
video: {
mandatory: {
minWidth: 380,
minHeight: 214,
maxWidth: 380,
maxHeight: 214
}
}
})
但在 Android 6 及以下版本以及某些台式机上(无法确定具体是哪个),getUserMedia
中断,相机无法提供图像。
这适用于所有设备和桌面,但默认分辨率为4:3,而我需要16:9:
navigator.getUserMedia( {
audio: true,
video: true
})
我试着省略了 mandatory
,没有成功。
更让我困惑的是,iOS 设备(11 测试版)和 Android 需要传递 facingMode
参数:
video: { facingMode: 'user' }
因此,传递 width
和 height
参数似乎会在某些台式机和设备(例如 Android 5 和 6)上中断 getUserMedia
。
有没有办法在所有设备上强制使用 16:9 比率?捕获具有特定尺寸的视频的正确和常规方法是什么?
您假设所有相机都支持 16:9,或者所有浏览器都会为您裁剪视频。不是这样。您还使用了过时的 API。尝试 the latest API (fiddle, samples):
var constraints = {video: {width: 320, height: 180, facingMode: "user"}};
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => video.srcObject = stream)
.then(() => new Promise(resolve => video.onloadedmetadata = resolve))
.then(() => log(video.videoWidth +"x"+ video.videoHeight))
.catch(e => console.log(e));
getUserMedia
的核心是 camera/mic 发现 API: 所有 min
, max
, exact
, ideal
关键字用于描述您的约束,即您对 而不是 得到您想要的东西的容忍度。
我会建议 aspectRatio
约束,除非还没有人实施它,它只是另一个降低容忍度的约束。
目前我相信只有 Chrome 会缩小和裁剪相机输出到您想要的确切大小。事实证明这是大多数人想要的,但对用户相机的了解却很少。其他浏览器可能会紧随其后,因为对其他浏览器的需求不多,但它们目前并没有缩小规模。
请注意,即使 Chrome 也不会升级,因此如果您在 Android 上使用 Chrome,您可能会要求比 [=] 更高的分辨率42=]6个设备可以输出。在这种情况下检查 OverconstrainedError
,然后使用较低的值重试。
简而言之,您不一定总能获得所需的确切尺寸,因为它最终取决于用户的相机和浏览器。
但是 HTMLVideoElement 无论如何都会在播放时缩小尺寸,您可以裁剪。
我需要使用 getUserMedia
,而视频设置为以 16:9 分辨率录制。
我的代码适用于大多数台式机和 Android 7 及更高版本:
navigator.getUserMedia( {
audio: true,
video: {
mandatory: {
minWidth: 380,
minHeight: 214,
maxWidth: 380,
maxHeight: 214
}
}
})
但在 Android 6 及以下版本以及某些台式机上(无法确定具体是哪个),getUserMedia
中断,相机无法提供图像。
这适用于所有设备和桌面,但默认分辨率为4:3,而我需要16:9:
navigator.getUserMedia( {
audio: true,
video: true
})
我试着省略了 mandatory
,没有成功。
更让我困惑的是,iOS 设备(11 测试版)和 Android 需要传递 facingMode
参数:
video: { facingMode: 'user' }
因此,传递 width
和 height
参数似乎会在某些台式机和设备(例如 Android 5 和 6)上中断 getUserMedia
。
有没有办法在所有设备上强制使用 16:9 比率?捕获具有特定尺寸的视频的正确和常规方法是什么?
您假设所有相机都支持 16:9,或者所有浏览器都会为您裁剪视频。不是这样。您还使用了过时的 API。尝试 the latest API (fiddle, samples):
var constraints = {video: {width: 320, height: 180, facingMode: "user"}};
navigator.mediaDevices.getUserMedia(constraints)
.then(stream => video.srcObject = stream)
.then(() => new Promise(resolve => video.onloadedmetadata = resolve))
.then(() => log(video.videoWidth +"x"+ video.videoHeight))
.catch(e => console.log(e));
getUserMedia
的核心是 camera/mic 发现 API: 所有 min
, max
, exact
, ideal
关键字用于描述您的约束,即您对 而不是 得到您想要的东西的容忍度。
我会建议 aspectRatio
约束,除非还没有人实施它,它只是另一个降低容忍度的约束。
目前我相信只有 Chrome 会缩小和裁剪相机输出到您想要的确切大小。事实证明这是大多数人想要的,但对用户相机的了解却很少。其他浏览器可能会紧随其后,因为对其他浏览器的需求不多,但它们目前并没有缩小规模。
请注意,即使 Chrome 也不会升级,因此如果您在 Android 上使用 Chrome,您可能会要求比 [=] 更高的分辨率42=]6个设备可以输出。在这种情况下检查 OverconstrainedError
,然后使用较低的值重试。
简而言之,您不一定总能获得所需的确切尺寸,因为它最终取决于用户的相机和浏览器。
但是 HTMLVideoElement 无论如何都会在播放时缩小尺寸,您可以