Почему мой веб-сайт не появится?

Question

Я попытался проверить код ниже на устройстве Android, это не сработало (кнопка переключения появилась, но выход камеры не был.). Затем я решил протестировать его на Mac, и он работал (он просто показывал выход камеры и кнопку, кнопка ничего не делала, потому что нет задней камеры.). Вот мой код (Javascript часть его.):

var constraints = { 
    audio: true, 
    video: { 
     width: 1280, 
     height: 720 
    } 
}; 
navigator.mediaDevices.getUserMedia(constraints).then(function(mediaStream) { 
    var video = document.querySelector('#webcam'); 
    video.srcObject = mediaStream; 
    video.onloadedmetadata = function(e) { 
     video.play(); 
    }; 
}).catch(function(err) { 
    console.log(err.name + ": " + err.message); 
}); 
var front = false; 
document.getElementById('flip-button').onclick = function() { 
    front = !front; 
}; 
var constraints = { 
    video: { 
     facingMode: (front ? "user" : "environment") 
    } 
}; 

Вот HTML часть моего кода:

<video id="webcam"> 
</video> 
<button Id="flip-button">switch 
</button> 

вот CSS часть моего кода:

#webcam {} #flip-button { 
    background-color: #202060; 
    height: 15%; 
    width: 20%; 
    border: none; 
    margin-left: 40%; 
} 

Спасибо за ваше время.

Answer 1

Вы ошиблись. Заменить #webcam на #video.

Или просто удалить эту строку:

var video = document.querySelector('#webcam'); 

последние работы, потому что идентификаторы неявно доступны в глобальном масштабе для обеспечения обратной совместимости. Некоторые люди нахмурились, но это аккуратно для аккуратных скриптов.

Рекомендации некоторых новичков: всегда проверяйте веб-консоль своего браузера на наличие ошибок. Здесь говорится:

TypeError: video is null 

, который был ключ, что результат от querySelector был null.

PS: У вас также есть два конкурирующих определения constraints, в результате чего ваш facingMode неиспользованными. Наконец, щелчок front не будет делать много, если только front не используется.