首页 > 解决方案 > 在 Google Chrome 中使用 MediaStream API 更改 FocusMode 不起作用

问题描述

在 Google Chrome 浏览器中,我能够使用getUserMedia() API 获取连接的 USB 摄像头的实时信息。我有一个滑块来更改亮度值,这工作正常。我还希望focusMode从连续切换到手动(相机始终以连续focusMode开始)。

我有以下 Javascript 代码来更改 FocusMode。

const video_constraints ={};

//Create the following keys for Constraint
video_constraints.video = {};
video_constraints.video.width = {};
video_constraints.video.width.exact = 1920; //set video width
video_constraints.video.height = {};
video_constraints.video.height.exact = 1080; //set video height
video_constraints.video.frameRate = {};
video_constraints.video.frameRate.exact = 60; //set video frame rate

//Start stream
navigator.mediaDevices.getUserMedia(video_constraints).then(handleStreamSuccessCb).catch(handleStreamErrorCb);


function handleStreamSuccessCb()
{
    console.log("Got Stream");
        window.stream = stream;
        videoElement.srcObject = stream;
    getVideoCaps(stream);
}

function getVideoCaps(stream)
{

    var videoTrackArray = stream.getVideoTracks();
    var videoTrack = null;

    for (i=0; i<videoTrackArray.length; i++)
    {
        if (videoTrackArray[i].kind == "video")
        {
            console.log("Video track found");
            videoTrack = videoTrackArray[i];
            break;
        }
    }

    if (videoTrack != null)
    {
        setTimeout(() => {

        const capabilities = videoTrack.getCapabilities()
        console.log("Caps:");
        console.log(capabilities);

        //Brightness:
        if (capabilities.brightness)
        {
            //configure slider settings
            brightnessSliderUI.min = capabilities.brightness.min;
            brightnessSliderUI.max = capabilities.brightness.max;
            brightnessSliderUI.step = capabilities.brightness.step;
            brightnessSliderUI.value = videoTrack.getSettings().brightness;

            //set inital value
            brightnessSliderValueUI.value = brightnessSliderUI.value;

            //slider change listener
            brightnessSliderUI.oninput = function() {
                    brightnessSliderValueUI.value = brightnessSliderUI.value;
                    videoTrack.applyConstraints({advanced : [{brightness: brightnessSliderUI.value}] });
                }

        }
        else
        {
            console.log("brightnessNot supported");
        }


        //Focus Mode
                if (capabilities.focusMode)
                {   
            console.log(videoTrack.getSettings());// By default continuous value is set for focusMode

            focusButtonUI.onclick = function(){
                console.log("focusButton Clicked");

                videoTrack.applyConstraints({advanced : [{focusMode: "manual"}]});
                // I am not able to set focusMode to manual with the above statement
                            console.log(videoTrack.getSettings());

            }
        }
      }, 500);
    }
    else
    {
        showErrorDialog("No Video track found in the stream");
    }
}

通过下面的行,我试图切换focusMode:

videoTrack.applyConstraints({advanced : [{focusMode: "manual"}]});

但这个焦点仍然处于连续模式。

有人可以告诉上面的代码有什么问题吗?预览时是否可以切换焦点模式?

标签: javascriptw3cgetusermediaimage-capturemediastream

解决方案


推荐阅读