Question

如何响应网络摄像头图像，我使用了webcam.js并在javascript中定义了高度和宽度，我尝试但捕获的图像没有响应。请帮忙。

我的js代码：

function setwebcam(){
    //$("#set_cam").hide();
    //$("#take_photo").show();
    Webcam.set({
        width: 320,
        height: 480,
        align:'center',
        image_format: 'jpeg',
        jpeg_quality: 100
    });
    Webcam.attach( '#my_camera' );

}

function setcoord(){


$('#cropbox').Jcrop({
  aspectRatio: 1,
  onSelect: updateCoords
}); 

}

  function updateCoords(c)
 {
   $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
 }

html代码：

<div class="col-lg-12" id="cap_div" style="background-color:#f9f9f9; box-shadow: 0 1px 4px #ccc;margin-bottom:95px;margin-top:20px; display:none;"   >





                    <div class="row">
                        <div class="col-sm-12">
                         <div class="col-md-12"  id="my_camera">

                         </div> 
                        </div>
                    </div>
                    <h3 class="text-center" style="font-size:36px;  color:#000000;">Click on captrure to get image </h3>

                    <hr>
                    <div class="row" style="z-index: 10; padding-bottom:  1em;">
                         <p class="text-center">
                             <a  onClick="take_snapshot();" id="take_photo" class="browse_btn flat-button orange-flat-button btn btn-warning2 btn-lg" ><i class="fa fa-camera" aria-hidden="true"></i>
  Capture </a>
                              <span class="visible-xs visible-sm"  id="oder" style="padding:10px 0;">- or -</span>
                         </p>


                        </div>
                      </div>

我该如何解决？好吧，如何添加更多细节。就像，您要完成什么，如何做，在使用该方法时发现了哪些困难，尝试过的其他方法等。总而言之，没有代码也不是一个好问题，仅凭代码也不是一个好问题。搜索余额！

网络摄像头工作正常，但反应迟钝，请帮助谢谢

Answer 1

可以添加css断点

@media (max-width: 576px) {
    #my_camera video {
        max-width: 80%;
        max-height: 80%;
    }

    #results img {
        max-width: 80%;
        max-height: 80%;

    }
}

如何使响应式摄像头图像网络摄像头工作正常，但无响应

1 个答案: