I'm struggling to display a photo captured from the webcam. The sizes are not matching up, and I can't pinpoint where the size is defined in the code. https://i.stack.imgur.com/Is921.png
The camera view is on the left, while the photo should be on the right with an exact match in size, but I'm having trouble locating where to adjust it. I've tried modifying various files without success. Here are the specific files I've attempted to work on.
JavaScript file:
document.addEventListener("DOMContentLoaded", function () {
// JavaScript code here
})
HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Unique Title Here</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="container">
<video id="camera-feed" autoplay></video>
<img src="#" alt="Photo" id="photo" />
</div>
</body>
</html>
CSS file:
.container {
margin: 0 auto;
}
#camera-feed {
width: 50%;
float: left;
}
#photo {
width: 50%;
float: right;
}
If anyone knows how to resize the photo to match the camera view, please provide guidance. Thank you!