我正在尝试访问网络摄像头并显示视频流以捕获照片。我什至没有获得相机访问的同意，即弹出消息。我搜索了很多，但找不到任何东西。 下面是它的代码：
document.addEventListener("DOMContentLoaded", function() {
console.log("DOM fully loaded and parsed");
navigator.permissions.query({ name: 'camera' }).then(function(permission) {
if (permission.state === 'denied') {
alert("Camera access is denied. Please allow camera access and reload the page.");
}
});
const video = document.getElementById('video');
if (!video) {
console.error("Video element not found");
return;
} else {
console.log("Video element found");
}
const canvas = document.getElementById('canvas');
if (!canvas) {
console.error("Canvas element not found");
return;
} else {
console.log("Canvas element found");
}
const captureButton = document.getElementById('capture');
if (!captureButton) {
console.error("Capture button not found");
return;
} else {
console.log("Capture button found");
}
const photoData = document.getElementById('photo_data');
if (!photoData) {
console.error("Photo data input not found");
return;
} else {
console.log("Photo data input found");
}
// Get access to the camera
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
console.log("Camera stream obtained");
video.srcObject = stream;
video.play();
}).catch(function(error) {
console.log("Error accessing camera: " + error);
alert("Could not access the camera. Please check permissions.");
});
} else {
alert("getUserMedia is not supported by your browser.");
}
// Capture photo
captureButton.addEventListener("click", function() {
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, 320, 240);
const dataURL = canvas.toDataURL('image/png');
photoData.value = dataURL;
canvas.style.display = 'block';
});
});
function submitForm() {
const photoData = document.getElementById('photo_data').value;
if (!photoData) {
alert("Please capture a photo before submitting the form.");
return false;
}
return true; // Ensures the form is submitted
}
我尝试了很多，搜索了不同的文章，但找不到任何东西。请指导我。
并非所有浏览器都普遍支持
navigator.permissions.query({ name: 'camera' })navigator.mediaDevices.getUserMedia()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webcam Capture</title>
</head>
<body>
<video id="video" autoplay playsinline width="320" height="240"></video>
<button id="capture">Capture Photo</button>
<canvas id="canvas" width="320" height="240" style="display: none;"></canvas>
<input type="hidden" id="photo_data">
<button onclick="submitForm()">Submit</button>
<script>
document.addEventListener("DOMContentLoaded", async function () {
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const captureButton = document.getElementById('capture');
const photoData = document.getElementById('photo_data');
// Request access to the camera
try {
const stream = await navigator.mediaDevices.getUserMedia({ video: true });
video.srcObject = stream;
console.log("Camera stream obtained");
} catch (error) {
console.error("Error accessing camera: ", error);
alert("Could not access the camera. Please check permissions or use HTTPS.");
return;
}
// Capture photo
captureButton.addEventListener("click", () => {
const context = canvas.getContext('2d');
context.drawImage(video, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/png');
photoData.value = dataURL;
canvas.style.display = 'block';
alert("Photo captured!");
});
});
function submitForm() {
const photoData = document.getElementById('photo_data').value;
if (!photoData) {
alert("Please capture a photo before submitting the form.");
return false;
}
alert("Form submitted successfully with captured photo.");
return true;
}
</script>
</body>
</html>