He movido con éxito esta cámara de video que he escrito en HTML hacia la derecha, para que quede en el centro del formulario, pero me gustaría saber cómo puedo encontrar el centro exacto del formulario al encontrar el ancho total y dividir por dos en CSS. ¿Alguna idea sobre cómo puedo obtener el tamaño completo del ancho del formulario?
El siguiente es el código fuente:
<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>Puede asignar una segunda clase (o mejor, una identificación) al div, luego use css en esa clase/identificación para moverlo