HTML userMedia facingMode:"environment"不适用于 android phone
HTML userMedia facingMode: "environment"doesn't work on android phone
它一直使用前置摄像头而不是后置摄像头
这是我的代码:我添加了 facingMode: {exact:"environment"},但它不起作用
const constraints = {
video: true,
facingMode: { exact: 'environment' }
};
if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
console.log("Let's get this party started")
}
navigator.mediaDevices.getUserMedia(constraints).
then((stream) => {video.srcObject = stream});
function displayImage()
{
const selectedFile = document.getElementById('fileinput')
//var image =document.getElementById('output')
//image.src = URL.createObjectURL(selectedFile.files[0]);
//selectedFile.files[0]
const img = new Image()
img.src = URL.createObjectURL(selectedFile.files[0])
canvas.width = video.videoWidth
canvas.height = video.videoHeight
video.style.display="none"
canvas.style.display ="inline"
console.log(img)
console.log("image uploaded")
img.onload = function() {
canvas.getContext('2d').drawImage(img, 0, 0,video.videoWidth,video.videoHeight);
console.log('the image is drawn');
}
}
facingMode
约束未完全实现,尤其是在移动设备中。
我发现 device
对象的 label
成员包含用于 environment-facing 相机的字符串 back
和用于 user-facing 相机在广泛的移动设备中,android 和 iOS。 (有时这些字符串部分是大写的。)所以你可以这样做。与 facingMode
相比,它有点毛茸茸,但它确实有效。
/* get user's permission to muck around with video devices */
const tempStream = await navigator.mediaDevices.getUserMedia({video:true})
const devices = navigator.mediaDevices.enumerateDevices()
let frontDeviceId
let backDeviceId
if (devices.length > 0) {
/* defaults so all this will work on a desktop */
frontDeviceId = devices[0].deviceId;
backDeviceId = devices[0].deviceId;
}
/* look for front and back devices */
devices.forEach (device => {
if( device.kind === 'videoinput' ) {
if( device.label && device.label.length > 0 ) {
if( device.label.toLowerCase().indexOf( 'back' ) >= 0 )
backDeviceId = device.deviceId
else if( device.label.toLowerCase().indexOf( 'front' ) >= 0 )
frontDeviceId = device.deviceId
}
}
}
/* close the temp stream */
const tracks = tempStream.getTracks()
if( tracks )
for( let t = 0; t < tracks.length; t++ ) tracks[t].stop()
/* open the device you want */
const constraints = {
video: true,
deviceId: {exact: backDeviceId }
}
const stream = navigator.mediaDevices.getUserMedia(constraints)
您的约束设置不正确。
facingMode
是video
约束的成员,所以应该是
const constraints = {
video: {
facingMode: {
exact: "environment"
}
}
};
Live Fiddle 来自带有后置摄像头的设备运行。
它一直使用前置摄像头而不是后置摄像头 这是我的代码:我添加了 facingMode: {exact:"environment"},但它不起作用
const constraints = {
video: true,
facingMode: { exact: 'environment' }
};
if ('mediaDevices' in navigator && 'getUserMedia' in navigator.mediaDevices) {
console.log("Let's get this party started")
}
navigator.mediaDevices.getUserMedia(constraints).
then((stream) => {video.srcObject = stream});
function displayImage()
{
const selectedFile = document.getElementById('fileinput')
//var image =document.getElementById('output')
//image.src = URL.createObjectURL(selectedFile.files[0]);
//selectedFile.files[0]
const img = new Image()
img.src = URL.createObjectURL(selectedFile.files[0])
canvas.width = video.videoWidth
canvas.height = video.videoHeight
video.style.display="none"
canvas.style.display ="inline"
console.log(img)
console.log("image uploaded")
img.onload = function() {
canvas.getContext('2d').drawImage(img, 0, 0,video.videoWidth,video.videoHeight);
console.log('the image is drawn');
}
}
facingMode
约束未完全实现,尤其是在移动设备中。
我发现 device
对象的 label
成员包含用于 environment-facing 相机的字符串 back
和用于 user-facing 相机在广泛的移动设备中,android 和 iOS。 (有时这些字符串部分是大写的。)所以你可以这样做。与 facingMode
相比,它有点毛茸茸,但它确实有效。
/* get user's permission to muck around with video devices */
const tempStream = await navigator.mediaDevices.getUserMedia({video:true})
const devices = navigator.mediaDevices.enumerateDevices()
let frontDeviceId
let backDeviceId
if (devices.length > 0) {
/* defaults so all this will work on a desktop */
frontDeviceId = devices[0].deviceId;
backDeviceId = devices[0].deviceId;
}
/* look for front and back devices */
devices.forEach (device => {
if( device.kind === 'videoinput' ) {
if( device.label && device.label.length > 0 ) {
if( device.label.toLowerCase().indexOf( 'back' ) >= 0 )
backDeviceId = device.deviceId
else if( device.label.toLowerCase().indexOf( 'front' ) >= 0 )
frontDeviceId = device.deviceId
}
}
}
/* close the temp stream */
const tracks = tempStream.getTracks()
if( tracks )
for( let t = 0; t < tracks.length; t++ ) tracks[t].stop()
/* open the device you want */
const constraints = {
video: true,
deviceId: {exact: backDeviceId }
}
const stream = navigator.mediaDevices.getUserMedia(constraints)
您的约束设置不正确。
facingMode
是video
约束的成员,所以应该是
const constraints = {
video: {
facingMode: {
exact: "environment"
}
}
};
Live Fiddle 来自带有后置摄像头的设备运行。