I have successfully moved this video camera that I have written in HTML to the right, so that it is in the center of the form, but would like to know how I can find the exact center of the form by finding the total width an dividing it by two in CSS. Any ideas on how I can get the full size of the width of the form?
The following is the source code:
<html>
<head>
<title>Webcam</title>
<style>
div.video-wrap
{
position: relative;
left: 450px;
}
</style>
</head>
<body>
<h2>Image Recognition Login</h2>
<div class="video-wrap">
<video id="video" playsinline autoplay></video>
</div>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<p>Click the following <span class="glyphicon glyphicon-camera"></span>
button to take a facial image of yourself (be sure to look straight into the camera):</p>
<p>
<a href="#" class="btn btn-info btn-lg">
<span class="glyphicon glyphicon-camera"></span> Camera
</a>
</p>
</div>
<div class="controller">
<button id="snap">Capture</button>
</div>
<canvas id="canvas" width="640" height="480"></canvas>
<script>
'use strict';
const video = document.getElementById('video');
const canvas = document.getElementById('canvas');
const snap = document.getElementById('snap');
const errorMsgElement = document.getElementById('spanErrorMsg');
const constraints =
{
audio: true,
video:
{
width: 1280, height: 550
}
};
async function init()
{
try
{
const stream = await navigator.mediaDevices.getUserMedia(constraints);
handleSuccess(stream);
}
catch(e)
{
errorMsgElement.innerHTML = `navigator.getUserMedia.error:${e.toString()}`;
}
}
function handleSuccess(stream)
{
window.stream = stream;
video.srcObject = stream;
}
init();
var context = canvas.getContext('2d');
snap.addEventListener("click", function()
{
// drawImage(image, xCoordinate, yCoordinate, recWidth, recHeight)
context.drawImage(video, 0, 0, 640, 480);
});
</script>
</body>
</html>
You can assign a second class (or better, an id) to the div, then use css on that class/id to move it