Блог

Я делаю веб-сайт, чтобы сделать фотографию с помощью мобильного телефона и обработать ее для распознавания.

Вот код javascript:

 // Set constraints for the video stream
var constraints = { video: { facingMode: "environment", width: { ideal: 3000 }, height: { ideal: 3000 } }, audio: false };

// Define constants
const cameraView = document.querySelector("#camera--view"),
      cameraSensor = document.querySelector("#camera--sensor"),
      cameraTrigger = document.querySelector("#camera--trigger")
// Access the device camera and stream to cameraView
function cameraStart() {
    navigator.mediaDevices
        .getUserMedia(constraints)
        .then(function(stream) {
        track = stream.getTracks()[0];
        cameraView.srcObject = stream;
    })
    .catch(function(error) {
        console.error("Oops. Something is broken.", error);
    });
}
// Take a picture when cameraTrigger is tapped
cameraTrigger.onclick = function() {
    cameraTrigger.disabled = true;
    cameraTrigger.style.visibility = "hidden";
    cameraView.pause();
    track.stop();
    cameraSensor.width = cameraView.videoWidth;
    cameraSensor.height = cameraView.videoHeight;
    cameraSensor.getContext("2d").drawImage(cameraView, 0, 0);
    document.getElementById("imagen").value = cameraSensor.toDataURL("image/jpeg",1.0);
    document.getElementById("bot").click();

};

window.addEventListener("load", cameraStart, false); 
  

Я установил идеальную ширину и высоту на 3000, этого достаточно для того, что я ищу, до этого у меня была проблема, что он искал некоторые стандартные разрешения, а качество было слишком низким.
Однако это работает только для одного мобильного телефона.
Я пытаюсь использовать разные мобильные телефоны, и я получаю только изображения 3000×3000 с одним one , у которого лучшая камера. Другие мобильные устройства возвращают изображение размером 2000×1000 более или менее, но их камера имеет разрешение 13Mpx, и если я сделаю снимок с помощью приложения, результат будет 4000×3000.

Есть идеи? Заранее большое вам спасибо

Вы наблюдаете, как .getUserMedia() работают эти ограничения, когда вы задаете ideal значения. Подсистема ввода видео вашего браузера и устройства делает все возможное, чтобы соответствовать тому, что вы хотите. Но если он не может соответствовать тому, что вы хотите, он даст вам то, что он может сделать.

Если вы задаете exact ограничения, например, такие, как это, вы можете сделать .getUserMedia() сбой, а не дать вам что-то отличное от того, что вы хотите.

 var constraints = { 
             video: { 
                    facingMode: "environment",
                    width:  { exact: 3000 }, 
                    height: { exact: 3000 } },
            audio: false };
  

Если ваше веб-приложение предназначено для запуска на множестве разных устройств, вы можете сделать что-то подобное, чтобы оно не сработало, если подсистема камеры недостаточно хороша для вашего приложения.

 var constraints = { 
             video: { 
                    facingMode: "environment",
                    width:  { min: 1920, ideal: 3000 }, 
                    height: { min: 1080, ideal: 3000 } },
            audio: false };
  

Во всех случаях вы должны, как и раньше, посмотреть .videoWidth и .videoHeight определить, что на самом деле дала вам подсистема камеры.

Приложения, предназначенные для веб-камер и камер мобильных устройств, должны быть гибкими в отношении размеров получаемых изображений. Качество и разрешающая способность камер в дикой природе сильно варьируются.

К сожалению, веб-приложение, требующее очень больших размеров изображения, вряд ли будет очень полезным в дикой природе.