Get maximum video resolution with getUserMedia

后端 未结 7 1103
天命终不由人
天命终不由人 2020-12-13 18:17

I\'m trying to get highest video resolution as possible through JS navigator.getUserMedia. I know about constraints, but don\'t know how to choose right in my c

7条回答
  •  臣服心动
    2020-12-13 18:42

    I had varied success with defining ideal dimensions and trying to force the 'back' camera.

    $video = document.getElementById('video')
    
    //declare ideal values
    var constraints = {
        audio: false,
        video: {
            width: { ideal: 1280 },
            height: { ideal: 1024 },
            facingMode: "environment"
        }
    };
    
    // enumerate devices and select the first camera (mostly the back one)
    navigator.mediaDevices.enumerateDevices().then(function(devices) {
        for (var i = 0; i !== devices.length; ++i) {
            if (devices[i].kind === 'videoinput') {
                console.log('Camera found: ', devices[i].label || 'label not found', devices[i].deviceId || 'id no found');
                videoConstraints.deviceId = { exact: devices[i].deviceId }
            }
        }
    });
    
    //first up the stream
    navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
        $video.srcObject = stream;
        // log the real size
        console.log($video.videoWidth, $video.videoHeight);
    }).catch(function(err) {
        console.log(err.name + ': ' + err.message);
    });
    

提交回复
热议问题