Maximale video-Auflösung mit getUserMedia

Ich versuche, höchste video-Auflösung wie möglich durch JS navigator.getUserMedia. Ich weiß, über Zwänge, aber nicht wissen, wie man richtig in meinem Fall.

Das problem ist es sieht aus wie es gibt keinen Weg zu sagen "ich möchte ein video bei maximaler Auflösung". Anstatt also, ich bin versucht zu sagen, "ich will video nicht weniger als die ganz große Lösung".

Wenn ich versuche minWidth: 1600 Chrome gibt mir 1280×720 video (höchste mögliche für meine Kamera, glaube ich). Aber was ist, wenn Benutzer eine Kamera mit höherer Auflösung? Daher bitte ich um minWidth: 2048 video und Chrome gibt nur 640×480.

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

Dies ist online-Beispiel: http://jsbin.com/kibeza/1/watch?js,Ausgabe

Und es ist tatsächlich ein problem: Chrome nicht weiß, math. Es denke, was 1600 ist größer als 2048. Ich kann nicht Fragen, für video "nicht weniger als 100500", weil in diesem Fall werde ich kommen standard mit geringer Auflösung. Ich kippe ask video "nicht weniger als einige sinnvolle kleine Lösung", denn es kann sein, Nutzer mit höherer Auflösung, und ich will eine höhere Auflösung.

Haben Sie gesehen, dieser Fehler?
das ist komisch, wenn ich eine Auflösung, die zu groß ist bekomme ich eine "ConstraintNotSatisfiedError" und kein video zurückgegeben

InformationsquelleAutor homm | 2014-12-11

14

Weiß ich noch nicht richtig beantworten, aber ich Tue das folgende:
```
video: {
  optional: [
    {minWidth: 320},
    {minWidth: 640},
    {minWidth: 1024},
    {minWidth: 1280},
    {minWidth: 1920},
    {minWidth: 2560},
  ]
}
```
Während einzelne minWidth: 2560 Ausdruck setzt die Auflösung auf Standard, Serie minWidth Ausdruck, der browser braucht immer maximale Auflösung auf getestete hardware.
- Noch keine news darüber?
- Dies ist die richtige Antwort für Chrome, für jetzt. Min - /max-constraints der form reicht von rechtlichen Werte, die der browser ist noch frei zu wählen, einen beliebigen Wert innerhalb, so dass die einzige Möglichkeit, Einfluss auf die Richtung wird mit zunehmend engeren oder weiteren Bereichen. Dies funktioniert, weil der browser versucht, kumulativ erfüllen, so viele Bereiche wie Sie können, beginnend mit dem ersten, und überspringen diejenigen, die über-beschränken. Chrome wird hoffentlich wechseln Sie zu der standard bald, die Griffe dieser mehr intuitiv.
- das ist nicht so toll, wenn die native Breite größer ist als die 2560 oder ist nicht in der obigen Liste.
- Gibt es ein update auf diese oder ist das noch der beste Weg, um Chrome zu verwenden, ist die maximale Auflösung?
- Ich verstehe deine Sorge, aber beachten Sie, dass es ein Videostreams, kein Fotostream. Es gibt keine Telefone oder webcams, die gehen nicht höher als 4K nur noch.
- Ja, nicht die syntax veraltet sowieso so ist dies nicht garantiert, um zu arbeiten in der Zukunft?
- Ich fand dies funktioniert aber tötet jedes Gerät Vorliebe, wenn es um die Vorder-oder Rückseite Kameras. Ich werde fügen Sie einen Kommentar unten, auch wenn es nicht die Lösung per se
InformationsquelleAutor homm
11

Verwenden:
```
var constraints = { 
    video: {
        width: { ideal: 4096 },
        height: { ideal: 2160 } 
    } 
};
```
Dadurch wird der browser mit der maximalen Auflösung von bis zu 4K. Funktioniert in Chrome, 63, Rand 41 und Firefox 58.

Unter Berufung auf MDN in Bezug auf die Nutzung von ideal:

Einen idealen Wert, wenn verwendet, hat die Schwerkraft, was bedeutet, dass der browser
werde versuchen zu finden, die Einstellung (und die Kamera, wenn Sie mehr als eine haben),
mit dem kleinsten fitness-Entfernung von der idealen Werte gegeben.
- Dieser Ansatz ist wohl der einfachste, und Sie haben nicht einmal zu verwenden, die "ideal" - keywords, da dies impliziert, wenn nur die Angabe von Breite und Höhe.
- Funktioniert wie ein Charme. Couldnt wir sogar dieses 999999 für beide?
InformationsquelleAutor Honza Kalfus

Hatte ich abwechslungsreiche Erfolg mit der Festlegung ideal Abmessungen und versucht zu zwingen, die 'zurück' - Kamera.

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

InformationsquelleAutor sidonaldson

Immer noch ich habe nicht gefunden eine gute API, um die maximale video-Auflösung mit getUserMedia.

Aber hier bin ich teilen, meine Idee zu bekommen, maximal unterstützte video-Auflösung der das angeschlossene Gerät mit Binäre Suche Algorithmus und es funktioniert Super.

Hier sind die Schritte, um diese Arbeit zu tun,

Store einige standard-Auflösungen in einem Array, die Aufrechterhaltung aufsteigend
um .
Set leftIndex = 0 und rightIndex = Größe der Auflösung array.
Überprüfen midIndex = (Links+rechts)/2-Auflösung unterstützt oder nicht, und
ändern Sie die Links und rechts basierend auf dem Ergebnis.

Hier bin ich teilen, meine Umsetzung:

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

Einfach anrufen Funktion FindMaximum_WidthHeight_ForCamera(). Beim Betrieb wird abgeschlossen sein, dann maximale video-Auflösung gespeichert werden, selectedWidth und selectedHeight Variablen. Hier bin ich auch anfügen der Ausgabe der Konsole für mein Gerät:

//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

Habe ich getestet, diese Umsetzung mit Chrome Version 57.0.2987.110 (64-bit) und Logitech, Inc. Webcam C270. Aber ich denke diese Lösung sollte in jedem Szenario. Danke.

Dies scheint wie eine ziemlich gute Lösung, aber ich bin immer 1280x900 für Motorola G2 und Motorola G3, und Ihre max video-Auflösung 1280x720
Tun Sie wirklich das video nach der Auswahl der Auflösung durch diesen Algorithmus. Es gibt zwei Szenarios für dein problem.... i) Sie sind die erste video ii), Sie sind nicht immer video, nach der Auswahl der Auflösung

InformationsquelleAutor RajibTheKing

Stimme ich mit homm, seinen Ansatz gut funktioniert: 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 = '';
    }
}

In meinem Fall Opera und Chrome bieten eine maximale Auflösung von 1280×720.

Firefox gibt 640×480 standardmäßig, aber Sie können verbessern, seine Auflösung sowie bis zu 1280×720. Hier gehen Sie:

Maximale video-Auflösung mit getUserMedia

Eigentlich ist Firefox vor Chrome hier, und unterstützt die Spezifikation, so ist dies ein Stück Kuchen: { video: { width: 9999, height: 9999 } } wird Ihnen die höchstmögliche Auflösung. Siehe in diesem Zusammenhang Antwort

InformationsquelleAutor evpozdniakov

0

Können Sie überprüfen, dieses Dienstprogramm zum überprüfen der verfügbaren Auflösungen Ihrer Geräte:

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

Es ist nützlich für die Problembehandlung.

Hoffe, Sie finden es interessant!

InformationsquelleAutor Andrés

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.