我使用的是安卓手机。当我尝试在网页中显示后置摄像头图像时,图像总是“放大”的。我希望相机图像与我在本机相机中看到的图像相同,但事实并非如此。
最近,我刚刚发现,当我列出摄像头来源时,有多个后置摄像头来源。所以我认为上面的“放大图像”仅仅是因为我使用了第一个默认的后置摄像头。
我想知道如何选择合适的后置摄像头?
在互联网上发现的同样的案例
很抱歉我的演讲很糟糕。如果你不明白我的问题,我可以进一步解释。
'use strict';
var videoElement = document.querySelector('video');
var audioSelect = document.querySelector('select#audioSource');
var videoSelect = document.querySelector('select#videoSource');
audioSelect.onchange = getStream;
videoSelect.onchange = getStream;
getStream().then(getDevices).then(gotDevices);
function getDevices() {
return navigator.mediaDevices.enumerateDevices();
}
function gotDevices(deviceInfos) {
window.deviceInfos = deviceInfos; // make available to console
console.log('Available input and output devices:', deviceInfos);
for (const deviceInfo of deviceInfos) {
const option = document.createElement('option');
option.value = deviceInfo.deviceId;
if (deviceInfo.kind === 'audioinput') {
option.text = deviceInfo.label || `Microphone ${audioSelect.length + 1}`;
audioSelect.appendChild(option);
} else if (deviceInfo.kind === 'videoinput') {
option.text = deviceInfo.label || `Camera ${videoSelect.length + 1}`;
videoSelect.appendChild(option);
}
}
}
function getStream() {
if (window.stream) {
window.stream.getTracks().forEach(track => {
track.stop();
});
}
const audioSource = audioSelect.value;
const videoSource = videoSelect.value;
const constraints = {
audio: {deviceId: audioSource ? {exact: audioSource} : undefined},
video: {deviceId: videoSource ? {exact: videoSource} : undefined}
};
return navigator.mediaDevices.getUserMedia(constraints).
then(gotStream).catch(handleError);
}
function gotStream(stream) {
window.stream = stream; // make stream available to console
audioSelect.selectedIndex = [...audioSelect.options].
findIndex(option => option.text === stream.getAudioTracks()[0].label);
videoSelect.selectedIndex = [...videoSelect.options].
findIndex(option => option.text === stream.getVideoTracks()[0].label);
videoElement.srcObject = stream;
}
function handleError(error) {
console.error('Error: ', error);
}
发布于 2021-08-27 20:47:45
我不确定这是不是正确的。但至少在此时此刻,它适用于我的Android手机,这些手机在修复之前就出现了问题。看起来0的那个总是合适的。
var constraints = {
facingMode: 'environment'
};
function gotDevices(mediaDevices) {
mediaDevices.forEach(mediaDevice => {
if (mediaDevice.kind === 'videoinput') {
if( !isIOS && mediaDevice.label.includes("0") ){
constraints = {
deviceId : mediaDevice.deviceId
};
return;
}
}
});
}
navigator.mediaDevices.enumerateDevices().then(gotDevices).then(function(){
navigator.mediaDevices
.getUserMedia({
audio: false,
video: constraints
})
.then(function(stream){
window.stream = stream;
video.srcObject = stream;
})
.catch(handleError);
});
https://stackoverflow.com/questions/68913868
复制相似问题