Я использую navigator.mediaDevices.getUserMedia, чтобы открыть MediaStream с устройства камеры в веб-браузере. Мое приложение хочет выполнить некоторую обработку изображений в реальном времени в WebAssembly, и для этого мне нужно предоставить прямой поток изображений непосредственно с камеры.
Мое решение работает довольно хорошо на большинстве устройств, однако у меня есть проблема на устройствах с несколькими обращенными назад камерами, такими как Samsung Galaxy S10 в Google Chrome для Android. Проблема в том, что следующий фрагмент:
const constraints = {
audio: false,
video: {
width: { min: 640, ideal: 1280, max: 1920 },
height: { min: 480, ideal: 720, max: 1080 },
facingMode: { ideal: 'environment' },
}
};
const stream = await navigator.mediaDevices.getUserMedia( constraints );
всегда открывает неправильную камеру - широкоугольную камеру, которая не поддерживает автофокусировку и обеспечивает изображения, которые слишком искажены для моего кода. Широкоугольная камера хороша для пейзажной фотографии, но она ужасна для сканирования штрих-кода и текста.
Как выбрать правильную камеру с помощью MediaTrackConstraints ? Я также попытался добавить
focusMode: { ideal: 'continuous' }
к ограничениям (согласно Документация MDN , это должно быть возможным ограничением для дорожек изображений), но, похоже, оно не работает.
Я также пытался перечислить все устройства (из этого SO ответа ), но я не знаю, как правильно выбрать правильную камеру.
Примечательно, этот фрагмент кода :
const devices = await navigator.mediaDevices.enumerateDevices();
devices.forEach( ( device: MediaDeviceInfo ) => {
console.log( "Found device: " + JSON.stringify( device ) );
});
производит следующий вывод на консоль:
Found device: {"deviceId":"default","kind":"audioinput","label":"","groupId":"4852f187ff6a41e6d3fb3ba41c4897f46bd8ff153579da6fcb8f485432a32f66"}
Found device: {"deviceId":"86d4706b0bf160ff12fa75535173edcc68d4fa7ad5e00ec186cb1285ff22869d","kind":"audioinput","label":"","groupId":"c2cfc78763f7668263b0033c44d0f906ca0f33264ebfa6b96e9846265a21ff09"}
Found device: {"deviceId":"4d5fecf5a3eee5d41812bb6c34efe6d25342af9448628b006561c7385a22ca6c","kind":"audioinput","label":"","groupId":"7a86866423279d7b1e12dbe585a14a677a2f2df4e41ec5d388b6c90f7319e88d"}
Found device: {"deviceId":"b46cd34041256d2cf72ed6e8500f71beb698a01b8c47c7c04801c20c47630978","kind":"videoinput","label":"camera2 1, facing front","groupId":"b1bd1a6ed8a87cd07ca0fa84744ae515b1ab2bed61cc257765c37d3426269af7"}
Found device: {"deviceId":"39d63e8a9764261b73785c90beb58399997a5a4de56b3238fff6676c738331a6","kind":"videoinput","label":"camera2 3, facing front","groupId":"a23c2f0e311c0ca0c80a56a8b5ff7c1f8aa093df4f6ac080b051c1d95f60a94e"}
Found device: {"deviceId":"4d5fecf5a3eee5d41812bb6c34efe6d25342af9448628b006561c7385a22ca6c","kind":"videoinput","label":"camera2 2, facing back","groupId":"9b6b1a429e0db2d5094ddebe205d23309464650d8bcd585b2fe4ae8196b86f1c"}
Found device: {"deviceId":"86d4706b0bf160ff12fa75535173edcc68d4fa7ad5e00ec186cb1285ff22869d","kind":"videoinput","label":"camera2 0, facing back","groupId":"0de9556e1253763d7203b3b9e5db313cf89e05dd4bdd4ea0c5aff52d2952cf11"}
Found device: {"deviceId":"default","kind":"audiooutput","label":"","groupId":"default"}
Правильная камера имеет метку camera2 0, facing back и по какой-то причине Chrome всегда выбирает camera2 2, facing back.
Конечно, я мог бы жестко закодировать выбор камеры по ее метке, но это сработало бы только на Samsung Galaxy S10, и я хотел бы, чтобы мой код работал на любом устройстве, имеющем несколько камер с обратной стороной.
Я до сих пор не попробовал запустить свою страницу на iPhone 11 Pro (у которой есть 3 камеры, обращенные назад), но он работает правильно на Huawei Mate 30 Pro (4 камеры с обратной стороной) и Oppo Reno 9. Кроме того, проблема похоже связано с Google Chrome на * 1 071 *. Когда я открываю свою страницу в Firefox для Android, браузер просит меня выбрать, какую камеру следует использовать сразу после закрытия диалогового окна разрешения камеры и только если несколько камер удовлетворяют заданным ограничениям. Это вполне справедливо, поскольку позволяет выбрать правильную камеру для сканирования. Я не пытался открыть свою страницу в браузерах Samsung Inte rnet и Opera (пока).
Поскольку Google Chrome является самым популярным веб-браузером на Android, я бы даже остался доволен Chrome -specifi c решение, но, конечно, лучше всего было бы получить ответ, который работает везде.
EDIT
После комментария от jib , я Я также пытался использовать focusDistance с
focusDistance: { min: 0.05, ideal: 0.12, max: 0.3 }
, и это не помогло.
Я также попытался зарегистрировать выходы getSettings и getCapabilities с помощью следующего фрагмент:
const devices = await navigator.mediaDevices.enumerateDevices();
let videoDevices: Array< MediaDeviceInfo > = [];
devices.forEach( ( device: MediaDeviceInfo ) => {
if ( device.kind == 'videoinput' ) {
console.log( "Found video device: " + JSON.stringify( device ) );
videoDevices.push( device );
}
});
console.log( '' );
// open every video device and dump its characteristics
for ( let i in videoDevices ) {
const device = videoDevices[ i ];
console.log( "Opening video device " + device.deviceId + " (" + device.label + ")" );
const stream = await navigator.mediaDevices.getUserMedia( { video: { deviceId: { exact: device.deviceId } } } );
stream.getVideoTracks().forEach( track => {
const capabilities = track.getCapabilities();
console.log( "Track capabilities: " + JSON.stringify( capabilities ) );
const settings = track.getSettings();
console.log( "Track settings: " + JSON.stringify( settings ) );
console.log( '' );
}
)
stream.getTracks().forEach( track => track.stop() );
}
Вывод выглядит следующим образом:
Found video device: {"deviceId":"b46cd34041256d2cf72ed6e8500f71beb698a01b8c47c7c04801c20c47630978","kind":"videoinput","label":"camera2 1, facing front","groupId":"500dd57c6795399100a5ca8bf7f0cc4d7ed8b1bcb0877101d1bef7eb74921868"}
Found video device: {"deviceId":"39d63e8a9764261b73785c90beb58399997a5a4de56b3238fff6676c738331a6","kind":"videoinput","label":"camera2 3, facing front","groupId":"245693c8d34be77fe2f15be31b6054a19edb8ea9ed4116d966d2a03695bebebe"}
Found video device: {"deviceId":"4d5fecf5a3eee5d41812bb6c34efe6d25342af9448628b006561c7385a22ca6c","kind":"videoinput","label":"camera2 2, facing back","groupId":"c219595df2c2a430aea7007f64e6ce8fbfa783b038cf53069336361cc07e71af"}
Found video device: {"deviceId":"86d4706b0bf160ff12fa75535173edcc68d4fa7ad5e00ec186cb1285ff22869d","kind":"videoinput","label":"camera2 0, facing back","groupId":"96a68b6d6429786317e3b2c4773082604c5ab9a5cdaaf49c481878e40d67e987"}
Opening video device b46cd34041256d2cf72ed6e8500f71beb698a01b8c47c7c04801c20c47630978 (camera2 1, facing front)
Track capabilities: {"aspectRatio":{"max":3216,"min":0.0004528985507246377},"deviceId":"b46cd34041256d2cf72ed6e8500f71beb698a01b8c47c7c04801c20c47630978","facingMode":["user"],"frameRate":{"max":30,"min":0},"groupId":"500dd57c6795399100a5ca8bf7f0cc4d7ed8b1bcb0877101d1bef7eb74921868","height":{"max":2208,"min":1},"resizeMode":["none","crop-and-scale"],"width":{"max":3216,"min":1}}
Track settings: {"aspectRatio":1.3333333333333333,"deviceId":"b46cd34041256d2cf72ed6e8500f71beb698a01b8c47c7c04801c20c47630978","facingMode":"user","frameRate":30,"groupId":"500dd57c6795399100a5ca8bf7f0cc4d7ed8b1bcb0877101d1bef7eb74921868","height":480,"resizeMode":"none","width":640}
Opening video device 39d63e8a9764261b73785c90beb58399997a5a4de56b3238fff6676c738331a6 (camera2 3, facing front)
Track capabilities: {"aspectRatio":{"max":3968,"min":0.0003654970760233918},"deviceId":"39d63e8a9764261b73785c90beb58399997a5a4de56b3238fff6676c738331a6","facingMode":["user"],"frameRate":{"max":30,"min":0},"groupId":"245693c8d34be77fe2f15be31b6054a19edb8ea9ed4116d966d2a03695bebebe","height":{"max":2736,"min":1},"resizeMode":["none","crop-and-scale"],"width":{"max":3968,"min":1}}
Track settings: {"aspectRatio":1.3333333333333333,"deviceId":"39d63e8a9764261b73785c90beb58399997a5a4de56b3238fff6676c738331a6","facingMode":"user","frameRate":30,"groupId":"245693c8d34be77fe2f15be31b6054a19edb8ea9ed4116d966d2a03695bebebe","height":480,"resizeMode":"none","width":640}
Opening video device 4d5fecf5a3eee5d41812bb6c34efe6d25342af9448628b006561c7385a22ca6c (camera2 2, facing back)
Track capabilities: {"aspectRatio":{"max":4608,"min":0.00028935185185185184},"deviceId":"4d5fecf5a3eee5d41812bb6c34efe6d25342af9448628b006561c7385a22ca6c","facingMode":["environment"],"frameRate":{"max":60,"min":0},"groupId":"c219595df2c2a430aea7007f64e6ce8fbfa783b038cf53069336361cc07e71af","height":{"max":3456,"min":1},"resizeMode":["none","crop-and-scale"],"width":{"max":4608,"min":1}}
Track settings: {"aspectRatio":1.3333333333333333,"deviceId":"4d5fecf5a3eee5d41812bb6c34efe6d25342af9448628b006561c7385a22ca6c","facingMode":"environment","frameRate":60,"groupId":"c219595df2c2a430aea7007f64e6ce8fbfa783b038cf53069336361cc07e71af","height":480,"resizeMode":"none","width":640}
Opening video device 86d4706b0bf160ff12fa75535173edcc68d4fa7ad5e00ec186cb1285ff22869d (camera2 0, facing back)
Track capabilities: {"aspectRatio":{"max":4032,"min":0.00033068783068783067},"deviceId":"86d4706b0bf160ff12fa75535173edcc68d4fa7ad5e00ec186cb1285ff22869d","facingMode":["environment"],"frameRate":{"max":60,"min":0},"groupId":"96a68b6d6429786317e3b2c4773082604c5ab9a5cdaaf49c481878e40d67e987","height":{"max":3024,"min":1},"resizeMode":["none","crop-and-scale"],"width":{"max":4032,"min":1}}
Track settings: {"aspectRatio":1.3333333333333333,"deviceId":"86d4706b0bf160ff12fa75535173edcc68d4fa7ad5e00ec186cb1285ff22869d","facingMode":"environment","frameRate":60,"groupId":"96a68b6d6429786317e3b2c4773082604c5ab9a5cdaaf49c481878e40d67e987","height":480,"resizeMode":"none","width":640}
Так что, по-прежнему, нечего различать guish между camera2 0, facing back и camera2 2, facing back, кроме разных Максимальное доступное разрешение.
Я также пробовал использовать браузер Samsung Inte rnet, и он работает так же, как Google Chrome.
Любые другие идеи (кроме , повторяющиеся по всем задняя камера и выбор камеры с наименьшим разрешением )?