Я пытаюсь получить доступ к веб-поток с использованием HTML5 и JavaScript, используя метод, описанный в этом блоге: https://www.kirupa.com/html5/accessing_your_webcam_in_html5.htmКак я могу сделать доступ к веб-камерам в JavaScript?
Он основан на методе navigator.getUserMedia.
Дело в том, что он просто работает. Иногда это происходит, иногда это не так. Даже эта веб-страница примера также больше не работает, если я перезагружаю страницу.
Что может отсутствовать, и как я могу отладить это? Что такое безупречный способ доступа к веб-камере в браузере? Меня даже не беспокоит совместимость с другими браузерами, дайте мне верный способ, который работает только в Chrome, и я возьму его!
создает Java-апплет или что-то лучшая альтернатива ?? ...
EDIT вот мой код:
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
<style>
#container {
margin: 0px auto;
width: 640px;
height: 480px;
border: 10px #333 solid;
}
#videoElement {
width: 640px;
height: 480px;
background-color: #666;
}
</style>
</head>
<body>
<div>
<a onClick="snapshot()">snap!</a>
</div>
<br/>
<div id="container">
<div>
<video autoplay="true" id="videoElement"></video>
</div>
</div>
<div>
<img width=320 height=240 src="" id="saida">
</div>
<canvas style="display:none;"></canvas>
<script>
var video = document.querySelector('#videoElement');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var localMediaStream = null;
<!--video.addEventListener('click', snapshot, false);-->
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia || navigator.oGetUserMedia;
if (navigator.getUserMedia) {
navigator.getUserMedia({audio: false, video: true}, handleVideo, videoError);
}
function handleVideo(stream) {
video.src = window.URL.createObjectURL(stream);
localMediaStream = stream
}
function videoError(e) {
console.log('foi malz');
}
function snapshot() {
if (localMediaStream) {
canvas.width = video.clientWidth;
canvas.height = video.clientHeight;
ctx.drawImage(video, 0, 0);
document.querySelector('#saida').src = canvas.toDataURL('image/webp');
}
}
</script>
</body>
</html>
EDIT2: Это, очевидно, какая-то ошибка в Chrome, в моей машине. Я сообщил об этом, посмотрим, что произойдет. Наверное, никогда не будет исправлено. В любом случае, он отлично работает в Firefox.
Я на самом деле проблемы с этой самой веб-страницы ... – dividebyzero
Некоторая дополнительная информация: Когда она не то, что происходит в том, что веб-камера свет включается, а потом я даже вижу маленький символ «rec» на вкладке браузера мигает ... Затем он отбрасывается, лампа выключается и значок исчезает, а окно изображения просто черное. – dividebyzero
И еще: если я продолжаю печатать 'localMediaStream' на консоли, он сначала отображает' active: true', когда ведомая веб-камера включена ... Затем, когда он отключается, он переходит в 'active: false'. – dividebyzero