隐藏HTML视频元素

问题描述

我正在使用webcam easy js向客户拍照。我需要隐藏相机,因为客户不应该知道正在拍摄。我试图使用hide()函数通过 jQuery 隐藏该元素,但是当捕捉成功后,我在调用Ajax时却得到了null。我尝试使用 css 对其进行隐藏,但是它不起作用,并尝试使用display:none,visible:hidden等。 你能帮助我吗?对不起,英语不好。

  • 用于捕捉的脚本,并调用ajax servlet来处理图像:
$(document).ready(function(){
    var webCamElement = document.getElementById("camera");
    var canvasElement = document.getElementById("canvas");
    const webcam = new Webcam(webCamElement,'user',canvasElement,null);
    
    //$('#camera').style.display="none";
    //$('#camera').attr('visibility','hidden');
    //$('#camera').attr('display','block');
    webcam.start();
        
    $('#checker').click(function(){
        picture = webcam.snap();
        alert(picture);
        $.post('TestCamera',{param: picture},function(response){
            if (response === 'error'){
                alert('Error you should stay in front of camera');
            }else{
                window.location.replace('QuestionAndAnalyze.jsp'); /* redirect*/
            }
        }); /*END servletCall*/
    }); /*END click*/
    
});/* END ready*/

HTML元素:

<video id="camera"></video>
<canvas id="canvas"></canvas>
<input type="checkBox" name="checkVision" id="checker">
<label for="checkVision">I read tips</label>

<form action="startSurvey" method="GET">
    <button type="submit"></button>
</form>

我想隐藏<video id="camera">并将其用于传递给ajax servlet调用

解决方法

最有可能的是,浏览器将请求使用相机的许可。这样您的客户就会知道他/她正在被拍摄。

enter image description here

您至少可以尝试

$('#camera').css('visibility','hidden');

代替

$('#camera').attr('visibility','hidden');

演示-https://codepen.io/vyspiansky/pen/xxVVavN