У меня есть код HTML JS для доступа к камере ap c, а также для съемки и загрузки. Теперь я хочу, чтобы камера остановилась после загрузки картинки. Прямо сейчас камера перестает получать канал после того, как я загружаю изображение, но веб-страница все еще держит камеру. Я не хочу, чтобы камера была выпущена сразу после загрузки картинки. Я новичок в этом и мне нужна помощь в проекте. Следующее, что сейчас происходит, - мой код запускается после нажатия кнопки «Пуск камеры», но я хочу, чтобы он запускался сразу после открытия веб-сайта (без необходимости нажимать какие-либо кнопки, кроме как разрешить или запретить использование камеры).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Display Webcam Stream</title>
</head>
<body>
<div class="camera">
<video id="video">Video stream not available.</video>
<button onclick="startRecording()">Start Camera</button>
<button onclick="capturePhoto()">Take photo</button>
<button onclick="download()">Download photo</button>
<button onclick="closeWin()">Close Window </button>
</div>
<canvas id="canvas">
</canvas>
<script>
var width = 320; // We will scale the photo width to this
var height = 0; // This will be computed based on the input stream
var streaming = false;
var video = null;
var canvas = null;
//Starting webcam
function startRecording() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
if (isNaN(height)) {
height = width / (4/3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
}
// Capture a photo by fetching the current contents of the video
function capturePhoto() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
} else {
makePhoto();
}
}
// Download photo in canvas
function download(){
var link = document.createElement('a');
link.download = 'filename.png';
link.href = document.getElementById('canvas').toDataURL()
link.click();
var self = this;
var stream = self.video.srcObject;
stream.getTracks().forEach(
function(track) {
track.stop();
});
}
function closeWin(){
myWindow.close();
}
//function download() {
//var self = this;
//self.video.stop();
//var link = document.createElement('a');
//link.download = 'filename.png';
//link.href = document.getElementById('camera-canvas').toDataURL('image/png');
//link.click();
//}
</script>
</body>
</html>