javascript - mediadevices - Obtenga la máxima resolución de video con getUserMedia

jquery webcam html5

Question

Estoy tratando de obtener la resolución de video más alta posible a través de JS navigator.getUserMedia . Sé sobre las limitaciones, pero no sé cómo elegir bien en mi caso.

El problema es que parece que no hay forma de decir "Quiero un video con la resolución máxima". Por lo tanto, trato de decir "Quiero video con una resolución no muy grande".

Cuando intento minWidth: 1600 , Chrome me devuelve 1280 × 720 de video (lo más alto posible para mi cámara, creo). Pero, ¿y si el usuario tiene una cámara con mayor resolución? Así que estoy pidiendo un minWidth: 2048 video, y Chrome solo un 640 × 480.

var constraints = {
  video: {
    optional: [
    {minWidth: 2048}
    ]
  }
};

Este es un ejemplo en línea: http://jsbin.com/kibeza/1/watch?js,output

Y hay un problema real: Chrome no sabe matemáticas. Pienso que 1600 es mayor que 2048. No puedo pedir un video "no menos de 100500", porque en este caso obtendré una baja resolución estándar. No puedo pedir un video "no menos de una pequeña resolución razonable", porque puede haber usuarios con una resolución más alta y quiero obtener una resolución más alta.

Answer 1

Aún así, no he encontrado ninguna API buena para obtener la máxima resolución de video con getUserMedia .

Pero aquí estoy compartiendo mi idea para obtener la máxima resolución de video compatible del dispositivo conectado usando el algoritmo de búsqueda binaria y está funcionando muy bien.

Estos son los pasos para hacer este trabajo,

• Almacene algunas resoluciones estándar en una matriz, manteniendo el orden ascendente.
• Establezca leftIndex = 0 y rightIndex = tamaño de la matriz de resolución.
• Compruebe midIndex = (izquierda + derecha) / 2 resolución compatible o no, y modifique izquierda y derecha según el resultado.

Aquí estoy compartiendo mi implementación:

var ResolutionsToCheck = [
                {width: 160, height:120},
                {width: 320, height:180},
                {width: 320, height:240},
                {width: 640, height:360},
                {width: 640, height:480},
                {width: 768, height:576},
                {width: 1024, height:576},
                {width: 1280, height:720},
                {width: 1280, height:768},
                {width: 1280, height:800},
                {width: 1280, height:900},
                {width: 1280, height:1000},
                {width: 1920, height:1080},
                {width: 1920, height:1200},
                {width: 2560, height:1440},
                {width: 3840, height:2160},
                {width: 4096, height:2160}
            ];

var left = 0;
var right = ResolutionsToCheck.length;
var selectedWidth;
var selectedHeight;
var mid;

function FindMaximum_WidthHeight_ForCamera()
{
    console.log("left:right = ", left, ":", right);
    if(left > right)
    {
        console.log("Selected Height:Width = ", selectedWidth, ":", selectedHeight);
        return;
    }

    mid = Math.floor((left + right) / 2);

    var temporaryConstraints = {
        "audio": true,
        "video": {
            "mandatory": {
            "minWidth": ResolutionsToCheck[mid].width,
            "minHeight": ResolutionsToCheck[mid].height,
            "maxWidth": ResolutionsToCheck[mid].width,
            "maxHeight": ResolutionsToCheck[mid].height
            },
        "optional": []
        }
    }

    navigator.mediaDevices.getUserMedia(temporaryConstraints).then(checkSuccess).catch(checkError);
}

function checkSuccess(stream)
{
    console.log("Success for --> " , mid , " ", ResolutionsToCheck[mid]);
    selectedWidth = ResolutionsToCheck[mid].width;
    selectedHeight = ResolutionsToCheck[mid].height;

    left = mid+1;

    for (let track of stream.getTracks()) 
    { 
        track.stop()
    }

    FindMaximum_WidthHeight_ForCamera();
}
function checkError(error)
{
    console.log("Failed for --> " + mid , " ", ResolutionsToCheck[mid],  " ", error);
    right = mid-1;

    FindMaximum_WidthHeight_ForCamera();
}

Simplemente llame a la función FindMaximum_WidthHeight_ForCamera () . Cuando la operación se complete, la resolución máxima de video se almacenará en Ancho seleccionado y en Variables de altura seleccionadas . Aquí también estoy adjuntando salida de consola para mi dispositivo:

//Console Output
left:right =  0 : 17
Success for -->  8   Objectheight: 768width: 1280__proto__: Object
left:right =  9 : 17
Failed for --> 13   Objectheight: 1200width: 1920__proto__: Object   NavigatorUserMediaError
left:right =  9 : 12
Success for -->  10   Objectheight: 900width: 1280__proto__: Object
left:right =  11 : 12
Failed for --> 11   Objectheight: 1000width: 1280__proto__: Object   NavigatorUserMediaError
left:right =  11 : 10
Selected Height:Width =  1280 : 900

He probado esta implementación utilizando la versión de Chrome 57.0.2987.110 (64 bits) y la cámara web C270 de Logitech, Inc. Pero creo que esta solución debería funcionar en cada escenario. Gracias.

Answer 2

Estoy de acuerdo con homm, su enfoque funciona bien: https://jsfiddle.net/evpozdniakov/c84ksucw/

var getUserMediaPrefixed,
    videoStream,
    videoTag;

setGumPrefix();

if (!getUserMediaPrefixed) {
    logMessage(''Sorry, your browser doesn/'t support getUserMedia interface'');
}
else {
    runCamera();
}

function dealWithStream(stream) {
    videoStream = stream;

    if (!videoTag) {
        videoTag = document.createElement(''video'');
        videoTag.addEventListener(''resize'', videoEventListener);
    }

    videoTag.src = window.URL.createObjectURL(stream);
    videoTag.play();
}

function handleError(e) {
    if (e.name == ''PermissionDeniedError'') {
        logMessage(''It looks like you/'ve denied access to the camera.'');
    }
    else if (e.name == ''SourceUnavailableError'') {
        logMessage(''It looks like your camera is <b>used</b> by another application.'');
    }
    else {
        logMessage(''The camera is unavailable. The error message is: '' +e.message);
    }
}

function logMessage(msg) {
    var p = document.createElement(''p'');

    p.innerHTML = msg;

    document.getElementById(''output'').appendChild(p);
}

function runCamera() {
    var constraints = {
        audio: false,
        video: {
            optional: [
                {minWidth: 320},
                {minWidth: 640},
                {minWidth: 800},
                {minWidth: 900},
                {minWidth: 1024},
                {minWidth: 1280},
                {minWidth: 1920},
                {minWidth: 2560}
            ]
        }
    };

    navigator[getUserMediaPrefixed](constraints, dealWithStream, handleError);
}

function setGumPrefix() {
    if (navigator.getUserMedia) {
        getUserMediaPrefixed = ''getUserMedia'';
    }
    else if (navigator.webkitGetUserMedia) {
        getUserMediaPrefixed = ''webkitGetUserMedia'';
    }
    else if (navigator.mozGetUserMedia) {
        getUserMediaPrefixed = ''mozGetUserMedia'';
    }
    else if (navigator.msGetUserMedia) {
        getUserMediaPrefixed = ''msGetUserMedia'';
    }
}

function videoEventListener() {
    if (videoTag.videoWidth) {
        logMessage(''Best captured video quality in your browser is '' +videoTag.videoWidth+ ''×'' +videoTag.videoHeight);

        // stop stream
        videoStream.stop();
        videoTag.src = '''';
    }
}

En mi caso, Opera y Chrome ofrecen una resolución máxima de 1280 × 720.

Firefox da 640 × 480 por defecto, pero puedes mejorar su resolución también hasta 1280 × 720. Aqui tienes:

Answer 3

Puede consultar esta utilidad para verificar las resoluciones disponibles de sus dispositivos:

https://webrtchacks.github.io/WebRTC-Camera-Resolution/

Es útil para la resolución de problemas.

¡Espero que lo encuentres interesante!

Answer 4

Todavía no sé la respuesta correcta, pero hago lo siguiente:

video: {
  optional: [
    {minWidth: 320},
    {minWidth: 640},
    {minWidth: 1024},
    {minWidth: 1280},
    {minWidth: 1920},
    {minWidth: 2560},
  ]
}

Mientras que la minWidth: 2560 single minWidth: 2560 restablece la resolución a la predeterminada, la serie de expresión minWidth hace que el navegador siempre tome la resolución máxima en el hardware probado.

Answer 5

Tuve un éxito variado al definir ideal dimensiones ideal y al intentar forzar la cámara ''trasera''.

$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);
});

Answer 6

Utilizar:

var constraints = { 
    video: {
        width: { ideal: 4096 },
        height: { ideal: 2160 } 
    } 
};

Esto hará que el navegador use la resolución máxima disponible, hasta 4K. Funciona en Chrome 63, Edge 41 y Firefox 58.

Citando MDN respecto al uso de ideal :

Un valor ideal, cuando se utiliza, tiene gravedad, lo que significa que el navegador intentará encontrar la configuración (y la cámara, si tiene más de una), con la distancia de aptitud física más pequeña de los valores ideales dados.