Estoy buscando ocultar el feed de video de webgazer usando Javascript. El siguiente código muestra la fuente de video y cómo ocultar la fuente de video, ya que mi tarea es dar más espacio para mostrar diagramas y texto.
window.onload = function() { webgazer.setRegression('ridge') /* currently must set regression and tracker */ .setTracker('clmtrackr') .setGazeListener(gaze) .begin() .showPredictionPoints(true); var width = 320; var height = 240; var topDist = '100px'; var leftDist = '400px'; var setup = function() { var video = document.getElementById('webgazerVideoFeed'); video.style.display = 'block'; video.style.position = 'absolute'; video.style.top = topDist; video.style.left = leftDist; video.width = width; video.height = height; video.style.margin = '0px'; webgazer.params.imgWidth = width; webgazer.params.imgHeight = height; var overlay = document.createElement('canvas'); overlay.id = 'overlay'; overlay.style.position = 'absolute'; overlay.width = width; overlay.height = height; overlay.style.top = topDist; overlay.style.left = leftDist; overlay.style.margin = '0px'; document.body.appendChild(overlay); var cl = webgazer.getTracker().clm; function drawLoop() { requestAnimFrame(drawLoop); overlay.getContext('2d').clearRect(0, 0, width, height); if (cl.getCurrentPosition()) { cl.draw(overlay); } } drawLoop(); };Primero probaría una visibilidad "oculta" a través de estilos CSS en la configuración del objeto Video:
video.style.visibility = hidden;Otra opción es usar Opacidad para controlar la transparencia:
video.style.opacity = 0.0; //# range from min 0.0 (see-thru colors) up to 1.0 max (solid colors) Finalmente, puede probar Z-Index para colocar el objeto Video en una capa debajo de todo:
(considere tener un relleno de fondo a través de un Div/Forma/Imagen del tamaño de una pantalla, para ocultar el video detrás de él)
video.style.zIndex = -2; //# default layer level/index is 0